Improve layout of components

[pete-kasson]

The component layout appears to be disjointed at times and this may be due to order of execution of the UML.

For example, my first class citizen component is far right and its integration flow is wonky and wonder if there is a way to improve this, like centering components, or alignment, as well as best practice for navigation within the design, to improve L&F.

[Potherca]

Hi! Without any example diagram it is hard to judge what the problem might be or what solutions to suggest.

Could you post or link to the diagram that is giving you trouble?

[pete-kasson]

Here is the exported image ... right mobile app is far right, and the arrows are not optimally layed out, as well as the external box, back to the mobile app

[Potherca]

Is it possible to also post the (redacted) PlantUML diagram text?

[pete-kasson]

@startuml

!include <awslib/AWSCommon>
!include <awslib/AWSSimplified.puml>
!include <awslib/Compute/all.puml>
!include <awslib/mobile/all.puml>
!include <awslib/General/Users>

!include ./C4_Context.puml
!include ./C4_Container.puml

!include <awslib/general/all.puml>
!include <awslib/GroupIcons/all.puml>
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' uncomment the following line and comment the first to use locally
' !include C4_Container.puml

' LAYOUT_TOP_DOWN()
' LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
' LAYOUT_LEFT_RIGHT()

title Container diagram for:  Simple chat flow

Mobile(customer,  App, "A customer of the bank, with personal bank accounts")

System_Boundary(c1, "Platform") {
    Container(web_app, "Chat Engine", "server", "Interface for Chat client")
    Container(chat_agent, "Chat Agent", "Web interface", "Handles customer chat session")
    ContainerDb(database, "Database", "SQL Database", "Stores chat transcript for customer session")
    Container(backend_api, "Chat services", "server", "Internal service layer for chat transactions")
}

System_Ext(email_system, "E-Mail System", "Send chat transcript on request")

Rel(customer, web_app, "Chats with agent, based on region", "SSL")

Rel(chat_agent, backend_api, "Uses", "async, JSON/HTTPS")

Rel_Back(customer, email_system, "Sends e-mails to customer email")
Rel_Back(chat_agent, web_app, "Forwards message to")
Rel_Back_Neighbor(database, backend_api, "Reads from and writes to", "JDBC")
Rel_Back(email_system, backend_api, "Sends e-mails using", "SMTP")
@enduml

[kirchsth]

You could make it like

@startuml
!include <awslib/AWSCommon>
!include <awslib/AWSSimplified.puml>
!include <awslib/Compute/all.puml>
!include <awslib/mobile/all.puml>
!include <awslib/General/Users>

' !include ./C4_Context.puml
' !include ./C4_Container.puml

!include <awslib/general/all.puml>
!include <awslib/GroupIcons/all.puml>
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

' uncomment the following line and comment the first to use locally
' !include C4_Container.puml

LAYOUT_TOP_DOWN()
' LAYOUT_AS_SKETCH()
LAYOUT_WITH_LEGEND()
' LAYOUT_LEFT_RIGHT()

title Container diagram for: Simple chat flow

Mobile(customer, App, "A customer of the bank, with personal bank accounts")

System_Boundary(c1, "Platform") {
Container(web_app, "Chat Engine", "server", "Interface for Chat client")
Container(chat_agent, "Chat Agent", "Web interface", "Handles customer chat session")
ContainerDb(database, "Database", "SQL Database", "Stores chat transcript for customer session")
Container(backend_api, "Chat services", "server", "Internal service layer for chat transactions")
}

System_Ext(email_system, "E-Mail System", "Send chat transcript on request")

Rel_R(customer, web_app, "Chats with agent, based on region", "SSL")

Rel(chat_agent, backend_api, "Uses", "async, JSON/HTTPS")

Rel_U(email_system, customer, "Sends e-mails to customer email")
Rel(web_app, chat_agent, "Forwards message to")
Rel_R(backend_api, database, "Reads from and writes to", "JDBC")
Rel_L(backend_api, email_system, "Sends e-mails using", "SMTP")
@enduml

[pete-kasson]

I see - using direct placement with Rel_L, Rel_R and the fixed starting position, you have a little more control versus the seemingly random ordering. That worked, thanks !

[Potherca]

@pete-puma Are the suggestions by kirchsth a sufficient solution for your problem? If so, can we close this issue?