← All diagram types

Mermaid C4 diagram syntax: context, containers and relationships with examples

Mermaid C4Context and C4Container syntax with rendered examples: people, systems, containers, boundaries and labelled relationships.

C4 diagrams show software architecture at a chosen zoom level: who uses the system, what it talks to, and — one level down — the containers inside it. Mermaid draws them with the C4 plugin, whose verbs (Person, System, Container, Rel) name the boxes directly.

Everything on this page is rendered by makesPDF's own Mermaid renderer, so a ```mermaid block produces exactly this in the PDF.

Context: people and systems

C4Context is the widest view: your system in the middle, the people who use it and the systems it depends on around it. Each declaration is Kind(alias, "Label", "Description"):

mermaid
C4Context
  title Bookstore — system context
  Person(customer, "Customer", "Browses and buys books.")
  System(store, "Online Bookstore", "Catalogue, orders and delivery.")
  System_Ext(payments, "Payment Gateway", "Processes card payments.")
  Rel(customer, store, "Browses and buys", "HTTPS")
  Rel(store, payments, "Charges cards", "HTTPS")
Render this to PDF →How diagram blocks work

The alias is the id used in Rel; the second argument is the bold name and the third a sentence of detail. _Ext variants are drawn in the external (grey) style, and SystemDb / SystemQueue mark a database or a queue.

Containers

C4Container zooms into one system and shows what it is built from — applications, services, stores — each with a technology in the third argument:

mermaid
C4Container
  title Bookstore — containers
  Person(customer, "Customer")
  Container(web, "Web app", "React", "Catalogue and checkout UI.")
  Container(api, "API", "Node.js", "Orders, pricing and stock.")
  ContainerDb(db, "Database", "PostgreSQL", "Orders and customers.")
  Rel(customer, web, "Uses", "HTTPS")
  Rel(web, api, "Calls", "JSON/HTTPS")
  Rel(api, db, "Reads and writes", "SQL")
Render this to PDF →How diagram blocks work

Container takes four arguments (alias, label, technology, description); ContainerDb and ContainerQueue are the storage variants. The technology is drawn in square brackets under the name.

Boundaries

A _Boundary block draws a dashed container around the declarations inside it, which is how ownership and deployment units are shown. Boundaries nest:

mermaid
C4Container
  title Bookstore — deployment boundaries
  Enterprise_Boundary(acme, "Acme Corp") {
    System_Boundary(store, "Online Bookstore") {
      Container(web, "Web app", "React")
      Container(api, "API", "Node.js")
    }
    Person(staff, "Staff", "Manages catalogue and orders.")
  }
  System_Ext(cdn, "CDN", "Serves static assets.")
  Rel(staff, web, "Manages stock")
  Rel(web, cdn, "Loads assets", "HTTPS")
Render this to PDF →How diagram blocks work

The available boundaries are Enterprise_Boundary, System_Boundary, Container_Boundary and the generic Boundary(alias, "Label", "Type").

Relationships

Rel(from, to, "Label", "Technology") draws a labelled arrow between any two declared elements. Mermaid's direction hints — Rel_Up/Rel_U, Rel_Down/Rel_D, Rel_Left/Rel_L and Rel_Right/Rel_R — are accepted and draw the same arrow as Rel, and BiRel draws arrowheads at both ends. Rel_Back is also accepted and draws the same arrow as Rel. It is a relationship type of its own, not a suffix that combines with a direction hint, so there is no Rel_Up_Back form:

mermaid
C4Context
  title Bookstore — integrations
  Person(customer, "Customer")
  System(store, "Online Bookstore")
  System_Ext(email, "E-mail System")
  System_Ext(search, "Search Service")
  Rel(customer, store, "Orders books", "HTTPS")
  BiRel(store, search, "Indexes and queries")
  Rel(store, email, "Sends receipts", "SMTP")
Render this to PDF →How diagram blocks work

A relationship's technology argument is drawn after the label, so "Orders books", "HTTPS" reads as Orders books [HTTPS].

Not supported in makesPDF yet: UpdateElementStyle, UpdateRelStyle and UpdateLayoutConfig are accepted but not applied — colours and spacing come from the renderer. Sprite/icon arguments are ignored. Direction hints (Rel_Up, Rel_D and the rest) and Rel_Back do not change the drawing: the diagram is laid out top to bottom and each relationship is drawn as a plain Rel from its first element to its second. In C4Dynamic, per-relationship sequence numbers degrade to plain relationships. A relationship builder the parser does not recognise, such as Rel_Up_Back, is dropped without a warning: the edge and its label simply do not appear.