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

Render this offline

This template ships in Gnomon and renders on your machine, with no account and nothing sent to a server. The browser editor is free and needs no install.

Get Gnomon Open the browser editor

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?".