Mermaid-Spickzettel

Der Kern der Mermaid-Sprache, eine Regel nach der anderen — der Quellcode neben dem Diagramm, das er erzeugt. alle 34 Diagrammtypen, die Syntax, die wirklich benutzt wird.

Jedes Bild auf dieser Webseite wurde gezeichnet vonMernyx, 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 vier Dinge, die die meisten Diagramme brauchen

Richtung, Pfeile, Knotenformen und Stilregeln — hier als Flussdiagramm-Syntax gezeigt. Was auch immer du zeichnest: Diese vier kommen zuerst, und in den meisten Diagrammtypen schreibt man sie gleich.

Richtung

Die erste Zeile bestimmt den Fluss: TD und TB sind dasselbe, LR und RL laufen seitlich.

flowchart LR
  A[Start] --> B[Middle] --> C[End]

Ein Flussdiagramm von links nach rechts mit drei Boxen namens „Start“, „Middle“ und „End“, verbunden durch Pfeile.

Pfeilarten

Vier Wege, zwei Knoten zu verbinden: durchgezogen, gepunktet, offen und dick.

flowchart LR
  A[Solid] --> B[Target]
  A -.-> C[Dotted]
  A --- D[Open]
  A ==> E[Thick]

Ein Knoten links, verbunden mit vier Knoten rechts durch einen durchgezogenen Pfeil, einen gepunkteten Pfeil, eine offene Linie und einen dicken Pfeil.

Knotenformen

Die Klammern, die du tippst, sind die Form, die du bekommst. Das sind die fünf, die Mernyx als gewöhnliche Boxen zeichnet.

flowchart LR
  A[Rectangle] --> B(Rounded)
  B --> C([Stadium])
  C --> D[[Subroutine]]
  D --> E[(Database)]

Ein Flussdiagramm aus fünf verbundenen Knoten, jeder in einer anderen Form: ein Rechteck, eine abgerundete Box, ein Stadium, eine Unterroutine und eine Datenbankwalze.

Einen Knoten stylen

style ändert einen Knoten; classDef benennt einen Stil, den du wiederverwenden kannst.

flowchart LR
  A[Normal] --> B[Highlighted]
  style B fill:#ee421d,color:#ffffff,stroke:#b32c0c
  classDef quiet fill:#f0f0f3,stroke:#d4d4d8
  class A quiet

Zwei Boxen, verbunden durch einen Pfeil. Die rechte Box ist korallfarben gefüllt, die linke hellgrau.

Die Diagrammtypen

Alle Diagrammtypen haben ihre eigene Seite, ihre eigene Syntax und ihre eigenen Regeln.

Mernyx rendert insgesamt 34 Diagrammtypen. Dieser Spickzettel deckt alle ab.

Fragen

Ist das die Mermaid-Dokumentation?

Nein. Die offiziellen Mermaid-Dokumente sind exhaustiv — die Seite zum Flussdiagramm allein umfasst hunderte Formen. Das hier ist ein verdichteter Spickzettel der Kernsyntax, also der Teil, den du beim Schreiben eines Diagramms nachschlägst. Wo die offiziellen Dokumente in die Tiefe gehen, liefert diese Seite direkt die Regel.

Warum sehen die Bilder anders aus als auf mermaid.live?

Weil sie nicht von Mermaid.js gezeichnet werden. Jedes Diagramm hier rendert die eigene Engine von Mernyx — derselbe native Renderer, den die App für ihre Canvas nutzt. Farben, Abstände und Typografie bestimmt Mernyx, du siehst also genau das, was die App erzeugt.

Kann ich diese Schnipsel in jedes Mermaid-Werkzeug einfügen?

Ja. Der Quellcode unter jeder Überschrift ist reines Mermaid und funktioniert überall. Das Bild daneben ist das, was Mernyx aus diesem Quellcode rendert — eine Illustration, kein Sonderformat.

Welche Diagrammtypen sind hier abgedeckt?

Dieser Spickzettel deckt alle 34 Diagrammtypen ab, die Mernyx rendert — eine Seite pro Diagrammtyp, verlinkt aus der Liste oben.

Unterstützt Mernyx jede Mermaid-Funktion?

Noch nicht, und die Seite täuscht auch nicht darüber hinweg. Nach 1.0 wächst die Abdeckung weiter, und die Funktionsmatrix listet, was jede der 34 Diagrammtypen kann — was ein Diagrammtyp nicht kann, bietet die App gar nicht erst an, statt still zu scheitern.

In Mernyx öffnen

Nimm ein Snippet von dieser Seite, füge es in Mernyx ein und verschiebe einen Knoten auf der Canvas. Der Quellcode kommt mit.

Mernyx Pro kaufen — $19 Kostenlos laden