Skip to content

Diagram: C4 Container

C4 Container diagrams document software systems and their containers (web apps, databases, APIs) with descriptive relationships.

Minimal example

import engrapha_notes as en
import engrapha_diagrams as ed

c4 = ed.C4ContainerDiagram(
    width=420, height=220,
    caption="Fig 10: C4 Container View",
)

c4.system("user", "Customer")
c4.container("spa",  "SPA (React)", "Provides UI")
c4.container("api",  "API (Go)",    "Business logic")
c4.container("db",   "Postgres",    "Order data")

c4.relate("user", "spa", "Uses")
c4.relate("spa", "api", "Makes API calls")
c4.relate("api", "db", "Reads / Writes")

en.add(c4.as_flowable())

Systems render in darker surface tones; containers render with lighter backgrounds.

Methods

Method Purpose
system(name, desc) Software system context node
container(name, tech, desc) Container with technology label
relate(from, to, label) Relationship arc with optional label

Auto layout

Nodes are arranged on a grid automatically when added without explicit x, y coordinates. Only specify coordinates if the auto-layout is unsatisfactory.

Next