Container Diagram

Independently deployable or runnable things: a service, a database, a SPA. Not classes.

• Format.puml
• Length18 lines
• LibraryC4-PlantUML

The source

18 lines of PlantUML, and pulls in C4-PlantUML. Copy it, or open the template inside Gnomon and render it as it is.

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

title Container Diagram

Person(user, "User", "A user of the system")

System_Boundary(boundary, "System") {
  Container(web, "Web Application", "Vue.js", "Serves the frontend")
  Container(api, "API", "Node.js", "Handles business logic")
  ContainerDb(db, "Database", "PostgreSQL", "Stores data")
}

Rel(user, web, "Uses", "HTTPS")
Rel(web, api, "Calls", "JSON/HTTPS")
Rel(api, db, "Reads/Writes", "SQL")

@enduml

Others in C4 model diagrams

• Context DiagramThe one to draw first, and often the only one a stakeholder needs.
• Component DiagramInside one container. Draw this only when a container is big enough to need it.
• Dynamic DiagramFor a specific flow through the static structure: numbered steps, one scenario.
• Deployment DiagramMaps containers onto infrastructure. Where a container diagram cannot answer "where does this run?".