Structurizr

PlantUML definitions are available via the Structurizr CLI export command, using the -format plantuml parameter.

@startuml
title Software System - Containers

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<4>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  roundCorner 20
}
skinparam person<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}
skinparam rectangle<<3>> {
  BackgroundColor #438dd5
  FontColor #ffffff
  BorderColor #2e6295
  roundCorner 20
}

person "==User\n<size:10>[Person]</size>" <<1>> as 1

package "Software System\n[Software System]" <<2>> {
  skinparam PackageBorderColor<<2>> #444444
  skinparam PackageFontColor<<2>> #444444

  rectangle "==Web Application\n<size:10>[Container]</size>" <<3>> as 3
  rectangle "==Database\n<size:10>[Container]</size>" <<4>> as 4
}

1 .[#707070,thickness=2].> 3 : "Uses"
3 .[#707070,thickness=2].> 4 : "Reads from and writes to"
@enduml

(this will send your diagram content to http://plantuml.com/plantuml)

@startuml
title Software System - System Context

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<2>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
  roundCorner 20
}
skinparam person<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}

person "==User\n<size:10>[Person]</size>" <<1>> as 1
rectangle "==Software System\n<size:10>[Software System]</size>" <<2>> as 2

1 .[#707070,thickness=2].> 2 : "Uses"
@enduml

(this will send your diagram content to http://plantuml.com/plantuml)

@startuml
title System Landscape

skinparam {
  shadowing false
  arrowFontSize 10
  defaultTextAlignment center
  wrapWidth 200
  maxMessageSize 100
  PackageBorderColor<<group>> #cccccc
  PackageFontColor<<group>> #cccccc
}
hide stereotype
top to bottom direction

skinparam rectangle<<2>> {
  BackgroundColor #1168bd
  FontColor #ffffff
  BorderColor #0b4884
  roundCorner 20
}
skinparam person<<1>> {
  BackgroundColor #08427b
  FontColor #ffffff
  BorderColor #052e56
}

person "==User\n<size:10>[Person]</size>" <<1>> as 1
rectangle "==Software System\n<size:10>[Software System]</size>" <<2>> as 2

1 .[#707070,thickness=2].> 2 : "Uses"
@enduml

(this will send your diagram content to http://plantuml.com/plantuml)

C4-PlantUML definitions are available via the Structurizr CLI export command, using the -format plantuml/c4plantuml parameter.

@startuml
title Software System - Containers

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
LAYOUT_WITH_LEGEND()

Person(1, "User", "")

System_Boundary("2_boundary", "Software System") {
  Container(3, "Web Application", "")
  Container(4, "Database", "")
}

Rel_D(1, 3, "Uses")
Rel_D(3, 4, "Reads from and writes to")
@enduml

(this will send your diagram content to http://plantuml.com/plantuml)

@startuml
title Software System - System Context

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()

Person(1, "User", "")
System(2, "Software System", "")

Rel_D(1, 2, "Uses")
@enduml

(this will send your diagram content to http://plantuml.com/plantuml)

@startuml
title System Landscape

!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4.puml
!includeurl https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml
LAYOUT_WITH_LEGEND()

Person(1, "User", "")
System(2, "Software System", "")

Rel_D(1, 2, "Uses")
@enduml

(this will send your diagram content to http://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

  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

  subgraph 2 [Software System]
    style 2 fill:#ffffff,stroke:#444444,color:#444444

    3("<div style='font-weight: bold'>Web Application</div><div style='font-size: 70%; margin-top: 0px'>[Container]</div>")
    style 3 fill:#438dd5,stroke:#2e6295,color:#ffffff
    4("<div style='font-weight: bold'>Database</div><div style='font-size: 70%; margin-top: 0px'>[Container]</div>")
    style 4 fill:#438dd5,stroke:#2e6295,color:#ffffff
  end

  1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->3
  3-. "<div>Reads from and writes to</div><div style='font-size: 70%'></div>" .->4

graph TB
  linkStyle default fill:#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</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>")
  style 2 fill:#1168bd,stroke:#0b4884,color:#ffffff

  1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->2

graph TB
  linkStyle default fill:#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</div><div style='font-size: 70%; margin-top: 0px'>[Software System]</div>")
  style 2 fill:#1168bd,stroke:#0b4884,color:#ffffff

  1-. "<div>Uses</div><div style='font-size: 70%'></div>" .->2

WebSequenceDiagram definitions are available via the Structurizr CLI export command, using the -format websequencediagrams parameter. Only dynamic views are supported.

Coming soon: DOT definitions will be 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 - 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"]

  subgraph cluster_2 {
    margin=25
    label=<<font point-size="24"><br />Software System</font><br /><font point-size="19">[Software System]</font>>
    labelloc=b
    color="#444444"
    fontcolor="#444444"
    fillcolor="#444444"

    3 [id=3,shape=rect, label=<<font point-size="34">Web Application</font><br /><font point-size="19">[Container]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
    4 [id=4,shape=rect, label=<<font point-size="34">Database</font><br /><font point-size="19">[Container]</font>>, style=filled, color="#2e6295", fillcolor="#438dd5", fontcolor="#ffffff"]
  }

  1 -> 3 [id=5, label=<<font point-size="24">Uses</font>>, style="dashed", color="#707070", fontcolor="#707070"]
  3 -> 4 [id=7, label=<<font point-size="24">Reads from and writes to</font>>, 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 - System Context</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</font><br /><font point-size="19">[Software System]</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]

  1 -> 2 [id=6, label=<<font point-size="24">Uses</font>>, 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">System Landscape</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</font><br /><font point-size="19">[Software System]</font>>, style=filled, color="#0b4884", fillcolor="#1168bd", fontcolor="#ffffff"]

  1 -> 2 [id=6, label=<<font point-size="24">Uses</font>>, 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"
    subtitle: "[Software System]"
    backgroundColor: "#1168bd"
    color: "#ffffff"

    children:
      - id: "3"
        name: "Web Application"
        subtitle: "[Container]"
        backgroundColor: "#438dd5"
        color: "#ffffff"

      - id: "4"
        name: "Database"
        subtitle: "[Container]"
        backgroundColor: "#438dd5"
        color: "#ffffff"

perspectives:
  - name: Static Structure
    relations:
      - from: "1"
        to: "2"
        label: "Uses"

      - from: "1"
        to: "3"
        label: "Uses"

      - from: "3"
        to: "4"
        label: "Reads from and writes to"

The Structurizr DSL (as mentioned on the ThoughtWorks Tech Radar - Techniques - Diagrams as code) allows you to create multiple diagrams based upon the C4 model, in multiple output formats, from a single DSL source file.