Mermaid Blockdiagramm-Spickzettel

Eine Wand aus Blöcken, von links nach rechts gelesen.

Jedes Bild auf dieser Seite wurde gezeichnet von

Mernyx, dem nativen Mermaid-Editor für macOS. Nicht von einem Browser mit Mermaid.js, sondern vom Renderer, den die App für ihr Canvas nutzt.

Blöcke und Pfeile

Ein Block ist eine Beschriftung in Anführungszeichen. Die Wörter zwischen zwei Blöcken beschriften den Pfeil, der sie verbindet.

block-beta
  a["A"] space:2 b["B"]
  a -- "checks" --> b

Zwei Blöcke, A und B, verbunden durch einen Pfeil mit der Beschriftung „checks“, mit zwei Leerzeichen Abstand dazwischen.

Spalten

Das Schlüsselwort columns legt fest, wie viele Blöcke in eine Zeile passen.

block-beta
  columns 3
  a["A"]
  b["B"]
  c["C"]

Drei Blöcke, A, B und C, in einer einzigen Zeile angeordnet.

Pfeilblöcke

Ein Pfeil ist auch ein Block. Sein Name trägt die Richtung, und die spitzen Klammern enthalten seine Beschriftung.

block-beta
  Frontend blockArrowId6<[" "]>(right) Backend
  space:2 down<[" "]>(down)
  Disk left<[" "]>(left) Database[("Database")]

Ein breiter Pfeil von „Frontend“ zu „Backend“, darunter ein nach unten zeigender Pfeil und ein nach links zeigender Pfeil, der „Disk“ mit einer Datenbankform verbindet.

Stilblöcke

classDef benennt einen Stil, und class wendet ihn auf die benannten Blöcke an.

block-beta
  columns 2
  Frontend["Frontend"] Backend["Backend"]
  classDef front fill:#696,stroke:#333;
  classDef back fill:#969,stroke:#333;
  class Frontend front
  class Backend back

Zwei Blöcke, „Frontend“ in Grün und „Backend“ in Grau, mit ihren Klassendefinitionen darüber.

Mermaid Blockdiagramm-Spickzettel

Blöcke und Pfeile

Spalten

Pfeilblöcke

Stilblöcke

In Mernyx zeichnen