C4

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

Node types. Person, SoftwareSystem, Container, Component,

CodeElement and Database (drawn as a cylinder), each with an External… variant that renders greyed. Note that a C4 "container" is a separately deployable unit — an app, service or datastore — not the box drawn around things; that is a boundary.

Relationships are directed edges labelled with how the elements collaborate ("Uses", "Reads from", "Makes API calls to"). Two carry canonical ids — uses (synchronous) and sends_data_to (asynchronous) — and the notation registers the common element → element pairs so realistic diagrams connect cleanly. A pair it does not register is not an error: the edge becomes an unknown type, rendered bold red and reported as a quality warning, so the document still opens.

Boundaries are typed groups: SystemBoundary, ContainerBoundary and

EnterpriseBoundary. Each draws a dashed boundary when unfolded and the corresponding element card when folded — so folding a system boundary is exactly zooming out from the Container view to the System Context view.

vgraph banking: C4 "Internet Banking System — Container view" {
    node customer: Person "Personal Banking Customer";
    node mainframe: ExternalSoftwareSystem "Mainframe Banking System";

    group ibs: SystemBoundary "Internet Banking System" {
        node web: Container "Web Application";
        node api: Container "API Application";
        node db: Database "Database";
    };

    edge customer -> web "Uses";
    edge web -> api "Makes API calls to";
    edge api -> db "Reads from and writes to";
    edge api -> mainframe "Makes API calls to";
}

A full worked example is in docs/examples/c4-internet-banking.vgl, and the editor's C4 — Internet Banking System carries the same graph: the single-page and mobile apps the web application delivers, plus an external e-mail system.