Structurizr

Upload

workspace { !identifiers hierarchical model { archetypes { externalSoftwareSystem = softwareSystem { tag "External" } microservice = group api = container { technology "Java and Spring Boot" tag "API" } datastore = container { technology "MySQL" tag "Datastore" } } user = person "User" softwareSystemB = externalSoftwareSystem "Software System B" softwareSystemC = externalSoftwareSystem "Software System C" softwareSystemA = softwareSystem "Software System A" { nginx = container "Web Server" { description "Serves HTML, CSS, JavaScript, etc" technology "Nginx" tag "Web Server" } spa = container "UI" { technology "JavaScript and React" tag "Single Page Application" } service1 = microservice "Service 1" { service1Api = api "Service 1 API" datastore "Service 1 Database Schema" { service1Api -> this } } service2 = microservice "Service 2" { service2Api = api "Service 2 API" datastore "Service 2 Database Schema" { service2Api -> this } } service3 = microservice "Service 3" { service3Api = api "Service 3 API" datastore "Service 3 Database" { service3Api -> this } } service4 = microservice "Service 4" { service4Api = api "Service 4 API" datastore "Service 4 Database Schema" { service4Api -> this } } service5 = microservice "Service 5" { service5Api = api "Service 5 API" { -> softwareSystemB } datastore "Service 5 Database Schema" { service5Api -> this } } service6 = microservice "Service 6" { service6Api = api "Service 6 API" { -> softwareSystemC } datastore "Service 6 Database Schema" { service6Api -> this } } service7 = microservice "Service 7" { service7Api = api "Service 7 API" datastore "Service 7 Database Schema" { service7Api -> this } } service8 = microservice "Service 8" { service8Api = api "Service 8 API" datastore "Service 8 Database Schema" { service8Api -> this } } user -> nginx "Requests UI from (using web browser)" nginx -> spa "Delivers" user -> spa "Uses" spa -> service1Api spa -> service2Api spa -> service3Api spa -> service4Api spa -> service5Api service1Api -> service2Api service1Api -> service3Api service2Api -> service4Api service2Api -> service5Api service3Api -> service4Api service3Api -> service7Api service4Api -> service6Api service7Api -> service8Api } } views { container softwareSystemA "Containers_All" { include * autolayout } container softwareSystemA "Containers_Service1" { include ->softwareSystemA.service1-> autolayout } container softwareSystemA "Containers_Service2" { include ->softwareSystemA.service2-> autolayout } container softwareSystemA "Containers_Service3" { include ->softwareSystemA.service3-> autolayout } container softwareSystemA "Containers_Service4" { include ->softwareSystemA.service4-> autolayout } container softwareSystemA "Containers_Service5" { include ->softwareSystemA.service5-> autolayout } container softwareSystemA "Containers_Service6" { include ->softwareSystemA.service6-> autolayout } container softwareSystemA "Containers_Service7" { include ->softwareSystemA.service7-> autolayout } container softwareSystemA "Containers_Service8" { include ->softwareSystemA.service8-> autolayout } styles { element "Person" { shape Person background #08427b colour #ffffff } element "Software System" { background #1168bd color #ffffff } element "External" { background #999999 color #ffffff } element "Container" { background #438dd5 colour #ffffff } element "Web Server" { shape folder } element "Single Page Application" { shape webbrowser } element "API" { shape hexagon } element "Datastore" { shape cylinder } } } }

Structurizr DSL v4.1.0 - some features (e.g. !docs, !script, etc) are unavailable via this demo page; see DSL for details.

Examples: Big Bank plc | Microservices | Amazon Web Services

Structurizr UI

Graph

PlantUML

C4-PlantUML

Mermaid

DOT

WebSequenceDiagrams

Ilograph

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 ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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
title Software System A - Containers

top to bottom direction
skinparam ranksep 60
skinparam nodesep 30

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)

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)

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

    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)

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"