Diagramme mit Mermaid

AnleitungAktualisiert am 21. Oktober 2026

Auf dieser Seite

In Wiki-Seiten entstehen Diagramme aus kurzem Text im Format Mermaid. Der Text steht direkt in der Seite. So lässt sich ein Diagramm leicht ändern und im Seitenverlauf vergleichen. Mermaid musst Du nicht lernen: Der visuelle Editor schreibt den Text für Dich. Mermaid gehört zu unseren Open Source Friends.

Was Leser sehen

Ein gezeichnetes Flussdiagramm auf der Seite Launch checklist: Content freeze, Final QA, Client OK?, Switch DNS, Go live — Der Ablauf am Launch-Tag in der Leseansicht

Leser sehen das gezeichnete Diagramm (Rahmen 1), auch auf geteilten Seiten. Jedes Diagramm bietet Bild kopieren und Bild herunterladen.

Diagramm einfügen

Bearbeite die Seite und wähle Einfügen › Diagramm (Mermaid). Oder tippe /diagram in eine leere Zeile.
Kanroo fügt ein kleines Flussdiagramm ein, dessen erste Beschriftung markiert ist. Tippe einfach los, um sie zu ersetzen.

Code bearbeiten

Ein Mermaid-Codeblock im Editor mit zwei nummerierten Rahmen: der Quelltext und der Umschalter Code und Visual — Der Quelltext des Flussdiagramms

Der Codeblock (Rahmen 1) enthält den Diagrammtext. Die Zeichnung darunter aktualisiert sich, sobald Du aufhörst zu tippen.
Mit Code | Visuell (Rahmen 2) wechselst Du zwischen dieser Ansicht und dem visuellen Editor.

Visuell bearbeiten

Der visuelle Diagramm-Editor mit zwei nummerierten Rahmen: Add node und Connect sowie der Umschalter Code und Visual — Der visuelle Editor desselben Flussdiagramms

Klicke auf Visuell (Rahmen 2). Der Quelltext bleibt über der Zeichenfläche sichtbar.
Mit Knoten hinzufügen (Rahmen 1) legst Du einen Knoten an. Seine Beschriftung ist sofort zum Bearbeiten geöffnet. Bei anderen Diagrammtypen heißt die Schaltfläche Teilnehmer hinzufügen, Klasse hinzufügen, Zustand hinzufügen oder Entität hinzufügen.
Schalte Verbinden ein und ziehe dann von einem Knoten zu einem anderen, um sie zu verbinden. Hältst Du beim Ziehen Alt (Option auf dem Mac) gedrückt, passiert dasselbe.
Ctrl/⌘+Z macht auch Änderungen auf der Zeichenfläche rückgängig.
Speichere die Seite wie gewohnt mit Speichern.

Visuelles Bearbeiten funktioniert für Flussdiagramme, Sequenz-, Klassen-, Zustands- und ER-Diagramme. Andere Mermaid-Typen, etwa Mindmaps, bearbeitest Du als Code.

Tipps

Kanroo merkt sich in diesem Browser, ob Du Code oder Visuell gewählt hast.
Halte Diagramme klein. Ein Diagramm passt sich der Seitenbreite an, ein langer Ablauf bekommt also kleine Beschriftungen. Teile ihn besser in zwei Diagramme auf.
Enthält der Text einen Fehler, zeigt die Seite den Code mit einem kurzen Hinweis. Die Seite lässt sich trotzdem speichern.