System_Boundary and lines to Systems

[Yavari]

I want to make simple System diagram that shows the most basic dependencies within the system and also between the system and the external systems. Several internal systems have the same external dependencies so I don't want to show them all but only show that the system boundary has dependencies to external system. You can see the system diagram without the internal relationships bellow and it looks as expected.

Now I want to add the most important internal dependencies so I am replacing System(banking_system) with System_Boundary(banking_system, "Banking System") but the lines becomes curly and the diagram becomes hard to follow.

Do you have a suggestion on how I can do this?
Is it possible to make the internal system in a different file and then import it into the previous one. So that PlantUML first renders the system boundary and then includes it a system?

You can see my example bellow

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
Person(customer, "Customer", "View Websie")
Person(sales, "Sales", "Administrates admin page")
Person_Ext(helpdesk, "Customer Service", "Form Requests")
System(banking_system, "Banking System", "Customer website, Admin website, External REST API")

System_Ext(mail_system, "E-mail system", "Exchange server")
System_Ext(ip_system, "Integration Plattofrm", "Customer data")
System_Ext(contract_system, "Contact", "Contracts")
System_Ext(s2_system, "System 2", "Information")
System_Ext(s3_system, "System 3", "Information")

Rel(customer, banking_system, "Uses")
Rel(sales, banking_system, "Uses")

Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel_Back(helpdesk, mail_system, "Sends e-mails to")

Rel(banking_system, ip_system, "Uses", "WCF")
Rel(banking_system, contract_system, "Uses", "SQL")
Rel(banking_system, s2_system, "Uses", "SQL")
Rel(banking_system, s3_system, "Uses", "SQL")
@enduml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
Person(customer, "Customer", "View Websie")
Person(sales, "Sales", "Administrates admin page")
Person_Ext(helpdesk, "Customer Service", "Form Requests")

'This is the change
System_Boundary(banking_system, "Banking System"){
    System(web, "Banking System", "Customer websiteI")
    'System(admin, "Banking System", "Admin website") not even needed in example
    'System(api, "Banking System", "External REST API") not even needed in example
}

System_Ext(mail_system, "E-mail system", "Exchange server")
System_Ext(ip_system, "Integration Plattofrm", "Customer data")
System_Ext(contract_system, "Contact", "Contracts")
System_Ext(s2_system, "System 2", "Information")
System_Ext(s3_system, "System 3", "Information")

Rel(customer, banking_system, "Uses")
Rel(sales, banking_system, "Uses")

Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel_Back(helpdesk, mail_system, "Sends e-mails to")

Rel(banking_system, ip_system, "Uses", "WCF")
Rel(banking_system, contract_system, "Uses", "SQL")
Rel(banking_system, s2_system, "Uses", "SQL")
Rel(banking_system, s3_system, "Uses", "SQL")
@enduml

[adrianvlupu]

Hi,

Regarding

Is it possible to make the internal system in a different file and then import it into the previous one.

You can use !includesub

main.puml

...

System_Boundary(banking_system, "banking System"){
    !includesub ./banking_containers.puml!containers
}

...

banking_containers.puml

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

!startsub containers
Container(c1, "container", "tech")
!endsub

@enduml

System_Boundary(banking_system, "Banking System") but the lines becomes curly and the diagram becomes hard to follow.

I tried your examples and you are correct. When adding any type of nested rectangle the arrows break.

This looks fine:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

skinparam rectangle<<test>> {
    Shadowing false
    StereotypeFontSize 0
    FontColor #444444
    BorderColor #444444
    BorderStyle dashed
    BackgroundColor #FFFFFF
}

Person(customer, "Customer", "View Websie")
Person(sales, "Sales", "Administrates admin page")
Person_Ext(helpdesk, "Customer Service", "Form Requests")

' this is how a boundary outputs
rectangle "==Test" <<test>> as banking_system {

}

System_Ext(mail_system, "E-mail system", "Exchange server")
System_Ext(ip_system, "Integration Plattofrm", "Customer data")
System_Ext(contract_system, "Contact", "Contracts")
System_Ext(s2_system, "System 2", "Information")
System_Ext(s3_system, "System 3", "Information")

Rel(customer, banking_system, "Uses")
Rel(sales, banking_system, "Uses")

Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel_Back(helpdesk, mail_system, "Sends e-mails to")

Rel(banking_system, ip_system, "Uses", "WCF")
Rel(banking_system, contract_system, "Uses", "SQL")
Rel(banking_system, s2_system, "Uses", "SQL")
Rel(banking_system, s3_system, "Uses", "SQL")
@enduml

and adding the nested rectangle breaks the layout:

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

...
rectangle "==Test" <<test>> as banking_system {
    rectangle "==Container" as testcontainer
}

...
@enduml

It seems to be a PlantUML thing, found something similar to your issue here https://forum.plantuml.net/11778/relationship-layout-with-nested-components but had no luck actually generating a diagram using the sub-diagram.

[Yavari]

Thank you for taking the time to look at this.
The issue you found at plantuml forum looked promising and it works when I run it on the server (view here). It doesn't work from Visual Studio Code but I can live with that for now.

Exactly the same code but with the C4_Container added throws an exception (view here):

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

[Yavari]

I have found that it is line 17 in C4.puml that is casing the issue:
skinparam wrapWidth 200

Is it possible to define a type for the C4 elements and set the wrapWidth attribute on that type instead?

@startuml
skinparam wrapWidth 200

rectangle rect1 [
== rect1
..
{{
  rectangle nested1
  rectangle nested2
}}
]
rectangle rect2

rect1 -r-> rect2
@enduml

[adrianvlupu]

Interesting problem, you cound fix it by adding skinparam wrapWidth auto after the include but all the container/system entities will need to use \n

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

skinparam wrapWidth auto

skinparam Backgroundcolor transparent
skinparam defaultTextAlignment center
rectangle rect1 [
== rect1
..
{{
  rectangle nested1
  rectangle nested2

Container(c1, "Container", "tech", "Some long description of the container.\n You have to use new line characters\n in order to keep the layout")
}}
]
rectangle rect2

rect1 -r-> rect2
@enduml

[Yavari]

Thanks, that works for me.