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

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

```mermaid
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.](/diagrams/flowchart/direction.svg)

### Pfeilarten

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

```mermaid
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.](/diagrams/flowchart/edges.svg)

### Knotenformen

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

```mermaid
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.](/diagrams/flowchart/shapes.svg)

### Einen Knoten stylen

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

```mermaid
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.](/diagrams/flowchart/styling.svg)

## Die Diagrammtypen

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

- [Flowchart](/de/cheat-sheet/flowchart/index.md): Boxen, Pfeile und Verzweigungen — das Diagramm, das die meisten mit Mermaid meinen.
- [Sequence diagram](/de/cheat-sheet/sequence/index.md): Nachrichten zwischen Beteiligten, der Reihe nach, über die Zeit.
- [Class diagram](/de/cheat-sheet/class/index.md): Typen, ihre Mitglieder und wie sie zueinander stehen.
- [State diagram](/de/cheat-sheet/state/index.md): Zustände, die Übergänge dazwischen und die Verzweigungen in der Mitte.
- [ER diagram](/de/cheat-sheet/er/index.md): Entitäten, ihre Spalten und die Kardinalitäten dazwischen.
- [Mindmap](/de/cheat-sheet/mindmap/index.md): Eine Textgliederung, die zum Baum wird, ganz ohne geschriebene Pfeile.
- [Architecture diagram](/de/cheat-sheet/architecture/index.md): Services, die Gruppen, in denen sie leben, und die Kanten dazwischen.
- [Requirement diagram](/de/cheat-sheet/requirement/index.md): Anforderungen, ihre Arten und das, was sie erfüllt.
- [Block diagram](/de/cheat-sheet/block/index.md): Eine Wand aus Blöcken, von links nach rechts gelesen.
- [Swimlane diagram](/de/cheat-sheet/swimlane/index.md): Ein Ablauf, aufgeteilt in Spuren, eine je Verantwortlichem.
- [Agent flow diagram](/de/cheat-sheet/agentflow/index.md): Die Schritte eines Agenten und die Art jedes Schritts.
- [Use case diagram](/de/cheat-sheet/usecase/index.md): Akteure, Anwendungsfälle und das System, das sie besitzt.
- [Pie chart](/de/cheat-sheet/pie/index.md): Eine beschriftete Liste von Werten, als Sektoren gezeichnet.
- [Gantt chart](/de/cheat-sheet/gantt/index.md): Aufgaben, Abschnitte und Daten, entlang einer Zeitachse gelegt.
- [Quadrant chart](/de/cheat-sheet/quadrant/index.md): Zwei Achsen, vier Quadranten und die Punkte darauf.
- [Radar chart](/de/cheat-sheet/radar/index.md): Eine Achse je Messwert, eine Kurve je verglichener Sache.
- [Treemap](/de/cheat-sheet/treemap/index.md): Verschachtelte Rechtecke, deren Fläche der Wert ist.
- [Kanban diagram](/de/cheat-sheet/kanban/index.md): Spalten von Karten, eine Spalte je Station der Arbeit.
- [Packet diagram](/de/cheat-sheet/packet/index.md): Die Bits eines Netzwerkpakets, Feld für Feld.
- [Info diagram](/de/cheat-sheet/info/index.md): Das Versionsbanner von Mermaid — Mernyx erkennt es, zeichnet es aber noch nicht.
- [Timeline](/de/cheat-sheet/timeline/index.md): Zeiträume an einer Seite, Ereignisse daneben.
- [Sankey diagram](/de/cheat-sheet/sankey/index.md): Ein Fluss, in drei Feldern pro Zeile geschrieben.
- [User journey](/de/cheat-sheet/journey/index.md): Ein Weg mit einer Punktzahl an jedem Schritt.
- [Venn diagram](/de/cheat-sheet/venn/index.md): Überlappende Mengen und die Bereiche, die sie teilen.
- [C4 diagram](/de/cheat-sheet/c4/index.md): Die Architektursichten, auf drei Zoomstufen.
- [Cynefin diagram](/de/cheat-sheet/cynefin/index.md): Fünf Domänen, jede mit ihrer eigenen Art zu entscheiden.
- [Git graph](/de/cheat-sheet/gitgraph/index.md): Eine Branch-Historie, gezeichnet.
- [XY chart](/de/cheat-sheet/xychart/index.md): Ein Liniendiagramm oder ein Balkendiagramm auf zwei Achsen.
- [Wardley map](/de/cheat-sheet/wardley/index.md): Wo eine Komponente bei Sichtbarkeit und Entwicklung steht.
- [Railroad diagram](/de/cheat-sheet/railroad/index.md): Eine Grammatikregel, gezeichnet.
- [ZenUML diagram](/de/cheat-sheet/zenuml/index.md): Ein Sequenzdiagramm, für einen Methodenaufruf geschrieben.
- [Event modeling diagram](/de/cheat-sheet/eventmodeling/index.md): Wie sich die Information über die Zeit verändert hat.
- [Ishikawa diagram](/de/cheat-sheet/ishikawa/index.md): Ein Problem und die Ursachen darunter.
- [Tree view](/de/cheat-sheet/treeview/index.md): Ein Verzeichnislisting, gezeichnet.

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 ihr 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 dem Canvas. Der Quellcode kommt mit.