# Mermaid C4-Diagramm-Spickzettel

Die Architektursichten, auf drei Zoomstufen.

## Die Systemkontext-Sicht

C4Context ist die weiteste Sicht: die Menschen und die Systeme drumherum. Rel verbindet zwei davon, das Verb steht in der Mitte.

```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")
```

![Ein Systemkontext-Diagramm mit einer Person, „Banking customer“, und einem System, „Internet banking“, verbunden durch einen Pfeil mit der Beschriftung „Uses“ und „HTTPS“.](/diagrams/c4/context.svg)

## Ein System aufklappen

C4Container ist die nächste Stufe hinein. Eine System_Boundary ist die Box, in der die Container liegen.

```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")
```

![Ein Container-Diagramm mit einer Grenze namens „Internet banking“, die zwei Boxen enthält, „Banking system“ und „Database“, dazu ein Kunde außerhalb.](/diagrams/c4/container.svg)

## Eine Unternehmensgrenze

Eine Enterprise_Boundary gruppiert Menschen und Systeme unter einer Organisation.

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

![Eine Unternehmensgrenze namens „Bank“ mit einem Kunden und einem Internet-Banking-System darin, verbunden durch einen „Uses“-Pfeil.](/diagrams/c4/boundary.svg)

## In Mernyx zeichnen

Öffne eine .mmd-Datei, verschiebe einen Knoten auf dem Canvas, und der Quellcode kommt mit. Nativ auf macOS, ohne Browser dazwischen.