C4 diagrams

The C4 Models offer multiple diagram types.

C4 Diagrams
Figure 1. C4 Diagrams

Examples of the first three levels are shown below.

Elements C4

Level 1: System context

Core elements of a C4 system context diagram
Figure 2. Core elements of a C4 system context diagram
PlantUML source
@startuml
!include <C4/C4_Context>
!include <tupadr3/font-awesome/users>

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

Additional elements of a C4 container model diagram
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

Additional elements of a C4 component model diagram
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
Twitter LinkedIn Github Gitlab Meetup RSS Miro Trello Zotero Hypothesis