C4

Software-architecture diagrams in Simon Brown's C4 model: people, software systems, containers, components and code, across four levels of zoom.

Node types. Person, SoftwareSystem, Container, Database (a container drawn as a cylinder), Component and CodeElement. A C4 "container" is a separately deployable unit — an app, service or datastore — not the box drawn around things.

Zoom is detailing. A Software System is detailed by Containers and Databases, a Container by Components, a Component by Code Elements. Write the element as a group of its node type, group ibs: SoftwareSystem "…" { … }: folded it is the element's card, unfolded the dashed boundary around its details. Being external is not a type; colour such a system per node with

backgroundColor.

Relationships are labelled with how the elements collaborate. There is one type per level — interacts_with (Person → Person), uses (Person → Software System), delivers_to (Software System → Person), depends_on (Software System → Software System), communicates_with (Container → Container),

reads_and_writes (Container → Database), calls (Component → Component) and

references (Code Element → Code Element) — and each also holds with one end replaced by a detail at any depth, so a Person may use a Container and a Component may depend on a Software System. No pair is ambiguous, so a file never names a C4 edge type.

Edges join elements, never boundaries: a detailed element's relationships start at its details, and folding it gathers them onto its card (×3 when three meet). A label written for the system as a whole has no place to go, and neither do C4's descriptions and technologies yet.

Organisations are plain groups, group bank: Organisation "Big Bank" { … }.

vgraph banking: C4 "Internet Banking System" {
    node customer: Person "Personal Banking Customer";
    node cbs: SoftwareSystem "Core Banking System" [backgroundColor: "#e8710a"];

    group ibs: SoftwareSystem "Internet Banking System" {
        isfolded: false;
        node ui: Container "UI";
        node backend: Container "Backend";
        node database: Database "Database";
    };

    edge customer -> ui "Views account balances and makes payments using";
    edge ui -> backend "Makes API requests to";
    edge backend -> database "Reads from and writes to";
    edge backend -> cbs "Makes API requests to";
}

vview context "System Context View: Internet Banking System" {
    folded node type: SoftwareSystem;
}

The editor's C4 — Internet Banking System is c4model.com's current example, modelled down to the code, with one view per diagram there: System Landscape, System Context, Container, Component (Backend) and Code (Core Banking System Adapter). The same file is docs/examples/c4-internet-banking-views.vgl; docs/examples/c4-internet-banking.vgl is its Container View on its own.