Client-side encrypted workspace
The workspace "" has been client-side encrypted, please enter the passphrase to decrypt it.
DSL editor
This browser-based DSL editor provides some rudimentary syntax highlighting and the ability to use the DSL without installing any tooling, but it does not provide access to the full feature set of the DSL. We recommend using the DSL in conjunction with Structurizr Lite or the Structurizr CLI instead. See Help - DSL for more details.
Structurizr Lite
Recommended
Structurizr Lite provides a way to quickly work with a single workspace. It's free to use, and allows you to view/edit diagrams, view documentation, and view architecture decision records defined in a DSL workspace.
The auto-sync feature provides the ability to sync your local changes with a workspace stored on the Structurizr cloud service or an on-premises installation.
Structurizr CLI
Recommended
The Structurizr CLI is a command line utility, designed to be used in conjunction with the Structurizr DSL. It provides the ability to push/pull workspaces to/from the Structurizr cloud service or an on-premises installation, in additional to exporting the views defined in a DSL file to other formats (PlantUML, Mermaid, WebSequenceDiagrams, and Ilograph).
See Getting started with the Structurizr CLI and DSL for more information.
DSL editor
Not recommended
If you'd rather not use Structurizr Lite or the Structurizr CLI, the Structurizr cloud service/on-premises installation provides a basic online DSL editor. The editor provides some rudimentary syntax highlighting and the ability to use the DSL without installing any tooling, but it does not provide access to the full feature set of the DSL.
PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml
parameter.
See StructurizrPlantUMLExporter for customisation options.
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service1API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service1DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service2API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service2DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service3API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service3Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service4API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service4DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service5API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service5DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service6API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service6DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service7API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service7DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service8API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service8DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemB>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<SoftwareSystemC>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<SoftwareSystemA.UI>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam person<<User>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 shadowing false } skinparam folder<<SoftwareSystemA.WebServer>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } person "==User\n<size:10>[Person]</size>" <<User>> as User rectangle "==Software System B\n<size:10>[Software System]</size>" <<SoftwareSystemB>> as SoftwareSystemB rectangle "==Software System C\n<size:10>[Software System]</size>" <<SoftwareSystemC>> as SoftwareSystemC rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 1" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 1 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service1API>> as SoftwareSystemA.Service1API database "==Service 1 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service1DatabaseSchema>> as SoftwareSystemA.Service1DatabaseSchema } rectangle "Service 2" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 2 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service2API>> as SoftwareSystemA.Service2API database "==Service 2 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service2DatabaseSchema>> as SoftwareSystemA.Service2DatabaseSchema } rectangle "Service 3" <<group3>> as group3 { skinparam RectangleBorderColor<<group3>> #cccccc skinparam RectangleFontColor<<group3>> #cccccc skinparam RectangleBorderStyle<<group3>> dashed hexagon "==Service 3 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service3API>> as SoftwareSystemA.Service3API database "==Service 3 Database\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service3Database>> as SoftwareSystemA.Service3Database } rectangle "Service 4" <<group4>> as group4 { skinparam RectangleBorderColor<<group4>> #cccccc skinparam RectangleFontColor<<group4>> #cccccc skinparam RectangleBorderStyle<<group4>> dashed hexagon "==Service 4 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service4API>> as SoftwareSystemA.Service4API database "==Service 4 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service4DatabaseSchema>> as SoftwareSystemA.Service4DatabaseSchema } rectangle "Service 5" <<group5>> as group5 { skinparam RectangleBorderColor<<group5>> #cccccc skinparam RectangleFontColor<<group5>> #cccccc skinparam RectangleBorderStyle<<group5>> dashed hexagon "==Service 5 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service5API>> as SoftwareSystemA.Service5API database "==Service 5 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service5DatabaseSchema>> as SoftwareSystemA.Service5DatabaseSchema } rectangle "Service 6" <<group6>> as group6 { skinparam RectangleBorderColor<<group6>> #cccccc skinparam RectangleFontColor<<group6>> #cccccc skinparam RectangleBorderStyle<<group6>> dashed hexagon "==Service 6 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service6API>> as SoftwareSystemA.Service6API database "==Service 6 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service6DatabaseSchema>> as SoftwareSystemA.Service6DatabaseSchema } rectangle "Service 7" <<group7>> as group7 { skinparam RectangleBorderColor<<group7>> #cccccc skinparam RectangleFontColor<<group7>> #cccccc skinparam RectangleBorderStyle<<group7>> dashed hexagon "==Service 7 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service7API>> as SoftwareSystemA.Service7API database "==Service 7 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service7DatabaseSchema>> as SoftwareSystemA.Service7DatabaseSchema } rectangle "Service 8" <<group8>> as group8 { skinparam RectangleBorderColor<<group8>> #cccccc skinparam RectangleFontColor<<group8>> #cccccc skinparam RectangleBorderStyle<<group8>> dashed hexagon "==Service 8 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service8API>> as SoftwareSystemA.Service8API database "==Service 8 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service8DatabaseSchema>> as SoftwareSystemA.Service8DatabaseSchema } folder "==Web Server\n<size:10>[Container: Nginx]</size>\n\nServes HTML, CSS, JavaScript, etc" <<SoftwareSystemA.WebServer>> as SoftwareSystemA.WebServer rectangle "==UI\n<size:10>[Container: JavaScript and React]</size>" <<SoftwareSystemA.UI>> as SoftwareSystemA.UI } SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service2DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service3Database : "<color:#707070>" SoftwareSystemA.Service4API .[#707070,thickness=2].> SoftwareSystemA.Service4DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service5API .[#707070,thickness=2].> SoftwareSystemB : "<color:#707070>" SoftwareSystemA.Service5API .[#707070,thickness=2].> SoftwareSystemA.Service5DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service6API .[#707070,thickness=2].> SoftwareSystemC : "<color:#707070>" SoftwareSystemA.Service6API .[#707070,thickness=2].> SoftwareSystemA.Service6DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service7API .[#707070,thickness=2].> SoftwareSystemA.Service7DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service8API .[#707070,thickness=2].> SoftwareSystemA.Service8DatabaseSchema : "<color:#707070>" User .[#707070,thickness=2].> SoftwareSystemA.WebServer : "<color:#707070>Requests UI from (using web browser)" SoftwareSystemA.WebServer .[#707070,thickness=2].> SoftwareSystemA.UI : "<color:#707070>Delivers" User .[#707070,thickness=2].> SoftwareSystemA.UI : "<color:#707070>Uses" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service1API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service5API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service5API : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service7API : "<color:#707070>" SoftwareSystemA.Service4API .[#707070,thickness=2].> SoftwareSystemA.Service6API : "<color:#707070>" SoftwareSystemA.Service7API .[#707070,thickness=2].> SoftwareSystemA.Service8API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service1DatabaseSchema : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Single Page Application" <<3>> skinparam folder<<4>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } folder "==Container, Web Server" <<4>> skinparam person<<5>> { BackgroundColor #08427b FontColor #ffffff BorderColor #052e56 } person "==Person" <<5>> skinparam rectangle<<6>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, External" <<6>> rectangle "." <<_transparent>> as 7 7 .[#707070,thickness=2].> 7 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service1API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service1DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service2API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service3API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA.UI>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 1" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 1 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service1API>> as SoftwareSystemA.Service1API database "==Service 1 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service1DatabaseSchema>> as SoftwareSystemA.Service1DatabaseSchema } rectangle "Service 2" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 2 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service2API>> as SoftwareSystemA.Service2API } rectangle "Service 3" <<group3>> as group3 { skinparam RectangleBorderColor<<group3>> #cccccc skinparam RectangleFontColor<<group3>> #cccccc skinparam RectangleBorderStyle<<group3>> dashed hexagon "==Service 3 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service3API>> as SoftwareSystemA.Service3API } rectangle "==UI\n<size:10>[Container: JavaScript and React]</size>" <<SoftwareSystemA.UI>> as SoftwareSystemA.UI } SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service1API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service1DatabaseSchema : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Single Page Application" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service1API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service2API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service2DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service4API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service5API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA.UI>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 1" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 1 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service1API>> as SoftwareSystemA.Service1API } rectangle "Service 2" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 2 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service2API>> as SoftwareSystemA.Service2API database "==Service 2 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service2DatabaseSchema>> as SoftwareSystemA.Service2DatabaseSchema } rectangle "Service 4" <<group3>> as group3 { skinparam RectangleBorderColor<<group3>> #cccccc skinparam RectangleFontColor<<group3>> #cccccc skinparam RectangleBorderStyle<<group3>> dashed hexagon "==Service 4 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service4API>> as SoftwareSystemA.Service4API } rectangle "Service 5" <<group4>> as group4 { skinparam RectangleBorderColor<<group4>> #cccccc skinparam RectangleFontColor<<group4>> #cccccc skinparam RectangleBorderStyle<<group4>> dashed hexagon "==Service 5 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service5API>> as SoftwareSystemA.Service5API } rectangle "==UI\n<size:10>[Container: JavaScript and React]</size>" <<SoftwareSystemA.UI>> as SoftwareSystemA.UI } SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service2DatabaseSchema : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service1API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service5API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service5API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Single Page Application" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service1API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service3API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service3Database>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service4API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service7API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA.UI>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 1" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 1 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service1API>> as SoftwareSystemA.Service1API } rectangle "Service 3" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 3 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service3API>> as SoftwareSystemA.Service3API database "==Service 3 Database\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service3Database>> as SoftwareSystemA.Service3Database } rectangle "Service 4" <<group3>> as group3 { skinparam RectangleBorderColor<<group3>> #cccccc skinparam RectangleFontColor<<group3>> #cccccc skinparam RectangleBorderStyle<<group3>> dashed hexagon "==Service 4 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service4API>> as SoftwareSystemA.Service4API } rectangle "Service 7" <<group4>> as group4 { skinparam RectangleBorderColor<<group4>> #cccccc skinparam RectangleFontColor<<group4>> #cccccc skinparam RectangleBorderStyle<<group4>> dashed hexagon "==Service 7 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service7API>> as SoftwareSystemA.Service7API } rectangle "==UI\n<size:10>[Container: JavaScript and React]</size>" <<SoftwareSystemA.UI>> as SoftwareSystemA.UI } SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service3Database : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service1API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service1API .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service7API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Single Page Application" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service2API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service3API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service4API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service4DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service6API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA.UI>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 2" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 2 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service2API>> as SoftwareSystemA.Service2API } rectangle "Service 3" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 3 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service3API>> as SoftwareSystemA.Service3API } rectangle "Service 4" <<group3>> as group3 { skinparam RectangleBorderColor<<group3>> #cccccc skinparam RectangleFontColor<<group3>> #cccccc skinparam RectangleBorderStyle<<group3>> dashed hexagon "==Service 4 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service4API>> as SoftwareSystemA.Service4API database "==Service 4 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service4DatabaseSchema>> as SoftwareSystemA.Service4DatabaseSchema } rectangle "Service 6" <<group4>> as group4 { skinparam RectangleBorderColor<<group4>> #cccccc skinparam RectangleFontColor<<group4>> #cccccc skinparam RectangleBorderStyle<<group4>> dashed hexagon "==Service 6 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service6API>> as SoftwareSystemA.Service6API } rectangle "==UI\n<size:10>[Container: JavaScript and React]</size>" <<SoftwareSystemA.UI>> as SoftwareSystemA.UI } SoftwareSystemA.Service4API .[#707070,thickness=2].> SoftwareSystemA.Service4DatabaseSchema : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service3API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service4API : "<color:#707070>" SoftwareSystemA.Service4API .[#707070,thickness=2].> SoftwareSystemA.Service6API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Single Page Application" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service2API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service5API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service5DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemB>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<SoftwareSystemA.UI>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "==Software System B\n<size:10>[Software System]</size>" <<SoftwareSystemB>> as SoftwareSystemB rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 2" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 2 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service2API>> as SoftwareSystemA.Service2API } rectangle "Service 5" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 5 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service5API>> as SoftwareSystemA.Service5API database "==Service 5 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service5DatabaseSchema>> as SoftwareSystemA.Service5DatabaseSchema } rectangle "==UI\n<size:10>[Container: JavaScript and React]</size>" <<SoftwareSystemA.UI>> as SoftwareSystemA.UI } SoftwareSystemA.Service5API .[#707070,thickness=2].> SoftwareSystemB : "<color:#707070>" SoftwareSystemA.Service5API .[#707070,thickness=2].> SoftwareSystemA.Service5DatabaseSchema : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service2API : "<color:#707070>" SoftwareSystemA.UI .[#707070,thickness=2].> SoftwareSystemA.Service5API : "<color:#707070>" SoftwareSystemA.Service2API .[#707070,thickness=2].> SoftwareSystemA.Service5API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } rectangle "==Container, Single Page Application" <<3>> skinparam rectangle<<4>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, External" <<4>> rectangle "." <<_transparent>> as 5 5 .[#707070,thickness=2].> 5 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service4API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service6API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service6DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemC>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "==Software System C\n<size:10>[Software System]</size>" <<SoftwareSystemC>> as SoftwareSystemC rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 4" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 4 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service4API>> as SoftwareSystemA.Service4API } rectangle "Service 6" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 6 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service6API>> as SoftwareSystemA.Service6API database "==Service 6 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service6DatabaseSchema>> as SoftwareSystemA.Service6DatabaseSchema } } SoftwareSystemA.Service6API .[#707070,thickness=2].> SoftwareSystemC : "<color:#707070>" SoftwareSystemA.Service6API .[#707070,thickness=2].> SoftwareSystemA.Service6DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service4API .[#707070,thickness=2].> SoftwareSystemA.Service6API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> skinparam rectangle<<3>> { BackgroundColor #999999 FontColor #ffffff BorderColor #6b6b6b } rectangle "==Software System, External" <<3>> rectangle "." <<_transparent>> as 4 4 .[#707070,thickness=2].> 4 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service3API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service7API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service7DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service8API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 3" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 3 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service3API>> as SoftwareSystemA.Service3API } rectangle "Service 7" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 7 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service7API>> as SoftwareSystemA.Service7API database "==Service 7 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service7DatabaseSchema>> as SoftwareSystemA.Service7DatabaseSchema } rectangle "Service 8" <<group3>> as group3 { skinparam RectangleBorderColor<<group3>> #cccccc skinparam RectangleFontColor<<group3>> #cccccc skinparam RectangleBorderStyle<<group3>> dashed hexagon "==Service 8 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service8API>> as SoftwareSystemA.Service8API } } SoftwareSystemA.Service7API .[#707070,thickness=2].> SoftwareSystemA.Service7DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service3API .[#707070,thickness=2].> SoftwareSystemA.Service7API : "<color:#707070>" SoftwareSystemA.Service7API .[#707070,thickness=2].> SoftwareSystemA.Service8API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> rectangle "." <<_transparent>> as 3 3 .[#707070,thickness=2].> 3 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction skinparam { arrowFontSize 10 defaultTextAlignment center wrapWidth 200 maxMessageSize 100 } hide stereotype skinparam hexagon<<SoftwareSystemA.Service7API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam hexagon<<SoftwareSystemA.Service8API>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam database<<SoftwareSystemA.Service8DatabaseSchema>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 shadowing false } skinparam rectangle<<SoftwareSystemA>> { BorderColor #0b4884 FontColor #0b4884 shadowing false } rectangle "Software System A\n<size:10>[Software System]</size>" <<SoftwareSystemA>> { rectangle "Service 7" <<group1>> as group1 { skinparam RectangleBorderColor<<group1>> #cccccc skinparam RectangleFontColor<<group1>> #cccccc skinparam RectangleBorderStyle<<group1>> dashed hexagon "==Service 7 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service7API>> as SoftwareSystemA.Service7API } rectangle "Service 8" <<group2>> as group2 { skinparam RectangleBorderColor<<group2>> #cccccc skinparam RectangleFontColor<<group2>> #cccccc skinparam RectangleBorderStyle<<group2>> dashed hexagon "==Service 8 API\n<size:10>[Container: Java and Spring Boot]</size>" <<SoftwareSystemA.Service8API>> as SoftwareSystemA.Service8API database "==Service 8 Database Schema\n<size:10>[Container: MySQL]</size>" <<SoftwareSystemA.Service8DatabaseSchema>> as SoftwareSystemA.Service8DatabaseSchema } } SoftwareSystemA.Service8API .[#707070,thickness=2].> SoftwareSystemA.Service8DatabaseSchema : "<color:#707070>" SoftwareSystemA.Service7API .[#707070,thickness=2].> SoftwareSystemA.Service8API : "<color:#707070>" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none skinparam { shadowing false arrowFontSize 15 defaultTextAlignment center wrapWidth 100 maxMessageSize 100 } hide stereotype skinparam rectangle<<_transparent>> { BorderColor transparent BackgroundColor transparent FontColor transparent } skinparam hexagon<<1>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } hexagon "==Container, API" <<1>> skinparam database<<2>> { BackgroundColor #438dd5 FontColor #ffffff BorderColor #2e6295 } database "==Container, Datastore" <<2>> rectangle "." <<_transparent>> as 3 3 .[#707070,thickness=2].> 3 : "<color:#707070>Relationship" @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
C4-PlantUML definitions are available via the Structurizr CLI export command,
using the -format plantuml/c4plantuml
parameter.
See C4PlantUMLExporter for customisation options.
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> Person(User, "User", $descr="", $tags="", $link="") System(SoftwareSystemB, "Software System B", $descr="", $tags="", $link="") System(SoftwareSystemC, "Software System C", $descr="", $tags="", $link="") System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 1", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 1", $tags="Service 1") { Container(SoftwareSystemA.Service1API, "Service 1 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service1DatabaseSchema, "Service 1 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 2", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 2", $tags="Service 2") { Container(SoftwareSystemA.Service2API, "Service 2 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service2DatabaseSchema, "Service 2 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 3", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_3, "Service 3", $tags="Service 3") { Container(SoftwareSystemA.Service3API, "Service 3 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service3Database, "Service 3 Database", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 4", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_4, "Service 4", $tags="Service 4") { Container(SoftwareSystemA.Service4API, "Service 4 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service4DatabaseSchema, "Service 4 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 5", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_5, "Service 5", $tags="Service 5") { Container(SoftwareSystemA.Service5API, "Service 5 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service5DatabaseSchema, "Service 5 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 6", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_6, "Service 6", $tags="Service 6") { Container(SoftwareSystemA.Service6API, "Service 6 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service6DatabaseSchema, "Service 6 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 7", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_7, "Service 7", $tags="Service 7") { Container(SoftwareSystemA.Service7API, "Service 7 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service7DatabaseSchema, "Service 7 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 8", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_8, "Service 8", $tags="Service 8") { Container(SoftwareSystemA.Service8API, "Service 8 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service8DatabaseSchema, "Service 8 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } Container(SoftwareSystemA.WebServer, "Web Server", $techn="Nginx", $descr="Serves HTML, CSS, JavaScript, etc", $tags="", $link="") Container(SoftwareSystemA.UI, "UI", $techn="JavaScript and React", $descr="", $tags="", $link="") } Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service2DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service3Database, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service4API, SoftwareSystemA.Service4DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service5API, SoftwareSystemB, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service5API, SoftwareSystemA.Service5DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service6API, SoftwareSystemC, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service6API, SoftwareSystemA.Service6DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service7API, SoftwareSystemA.Service7DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service8API, SoftwareSystemA.Service8DatabaseSchema, "", $techn="", $tags="", $link="") Rel(User, SoftwareSystemA.WebServer, "Requests UI from (using web browser)", $techn="", $tags="", $link="") Rel(SoftwareSystemA.WebServer, SoftwareSystemA.UI, "Delivers", $techn="", $tags="", $link="") Rel(User, SoftwareSystemA.UI, "Uses", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service1API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service5API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service5API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service7API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service4API, SoftwareSystemA.Service6API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service7API, SoftwareSystemA.Service8API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service1DatabaseSchema, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 1", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 1", $tags="Service 1") { Container(SoftwareSystemA.Service1API, "Service 1 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service1DatabaseSchema, "Service 1 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 2", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 2", $tags="Service 2") { Container(SoftwareSystemA.Service2API, "Service 2 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 3", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_3, "Service 3", $tags="Service 3") { Container(SoftwareSystemA.Service3API, "Service 3 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } Container(SoftwareSystemA.UI, "UI", $techn="JavaScript and React", $descr="", $tags="", $link="") } Rel(SoftwareSystemA.UI, SoftwareSystemA.Service1API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service1DatabaseSchema, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 1", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 1", $tags="Service 1") { Container(SoftwareSystemA.Service1API, "Service 1 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 2", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 2", $tags="Service 2") { Container(SoftwareSystemA.Service2API, "Service 2 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service2DatabaseSchema, "Service 2 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 4", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_3, "Service 4", $tags="Service 4") { Container(SoftwareSystemA.Service4API, "Service 4 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 5", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_4, "Service 5", $tags="Service 5") { Container(SoftwareSystemA.Service5API, "Service 5 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } Container(SoftwareSystemA.UI, "UI", $techn="JavaScript and React", $descr="", $tags="", $link="") } Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service2DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service1API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service5API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service5API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 1", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 1", $tags="Service 1") { Container(SoftwareSystemA.Service1API, "Service 1 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 3", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 3", $tags="Service 3") { Container(SoftwareSystemA.Service3API, "Service 3 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service3Database, "Service 3 Database", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 4", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_3, "Service 4", $tags="Service 4") { Container(SoftwareSystemA.Service4API, "Service 4 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 7", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_4, "Service 7", $tags="Service 7") { Container(SoftwareSystemA.Service7API, "Service 7 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } Container(SoftwareSystemA.UI, "UI", $techn="JavaScript and React", $descr="", $tags="", $link="") } Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service3Database, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service1API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service1API, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service7API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 2", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 2", $tags="Service 2") { Container(SoftwareSystemA.Service2API, "Service 2 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 3", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 3", $tags="Service 3") { Container(SoftwareSystemA.Service3API, "Service 3 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 4", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_3, "Service 4", $tags="Service 4") { Container(SoftwareSystemA.Service4API, "Service 4 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service4DatabaseSchema, "Service 4 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 6", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_4, "Service 6", $tags="Service 6") { Container(SoftwareSystemA.Service6API, "Service 6 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } Container(SoftwareSystemA.UI, "UI", $techn="JavaScript and React", $descr="", $tags="", $link="") } Rel(SoftwareSystemA.Service4API, SoftwareSystemA.Service4DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service3API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service4API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service4API, SoftwareSystemA.Service6API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System(SoftwareSystemB, "Software System B", $descr="", $tags="", $link="") System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 2", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 2", $tags="Service 2") { Container(SoftwareSystemA.Service2API, "Service 2 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 5", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 5", $tags="Service 5") { Container(SoftwareSystemA.Service5API, "Service 5 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service5DatabaseSchema, "Service 5 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } Container(SoftwareSystemA.UI, "UI", $techn="JavaScript and React", $descr="", $tags="", $link="") } Rel(SoftwareSystemA.Service5API, SoftwareSystemB, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service5API, SoftwareSystemA.Service5DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service2API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.UI, SoftwareSystemA.Service5API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service2API, SoftwareSystemA.Service5API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System(SoftwareSystemC, "Software System C", $descr="", $tags="", $link="") System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 4", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 4", $tags="Service 4") { Container(SoftwareSystemA.Service4API, "Service 4 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 6", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 6", $tags="Service 6") { Container(SoftwareSystemA.Service6API, "Service 6 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service6DatabaseSchema, "Service 6 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } } Rel(SoftwareSystemA.Service6API, SoftwareSystemC, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service6API, SoftwareSystemA.Service6DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service4API, SoftwareSystemA.Service6API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 3", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 3", $tags="Service 3") { Container(SoftwareSystemA.Service3API, "Service 3 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 7", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 7", $tags="Service 7") { Container(SoftwareSystemA.Service7API, "Service 7 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service7DatabaseSchema, "Service 7 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } AddBoundaryTag("Service 8", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_3, "Service 8", $tags="Service 8") { Container(SoftwareSystemA.Service8API, "Service 8 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } } Rel(SoftwareSystemA.Service7API, SoftwareSystemA.Service7DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service3API, SoftwareSystemA.Service7API, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service7API, SoftwareSystemA.Service8API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
@startuml set separator none title Software System A - Containers top to bottom direction !include <C4/C4> !include <C4/C4_Context> !include <C4/C4_Container> System_Boundary("SoftwareSystemA_boundary", "Software System A", $tags="") { AddBoundaryTag("Service 7", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_1, "Service 7", $tags="Service 7") { Container(SoftwareSystemA.Service7API, "Service 7 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") } AddBoundaryTag("Service 8", $borderColor="#cccccc", $fontColor="#cccccc", $borderStyle="dashed") Boundary(group_2, "Service 8", $tags="Service 8") { Container(SoftwareSystemA.Service8API, "Service 8 API", $techn="Java and Spring Boot", $descr="", $tags="", $link="") ContainerDb(SoftwareSystemA.Service8DatabaseSchema, "Service 8 Database Schema", $techn="MySQL", $descr="", $tags="", $link="") } } Rel(SoftwareSystemA.Service8API, SoftwareSystemA.Service8DatabaseSchema, "", $techn="", $tags="", $link="") Rel(SoftwareSystemA.Service7API, SoftwareSystemA.Service8API, "", $techn="", $tags="", $link="") SHOW_LEGEND(true) @enduml
(this will send your diagram content to https://plantuml.com/plantuml)
Mermaid definitions are available via the Structurizr CLI export command,
using the -format mermaid
parameter. Your Mermaid configuration will need to include "securityLevel": "loose"
to render this definition correctly.
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff 1["<div style='font-weight: bold'>User</div><div style='font-size: 70%; margin-top: 0px'>[Person]</div>"] style 1 fill:#08427b,stroke:#052e56,color:#ffffff 2["<div style='font-weight: bold'>Software System B</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"] style 2 fill:#999999,stroke:#6b6b6b,color:#ffffff 3["<div style='font-weight: bold'>Software System C</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"] style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 1"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 7["<div style='font-weight: bold'>Service 1 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 7 fill:#438dd5,stroke:#2e6295,color:#ffffff 8[("<div style='font-weight: bold'>Service 1 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 2"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 10["<div style='font-weight: bold'>Service 2 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff 11[("<div style='font-weight: bold'>Service 2 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 11 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group3 ["Service 3"] style group3 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 13["<div style='font-weight: bold'>Service 3 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 13 fill:#438dd5,stroke:#2e6295,color:#ffffff 14[("<div style='font-weight: bold'>Service 3 Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 14 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group4 ["Service 4"] style group4 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 16["<div style='font-weight: bold'>Service 4 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff 17[("<div style='font-weight: bold'>Service 4 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group5 ["Service 5"] style group5 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 19["<div style='font-weight: bold'>Service 5 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 19 fill:#438dd5,stroke:#2e6295,color:#ffffff 22[("<div style='font-weight: bold'>Service 5 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 22 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group6 ["Service 6"] style group6 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 24["<div style='font-weight: bold'>Service 6 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 24 fill:#438dd5,stroke:#2e6295,color:#ffffff 27[("<div style='font-weight: bold'>Service 6 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 27 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group7 ["Service 7"] style group7 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 29["<div style='font-weight: bold'>Service 7 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 29 fill:#438dd5,stroke:#2e6295,color:#ffffff 30[("<div style='font-weight: bold'>Service 7 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 30 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group8 ["Service 8"] style group8 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 32["<div style='font-weight: bold'>Service 8 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 32 fill:#438dd5,stroke:#2e6295,color:#ffffff 33[("<div style='font-weight: bold'>Service 8 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 33 fill:#438dd5,stroke:#2e6295,color:#ffffff end 5["<div style='font-weight: bold'>Web Server</div><div style='font-size: 70%; margin-top: 0px'>[Container: Nginx]</div><div style='font-size: 80%; margin-top:10px'>Serves HTML, CSS, JavaScript,<br />etc</div>"] style 5 fill:#438dd5,stroke:#2e6295,color:#ffffff 6["<div style='font-weight: bold'>UI</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and React]</div>"] style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff end 10-. "<div></div><div style='font-size: 70%'></div>" .->11 13-. "<div></div><div style='font-size: 70%'></div>" .->14 16-. "<div></div><div style='font-size: 70%'></div>" .->17 19-. "<div></div><div style='font-size: 70%'></div>" .->2 19-. "<div></div><div style='font-size: 70%'></div>" .->22 24-. "<div></div><div style='font-size: 70%'></div>" .->3 24-. "<div></div><div style='font-size: 70%'></div>" .->27 29-. "<div></div><div style='font-size: 70%'></div>" .->30 32-. "<div></div><div style='font-size: 70%'></div>" .->33 1-. "<div>Requests UI from (using web<br />browser)</div><div style='font-size: 70%'></div>" .->5 5-. "<div>Delivers</div><div style='font-size: 70%'></div>" .->6 1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->6 6-. "<div></div><div style='font-size: 70%'></div>" .->7 6-. "<div></div><div style='font-size: 70%'></div>" .->10 6-. "<div></div><div style='font-size: 70%'></div>" .->13 6-. "<div></div><div style='font-size: 70%'></div>" .->16 6-. "<div></div><div style='font-size: 70%'></div>" .->19 7-. "<div></div><div style='font-size: 70%'></div>" .->10 7-. "<div></div><div style='font-size: 70%'></div>" .->13 10-. "<div></div><div style='font-size: 70%'></div>" .->16 10-. "<div></div><div style='font-size: 70%'></div>" .->19 13-. "<div></div><div style='font-size: 70%'></div>" .->16 13-. "<div></div><div style='font-size: 70%'></div>" .->29 16-. "<div></div><div style='font-size: 70%'></div>" .->24 29-. "<div></div><div style='font-size: 70%'></div>" .->32 7-. "<div></div><div style='font-size: 70%'></div>" .->8 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 1"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 7["<div style='font-weight: bold'>Service 1 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 7 fill:#438dd5,stroke:#2e6295,color:#ffffff 8[("<div style='font-weight: bold'>Service 1 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 8 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 2"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 10["<div style='font-weight: bold'>Service 2 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group3 ["Service 3"] style group3 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 13["<div style='font-weight: bold'>Service 3 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 13 fill:#438dd5,stroke:#2e6295,color:#ffffff end 6["<div style='font-weight: bold'>UI</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and React]</div>"] style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff end 6-. "<div></div><div style='font-size: 70%'></div>" .->7 6-. "<div></div><div style='font-size: 70%'></div>" .->10 6-. "<div></div><div style='font-size: 70%'></div>" .->13 7-. "<div></div><div style='font-size: 70%'></div>" .->10 7-. "<div></div><div style='font-size: 70%'></div>" .->13 7-. "<div></div><div style='font-size: 70%'></div>" .->8 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 1"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 7["<div style='font-weight: bold'>Service 1 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 7 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 2"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 10["<div style='font-weight: bold'>Service 2 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff 11[("<div style='font-weight: bold'>Service 2 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 11 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group3 ["Service 4"] style group3 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 16["<div style='font-weight: bold'>Service 4 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group4 ["Service 5"] style group4 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 19["<div style='font-weight: bold'>Service 5 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 19 fill:#438dd5,stroke:#2e6295,color:#ffffff end 6["<div style='font-weight: bold'>UI</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and React]</div>"] style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff end 10-. "<div></div><div style='font-size: 70%'></div>" .->11 6-. "<div></div><div style='font-size: 70%'></div>" .->7 6-. "<div></div><div style='font-size: 70%'></div>" .->10 6-. "<div></div><div style='font-size: 70%'></div>" .->16 6-. "<div></div><div style='font-size: 70%'></div>" .->19 7-. "<div></div><div style='font-size: 70%'></div>" .->10 10-. "<div></div><div style='font-size: 70%'></div>" .->16 10-. "<div></div><div style='font-size: 70%'></div>" .->19 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 1"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 7["<div style='font-weight: bold'>Service 1 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 7 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 3"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 13["<div style='font-weight: bold'>Service 3 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 13 fill:#438dd5,stroke:#2e6295,color:#ffffff 14[("<div style='font-weight: bold'>Service 3 Database</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 14 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group3 ["Service 4"] style group3 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 16["<div style='font-weight: bold'>Service 4 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group4 ["Service 7"] style group4 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 29["<div style='font-weight: bold'>Service 7 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 29 fill:#438dd5,stroke:#2e6295,color:#ffffff end 6["<div style='font-weight: bold'>UI</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and React]</div>"] style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff end 13-. "<div></div><div style='font-size: 70%'></div>" .->14 6-. "<div></div><div style='font-size: 70%'></div>" .->7 6-. "<div></div><div style='font-size: 70%'></div>" .->13 6-. "<div></div><div style='font-size: 70%'></div>" .->16 7-. "<div></div><div style='font-size: 70%'></div>" .->13 13-. "<div></div><div style='font-size: 70%'></div>" .->16 13-. "<div></div><div style='font-size: 70%'></div>" .->29 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 2"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 10["<div style='font-weight: bold'>Service 2 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 3"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 13["<div style='font-weight: bold'>Service 3 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 13 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group3 ["Service 4"] style group3 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 16["<div style='font-weight: bold'>Service 4 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff 17[("<div style='font-weight: bold'>Service 4 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 17 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group4 ["Service 6"] style group4 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 24["<div style='font-weight: bold'>Service 6 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 24 fill:#438dd5,stroke:#2e6295,color:#ffffff end 6["<div style='font-weight: bold'>UI</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and React]</div>"] style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff end 16-. "<div></div><div style='font-size: 70%'></div>" .->17 6-. "<div></div><div style='font-size: 70%'></div>" .->10 6-. "<div></div><div style='font-size: 70%'></div>" .->13 6-. "<div></div><div style='font-size: 70%'></div>" .->16 10-. "<div></div><div style='font-size: 70%'></div>" .->16 13-. "<div></div><div style='font-size: 70%'></div>" .->16 16-. "<div></div><div style='font-size: 70%'></div>" .->24 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff 2["<div style='font-weight: bold'>Software System B</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"] style 2 fill:#999999,stroke:#6b6b6b,color:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 2"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 10["<div style='font-weight: bold'>Service 2 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 10 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 5"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 19["<div style='font-weight: bold'>Service 5 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 19 fill:#438dd5,stroke:#2e6295,color:#ffffff 22[("<div style='font-weight: bold'>Service 5 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 22 fill:#438dd5,stroke:#2e6295,color:#ffffff end 6["<div style='font-weight: bold'>UI</div><div style='font-size: 70%; margin-top: 0px'>[Container: JavaScript and React]</div>"] style 6 fill:#438dd5,stroke:#2e6295,color:#ffffff end 19-. "<div></div><div style='font-size: 70%'></div>" .->2 19-. "<div></div><div style='font-size: 70%'></div>" .->22 6-. "<div></div><div style='font-size: 70%'></div>" .->10 6-. "<div></div><div style='font-size: 70%'></div>" .->19 10-. "<div></div><div style='font-size: 70%'></div>" .->19 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff 3["<div style='font-weight: bold'>Software System C</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>"] style 3 fill:#999999,stroke:#6b6b6b,color:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 4"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 16["<div style='font-weight: bold'>Service 4 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 16 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 6"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 24["<div style='font-weight: bold'>Service 6 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 24 fill:#438dd5,stroke:#2e6295,color:#ffffff 27[("<div style='font-weight: bold'>Service 6 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 27 fill:#438dd5,stroke:#2e6295,color:#ffffff end end 24-. "<div></div><div style='font-size: 70%'></div>" .->3 24-. "<div></div><div style='font-size: 70%'></div>" .->27 16-. "<div></div><div style='font-size: 70%'></div>" .->24 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 3"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 13["<div style='font-weight: bold'>Service 3 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 13 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 7"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 29["<div style='font-weight: bold'>Service 7 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 29 fill:#438dd5,stroke:#2e6295,color:#ffffff 30[("<div style='font-weight: bold'>Service 7 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 30 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group3 ["Service 8"] style group3 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 32["<div style='font-weight: bold'>Service 8 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 32 fill:#438dd5,stroke:#2e6295,color:#ffffff end end 29-. "<div></div><div style='font-size: 70%'></div>" .->30 13-. "<div></div><div style='font-size: 70%'></div>" .->29 29-. "<div></div><div style='font-size: 70%'></div>" .->32 end
(this will send your diagram content to https://mermaid.ink)
graph TB linkStyle default fill:#ffffff subgraph diagram ["Software System A - Containers"] style diagram fill:#ffffff,stroke:#ffffff subgraph 4 ["Software System A"] style 4 fill:#ffffff,stroke:#0b4884,color:#0b4884 subgraph group1 ["Service 7"] style group1 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 29["<div style='font-weight: bold'>Service 7 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 29 fill:#438dd5,stroke:#2e6295,color:#ffffff end subgraph group2 ["Service 8"] style group2 fill:#ffffff,stroke:#cccccc,color:#cccccc,stroke-dasharray:5 32["<div style='font-weight: bold'>Service 8 API</div><div style='font-size: 70%; margin-top: 0px'>[Container: Java and Spring Boot]</div>"] style 32 fill:#438dd5,stroke:#2e6295,color:#ffffff 33[("<div style='font-weight: bold'>Service 8 Database Schema</div><div style='font-size: 70%; margin-top: 0px'>[Container: MySQL]</div>")] style 33 fill:#438dd5,stroke:#2e6295,color:#ffffff end end 32-. "<div></div><div style='font-size: 70%'></div>" .->33 29-. "<div></div><div style='font-size: 70%'></div>" .->32 end
(this will send your diagram content to https://mermaid.ink)
WebSequenceDiagram definitions are available via the Structurizr CLI export command,
using the -format websequencediagrams
parameter. Only dynamic views are supported.
DOT definitions are available via the Structurizr CLI export command,
using the -format dot
parameter.
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> 1 [id=1,shape=rect, label=<<font point-size="34">User</font><br /><font point-size="19">[Person]</font>>, style=filled, color="#052e56", fillcolor="#08427b", fontcolor="#ffffff"] 2 [id=2,shape=rect, label=<<font point-size="34">Software System B</font><br /><font point-size="19">[Software System]</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] 3 [id=3,shape=rect, label=<<font point-size="34">Software System C</font><br /><font point-size="19">[Software System]</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 1" { margin=25 label=<<font point-size="24"><br />Service 1</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 7 [id=7,shape=hexagon, label=<<font point-size="34">Service 1 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 8 [id=8,shape=cylinder, label=<<font point-size="34">Service 1 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 2" { margin=25 label=<<font point-size="24"><br />Service 2</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 10 [id=10,shape=hexagon, label=<<font point-size="34">Service 2 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 11 [id=11,shape=cylinder, label=<<font point-size="34">Service 2 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 3" { margin=25 label=<<font point-size="24"><br />Service 3</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 13 [id=13,shape=hexagon, label=<<font point-size="34">Service 3 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 14 [id=14,shape=cylinder, label=<<font point-size="34">Service 3 Database</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 4" { margin=25 label=<<font point-size="24"><br />Service 4</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 16 [id=16,shape=hexagon, label=<<font point-size="34">Service 4 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 17 [id=17,shape=cylinder, label=<<font point-size="34">Service 4 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 5" { margin=25 label=<<font point-size="24"><br />Service 5</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 19 [id=19,shape=hexagon, label=<<font point-size="34">Service 5 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 22 [id=22,shape=cylinder, label=<<font point-size="34">Service 5 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 6" { margin=25 label=<<font point-size="24"><br />Service 6</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 24 [id=24,shape=hexagon, label=<<font point-size="34">Service 6 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 27 [id=27,shape=cylinder, label=<<font point-size="34">Service 6 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 7" { margin=25 label=<<font point-size="24"><br />Service 7</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 29 [id=29,shape=hexagon, label=<<font point-size="34">Service 7 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 30 [id=30,shape=cylinder, label=<<font point-size="34">Service 7 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 8" { margin=25 label=<<font point-size="24"><br />Service 8</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 32 [id=32,shape=hexagon, label=<<font point-size="34">Service 8 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 33 [id=33,shape=cylinder, label=<<font point-size="34">Service 8 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 5 [id=5,shape=folder, label=<<font point-size="34">Web Server</font><br /><font point-size="19">[Container: Nginx]</font><br /><br /><font point-size="24">Serves HTML, CSS, JavaScript,<br />etc</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 6 [id=6,shape=rect, label=<<font point-size="34">UI</font><br /><font point-size="19">[Container: JavaScript and React]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 10 -> 11 [id=12, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 14 [id=15, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 16 -> 17 [id=18, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 19 -> 2 [id=20, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 19 -> 22 [id=23, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 24 -> 3 [id=25, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 24 -> 27 [id=28, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 29 -> 30 [id=31, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 32 -> 33 [id=34, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 5 [id=35, label=<<font point-size="24">Requests UI from (using<br />web browser)</font>>, style="dashed", color="#707070", fontcolor="#707070"] 5 -> 6 [id=37, label=<<font point-size="24">Delivers</font>>, style="dashed", color="#707070", fontcolor="#707070"] 1 -> 6 [id=38, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 7 [id=39, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 10 [id=40, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 13 [id=41, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 16 [id=42, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 19 [id=43, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 10 [id=44, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 13 [id=45, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 16 [id=46, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 19 [id=47, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 16 [id=48, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 29 [id=49, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 16 -> 24 [id=50, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 29 -> 32 [id=51, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 8 [id=9, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 1" { margin=25 label=<<font point-size="24"><br />Service 1</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 7 [id=7,shape=hexagon, label=<<font point-size="34">Service 1 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 8 [id=8,shape=cylinder, label=<<font point-size="34">Service 1 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 2" { margin=25 label=<<font point-size="24"><br />Service 2</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 10 [id=10,shape=hexagon, label=<<font point-size="34">Service 2 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 3" { margin=25 label=<<font point-size="24"><br />Service 3</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 13 [id=13,shape=hexagon, label=<<font point-size="34">Service 3 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 6 [id=6,shape=rect, label=<<font point-size="34">UI</font><br /><font point-size="19">[Container: JavaScript and React]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 6 -> 7 [id=39, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 10 [id=40, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 13 [id=41, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 10 [id=44, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 13 [id=45, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 8 [id=9, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 1" { margin=25 label=<<font point-size="24"><br />Service 1</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 7 [id=7,shape=hexagon, label=<<font point-size="34">Service 1 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 2" { margin=25 label=<<font point-size="24"><br />Service 2</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 10 [id=10,shape=hexagon, label=<<font point-size="34">Service 2 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 11 [id=11,shape=cylinder, label=<<font point-size="34">Service 2 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 4" { margin=25 label=<<font point-size="24"><br />Service 4</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 16 [id=16,shape=hexagon, label=<<font point-size="34">Service 4 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 5" { margin=25 label=<<font point-size="24"><br />Service 5</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 19 [id=19,shape=hexagon, label=<<font point-size="34">Service 5 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 6 [id=6,shape=rect, label=<<font point-size="34">UI</font><br /><font point-size="19">[Container: JavaScript and React]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 10 -> 11 [id=12, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 7 [id=39, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 10 [id=40, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 16 [id=42, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 19 [id=43, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 10 [id=44, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 16 [id=46, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 19 [id=47, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 1" { margin=25 label=<<font point-size="24"><br />Service 1</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 7 [id=7,shape=hexagon, label=<<font point-size="34">Service 1 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 3" { margin=25 label=<<font point-size="24"><br />Service 3</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 13 [id=13,shape=hexagon, label=<<font point-size="34">Service 3 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 14 [id=14,shape=cylinder, label=<<font point-size="34">Service 3 Database</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 4" { margin=25 label=<<font point-size="24"><br />Service 4</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 16 [id=16,shape=hexagon, label=<<font point-size="34">Service 4 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 7" { margin=25 label=<<font point-size="24"><br />Service 7</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 29 [id=29,shape=hexagon, label=<<font point-size="34">Service 7 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 6 [id=6,shape=rect, label=<<font point-size="34">UI</font><br /><font point-size="19">[Container: JavaScript and React]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 13 -> 14 [id=15, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 7 [id=39, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 13 [id=41, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 16 [id=42, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 7 -> 13 [id=45, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 16 [id=48, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 29 [id=49, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 2" { margin=25 label=<<font point-size="24"><br />Service 2</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 10 [id=10,shape=hexagon, label=<<font point-size="34">Service 2 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 3" { margin=25 label=<<font point-size="24"><br />Service 3</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 13 [id=13,shape=hexagon, label=<<font point-size="34">Service 3 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 4" { margin=25 label=<<font point-size="24"><br />Service 4</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 16 [id=16,shape=hexagon, label=<<font point-size="34">Service 4 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 17 [id=17,shape=cylinder, label=<<font point-size="34">Service 4 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 6" { margin=25 label=<<font point-size="24"><br />Service 6</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 24 [id=24,shape=hexagon, label=<<font point-size="34">Service 6 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 6 [id=6,shape=rect, label=<<font point-size="34">UI</font><br /><font point-size="19">[Container: JavaScript and React]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 16 -> 17 [id=18, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 10 [id=40, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 13 [id=41, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 16 [id=42, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 16 [id=46, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 16 [id=48, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 16 -> 24 [id=50, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> 2 [id=2,shape=rect, label=<<font point-size="34">Software System B</font><br /><font point-size="19">[Software System]</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 2" { margin=25 label=<<font point-size="24"><br />Service 2</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 10 [id=10,shape=hexagon, label=<<font point-size="34">Service 2 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 5" { margin=25 label=<<font point-size="24"><br />Service 5</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 19 [id=19,shape=hexagon, label=<<font point-size="34">Service 5 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 22 [id=22,shape=cylinder, label=<<font point-size="34">Service 5 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 6 [id=6,shape=rect, label=<<font point-size="34">UI</font><br /><font point-size="19">[Container: JavaScript and React]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } 19 -> 2 [id=20, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 19 -> 22 [id=23, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 10 [id=40, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 6 -> 19 [id=43, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 10 -> 19 [id=47, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> 3 [id=3,shape=rect, label=<<font point-size="34">Software System C</font><br /><font point-size="19">[Software System]</font>>, style=filled, color="#6b6b6b", fillcolor="#999999", fontcolor="#ffffff"] subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 4" { margin=25 label=<<font point-size="24"><br />Service 4</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 16 [id=16,shape=hexagon, label=<<font point-size="34">Service 4 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 6" { margin=25 label=<<font point-size="24"><br />Service 6</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 24 [id=24,shape=hexagon, label=<<font point-size="34">Service 6 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 27 [id=27,shape=cylinder, label=<<font point-size="34">Service 6 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } 24 -> 3 [id=25, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 24 -> 27 [id=28, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 16 -> 24 [id=50, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 3" { margin=25 label=<<font point-size="24"><br />Service 3</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 13 [id=13,shape=hexagon, label=<<font point-size="34">Service 3 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 7" { margin=25 label=<<font point-size="24"><br />Service 7</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 29 [id=29,shape=hexagon, label=<<font point-size="34">Service 7 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 30 [id=30,shape=cylinder, label=<<font point-size="34">Service 7 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 8" { margin=25 label=<<font point-size="24"><br />Service 8</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 32 [id=32,shape=hexagon, label=<<font point-size="34">Service 8 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } 29 -> 30 [id=31, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 13 -> 29 [id=49, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 29 -> 32 [id=51, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
digraph { compound=true graph [fontname="Arial", rankdir=TB, ranksep=1.0, nodesep=1.0] node [fontname="Arial", shape=box, margin="0.4,0.3"] edge [fontname="Arial"] label=<<br /><font point-size="34">Software System A - Containers</font>> subgraph cluster_4 { margin=25 label=<<font point-size="24"><br />Software System A</font><br /><font point-size="19">[Software System]</font>> labelloc=b color="#444444" fontcolor="#444444" fillcolor="#444444" subgraph "cluster_group_Service 7" { margin=25 label=<<font point-size="24"><br />Service 7</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 29 [id=29,shape=hexagon, label=<<font point-size="34">Service 7 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } subgraph "cluster_group_Service 8" { margin=25 label=<<font point-size="24"><br />Service 8</font>> labelloc=b color="#cccccc" fontcolor="#cccccc" fillcolor="#ffffff" style="dashed" 32 [id=32,shape=hexagon, label=<<font point-size="34">Service 8 API</font><br /><font point-size="19">[Container: Java and Spring Boot]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] 33 [id=33,shape=cylinder, label=<<font point-size="34">Service 8 Database<br />Schema</font><br /><font point-size="19">[Container: MySQL]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"] } } 32 -> 33 [id=34, label=<>, style="dashed", color="#707070", fontcolor="#707070"] 29 -> 32 [id=51, label=<>, style="dashed", color="#707070", fontcolor="#707070"] }
Ilograph definitions are available via the Structurizr CLI export command,
using the -format ilograph
parameter. A single Ilograph export contains the model and all views.
resources: - id: "1" name: "User" subtitle: "[Person]" backgroundColor: "#08427b" color: "#ffffff" - id: "2" name: "Software System B" subtitle: "[Software System]" backgroundColor: "#999999" color: "#ffffff" - id: "3" name: "Software System C" subtitle: "[Software System]" backgroundColor: "#999999" color: "#ffffff" - id: "4" name: "Software System A" subtitle: "[Software System]" backgroundColor: "#1168bd" color: "#ffffff" children: - id: "10" name: "Service 2 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "11" name: "Service 2 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "13" name: "Service 3 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "14" name: "Service 3 Database" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "16" name: "Service 4 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "17" name: "Service 4 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "19" name: "Service 5 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "22" name: "Service 5 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "24" name: "Service 6 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "27" name: "Service 6 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "29" name: "Service 7 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "30" name: "Service 7 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "32" name: "Service 8 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "33" name: "Service 8 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" - id: "5" name: "Web Server" subtitle: "[Container: Nginx]" description: "Serves HTML, CSS, JavaScript, etc" backgroundColor: "#438dd5" color: "#ffffff" - id: "6" name: "UI" subtitle: "[Container: JavaScript and React]" backgroundColor: "#438dd5" color: "#ffffff" - id: "7" name: "Service 1 API" subtitle: "[Container: Java and Spring Boot]" backgroundColor: "#438dd5" color: "#ffffff" - id: "8" name: "Service 1 Database Schema" subtitle: "[Container: MySQL]" backgroundColor: "#438dd5" color: "#ffffff" perspectives: - name: Static Structure relations: - from: "1" to: "4" label: "Requests UI from (using web browser)" color: "#707070" - from: "4" to: "2" color: "#707070" - from: "4" to: "3" color: "#707070" - from: "1" to: "5" label: "Requests UI from (using web browser)" color: "#707070" - from: "1" to: "6" label: "Uses" color: "#707070" - from: "10" to: "11" color: "#707070" - from: "10" to: "16" color: "#707070" - from: "10" to: "19" color: "#707070" - from: "13" to: "14" color: "#707070" - from: "13" to: "16" color: "#707070" - from: "13" to: "29" color: "#707070" - from: "16" to: "17" color: "#707070" - from: "16" to: "24" color: "#707070" - from: "19" to: "2" color: "#707070" - from: "19" to: "22" color: "#707070" - from: "24" to: "3" color: "#707070" - from: "24" to: "27" color: "#707070" - from: "29" to: "30" color: "#707070" - from: "29" to: "32" color: "#707070" - from: "32" to: "33" color: "#707070" - from: "5" to: "6" label: "Delivers" color: "#707070" - from: "6" to: "7" color: "#707070" - from: "6" to: "10" color: "#707070" - from: "6" to: "13" color: "#707070" - from: "6" to: "16" color: "#707070" - from: "6" to: "19" color: "#707070" - from: "7" to: "10" color: "#707070" - from: "7" to: "13" color: "#707070" - from: "7" to: "8" color: "#707070"