C4 diagram

C4 diagrams describe software architecture as people, systems, containers, and components, zoomed in one level at a time. zombie-mermaid renders the Context, Container, Component, and Dynamic variants with boundaries and labelled relationships.

A system in context, with the people and systems around it.

C4Context
  title System Context for Internet Banking
  Person(customer, "Personal Banking Customer", "A customer of the bank")
  Enterprise_Boundary(b0, "Bank") {
    System(banking, "Internet Banking System", "Lets customers view accounts")
    SystemDb(ledger, "Ledger", "Stores transactions")
  }
  System_Ext(mail, "E-mail System", "Sends e-mails")
  Rel(customer, banking, "Uses", "HTTPS")
  Rel(banking, ledger, "Reads from and writes to")
  Rel_Back(customer, mail, "Sends e-mails to")
  Rel(banking, mail, "Sends e-mail using")

Where C4 diagrams come from, and how the syntax works.

The C4 model describes a software system at four zoom levels: context, containers, components, and code. Mermaid’s syntax declares each element with a call such as `Person`, `System`, `Container`, or `Component` (with `_Ext` variants for things outside your boundary), groups them in `Boundary` blocks, and joins them with `Rel` calls that carry a label and an optional technology.

Every C4 diagram example, on its own page.

Explore the other diagram types.