# Mermaid C4 Diagram Cheat Sheet

The architecture views, at three levels of zoom.

## The system context view

C4Context is the widest view: the people and the systems around it. Rel joins two of them, with the verb in the middle.

```mermaid
C4Context
  title System context for the banking app
  Person(customerA, "Banking customer", "A customer of the bank.")
  System(SystemAA, "Internet banking", "Allows customers to see accounts and pay bills.")
  Rel(customerA, SystemAA, "Uses", "HTTPS")
```

![A system context diagram with a person, Banking customer, and a system, Internet banking, joined by an arrow labelled Uses and HTTPS.](/diagrams/c4/context.svg)

## Opening a system up

C4Container is the next zoom in. A System_Boundary is the box the containers live in.

```mermaid
C4Container
  title Container diagram for the banking app
  Person(customerA, "Banking customer")
  System_Boundary(b1, "Internet banking") {
    System(SystemA, "Banking system", "Handles accounts and payments.")
    SystemDb(SystemD, "Database", "Stores accounts and payments.")
  }
  Rel(customerA, SystemA, "Uses", "HTTPS")
  Rel(SystemA, SystemD, "Reads and writes")
```

![A container diagram with a boundary called Internet banking holding two boxes, Banking system and Database, plus a customer outside it.](/diagrams/c4/container.svg)

## An enterprise boundary

An Enterprise_Boundary groups people and systems under one organisation.

```mermaid
C4Context
  title Enterprise boundary
  Enterprise_Boundary(b0, "Bank") {
    Person(customerA, "Customer")
    System(SystemAA, "Internet banking")
  }
  Rel(customerA, SystemAA, "Uses")
```

![An enterprise boundary called Bank holding a customer and an Internet banking system, joined by a Uses arrow.](/diagrams/c4/boundary.svg)

## Draw it in Mernyx.

Open a .mmd file, move a node on the canvas, and the source comes with it. Native on macOS, no browser involved.