Style guide Visual style PlantUML diagrams C4 diagrams

C4 diagrams

The C4 Models offer multiple diagram types.

Figure 1. C4 Diagrams

Examples of the first three levels are shown below.

Elements C4

Level 1: System context

Figure 2. Core elements of a C4 system context diagram

PlantUML source

@startuml
!include <C4/C4_Context>

LAYOUT_WITH_LEGEND()

Person(person1, "Person", "Optional Description")
Person(group1, "Group", "Optional Description", $sprite="users")

Boundary(boundary1, "Boundary", "Boundary type") {
  System(system1, "System", "Optional Description")
  SystemQueue(squeue, "SystemQueue", "Optional Description")
  SystemDb(sdb, "SystemDb", "Optional Description")

  Rel_R(system1, sdb, "Rel_R", "Optional Technology")
  BiRel_L(system1, squeue, "BiRel_L", "Optional")
}

Rel(person1, system1, "Rel", "Optional Technology")

Boundary(boundary2, "Boundary", "Boundary type") {
  System_Ext(system2, "System_Ext", "Optional Description")
  SystemQueue_Ext(squeue2, "SystemQueue_Ext", "Optional Description")
  SystemDb_Ext(sdb2, "SystemDb_Ext", "Optional Description")

  Rel_R(system2, sdb2, "Rel_R", "Optional Technology")
  BiRel_L(system2, squeue2, "BiRel_L", "Optional")
}

Rel(system1, system2, "Rel")

@enduml

Level 2: Container

Figure 3. Additional elements of a C4 container model diagram

PlantUML source

@startuml
!include <C4/C4_Container>

LAYOUT_WITH_LEGEND()

System_Boundary(boundary1, "System_Boundary", "Boundary type") {
  Container(container1, "Container", "Technology", "Optional Description")
  ContainerQueue(cqueue, "ContainerQueue", "Technology")
  ContainerDb(cdb, "ContainerDb", "Technology", "Optional Description")

  Rel_R(container1, cdb, "Rel_R", "Optional Technology")
  BiRel_L(container1, cqueue, "BiRel", "Optional")
}

System_Boundary(boundary2, "System_Boundary", "Boundary type") {
  Container_Ext(container2, "Container_Ext", "Technology", "Optional Description")
  ContainerQueue_Ext(cqueue2, "ContainerQueue_Ext", "Technology")
  ContainerDb_Ext(cdb2, "ContainerDb_Ext", "Technology", "Optional Description")

  Rel_R(container2, cdb2, "Rel_R", "Optional Technology")
  BiRel_L(container2, cqueue2, "BiRel", "Optional")
}

Rel(container1, container2, "Rel")
@enduml

Level 3: Component

Figure 4. Additional elements of a C4 component model diagram

PlantUML source

@startuml
!include <C4/C4_Component>

LAYOUT_WITH_LEGEND()

Container_Boundary(boundary1, "Container_Boundary", "Boundary type") {
  Component(component1, "Component", "Technology", "Optional Description")
  ComponentQueue(cqueue, "ComponentQueue", "Technology")
  ComponentDb(cdb, "ComponentDb", "Technology", "Optional Description")

  Rel_R(component1, cdb, "Rel_R", "Optional Technology")
  BiRel_L(component1, cqueue, "BiRel", "Optional")
}

Container_Boundary(boundary2, "Boundary", "Boundary type") {
  Component_Ext(component2, "Component_Ext", "Technology", "Optional Description")
  ComponentQueue_Ext(cqueue2, "ComponentQueue_Ext", "Technology")
  ComponentDb_Ext(cdb2, "ComponentDb_Ext", "Technology", "Optional Description")

  Rel_R(component2, cdb2, "Rel_R", "Optional Technology")
  BiRel_L(component2, cqueue2, "BiRel", "Optional")
}

Rel(component1, component2, "Rel")
@enduml