Mermaid C4-Diagramm-Spickzettel

Die Architektursichten, auf drei Zoomstufen.

Jedes Bild auf dieser Seite wurde gezeichnet von

Mernyx, dem nativen Mermaid-Editor für macOS. Nicht von einem Browser mit Mermaid.js — demselben Renderer, den die App für ihre Leinwand nutzt.

Die Systemkontext-Sicht

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

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“.

Ein System aufklappen

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

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.

Eine Unternehmensgrenze

Eine Enterprise_Boundary gruppiert Menschen und Systeme unter einer Organisation.

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.

Mermaid C4-Diagramm-Spickzettel

Die Systemkontext-Sicht

Ein System aufklappen

Eine Unternehmensgrenze

In Mernyx zeichnen