Diagramme in Markdown erstellen, mit Mermaid

Was, wenn du ein Flussdiagramm zeichnen könntest, indem du es beschreibst, statt Kästchen mit der Maus zu schieben? Genau das macht Mermaid. Es ist eine Syntax für Diagramme, die reinen Text in deinem Markdown in Flussdiagramme, Sequenzdiagramme, Gantt-Pläne und mehr verwandelt — automatisch gezeichnet. Diese Seite zeigt, wie das geht.

Für den Rest der Sprache gibt es die vollständige Markdown-Anleitung.

Wie Mermaid in Markdown funktioniert

Du schreibst ein Mermaid-Diagramm in einen eingezäunten Codeblock mit der Sprache mermaid. Der Editor erkennt den Namen und zeichnet den Inhalt, statt ihn als Code anzuzeigen:

```mermaid
flowchart LR
    A[Idee] --> B{In Markdown schreiben}
    B --> C[Vorschau]
    C --> D[Export als PDF]
```

flowchart LR
    A[Idee] --> B{In Markdown schreiben}
    B --> C[Vorschau]
    C --> D[Export als PDF]

Diese kurze Beschreibung wird zu einem Flussdiagramm von links nach rechts, das vier beschriftete Schritte verbindet. Änderst du den Text, ändert sich das Diagramm — ohne Zeichenwerkzeug, ohne Ziehen.

Welche Diagramme möglich sind

Mermaid beherrscht viele Diagrammtypen, alle nach demselben Prinzip aus reinem Text. Die im Schreiballtag nützlichsten:

• Flussdiagramme — Abläufe und Entscheidungsbäume (flowchart oder graph).
• Sequenzdiagramme — Interaktionen über die Zeit, ideal für APIs und Arbeitsabläufe.
• Gantt-Diagramme — einfache Projektzeitpläne.
• Klassen- und ER-Diagramme — für Software- und Datenmodelle.
• Tortendiagramme und Mindmaps — schnelle visuelle Zusammenfassungen.

Beispiel: Flussdiagramm

flowchart TD
    Start --> Frage{Ist es formatiert?}
    Frage -->|Ja| Export[Als PDF exportieren]
    Frage -->|Nein| Weiter[Weiterschreiben]
    Weiter --> Frage

Knoten in eckigen Klammern [ ] werden zu Kästchen, geschweifte { } ergeben eine Entscheidungsraute, --> zeichnet einen Pfeil, und |Text| beschriftet ihn. TD heißt von oben nach unten, LR von links nach rechts.

Beispiel: Sequenzdiagramm

sequenceDiagram
    Autor->>Editor: Markdown tippen
    Editor->>Vorschau: Live rendern
    Vorschau-->>Autor: Ergebnis zeigen

Hier ist ->> eine Nachricht und -->> eine Antwort — eine gut lesbare Art, ein Gespräch zwischen Beteiligten zu beschreiben.

Warum Diagramme als Text so praktisch sind

• Versionsfreundlich. Ein Diagramm ist nur Text. Es liegt im Dokument, synchronisiert sofort und funktioniert mit der Versionsgeschichte — du siehst genau, was sich geändert hat.
• Schnell zu ändern. Eine Beschriftung anpassen oder einen Schritt einfügen heißt tippen, nicht Formen neu anordnen.
• Einheitlich im Aussehen. Jedes Diagramm im Dokument sieht automatisch aus wie die anderen.
• Es bleibt beim Text. Keine separaten Bilddateien, die man verwalten und nachziehen muss.

Diagramme in Inkiostro

Auf dem Mac zeichnet Inkiostro Mermaid-Diagramme live aus deinem Markdown: Du schreibst den mermaid-Block, und das Fluss- oder Sequenzdiagramm erscheint beim Tippen in der Vorschau. Wie die LaTeX-Formeln bleiben auch die Diagramme erhalten, wenn du als PDF exportierst, nach HTML oder EPUB — die Grafik reist also mit dem Dokument mit. Aus einer schlichten Notiz wird eine bebilderte, ohne dass du den Editor je verlässt.

Tipps

• Fang mit flowchart an — der nützlichste Typ und der am leichtesten zu lesende.
• Halte die Beschriftungen kurz, damit das Layout aufgeräumt bleibt; die Anordnung der Kästchen übernimmt Mermaid.
• Wähl eine Richtung (TD von oben nach unten oder LR von links nach rechts), die zum Ablauf passt.
• Schau oft in die Vorschau — ein kleiner Syntaxfehler fällt in dem Moment auf, in dem nichts mehr gezeichnet wird.

Häufige Fragen

Was ist Mermaid in Markdown?

Mermaid ist eine Syntax, um Diagramme — Flussdiagramme, Sequenzdiagramme, Gantt-Pläne und mehr — in reinem Text zu beschreiben. Du schreibst sie in einen eingezäunten Codeblock mit dem Namen mermaid, und ein Editor, der das unterstützt, zeichnet den Inhalt. Inkiostro kann das auf dem Mac direkt.

Kann Markdown von Haus aus Diagramme?

Von allein nicht. Diagramme sind eine Erweiterung: Editoren mit Mermaid-Unterstützung erkennen einen mermaid-Block und zeichnen seinen Inhalt. Reines Markdown würde einfach den Code anzeigen.

Wie erstelle ich ein Flussdiagramm in Markdown?

Schreib einen eingezäunten Codeblock mit dem Namen mermaid, beginn ihn mit flowchart LR (oder TD) und definier dann Knoten und Pfeile in der Form A --> B. In Inkiostro auf dem Mac wird das Diagramm live in der Vorschau gezeichnet.

Kommen die Diagramme ins PDF?

Ja. In Inkiostro auf dem Mac erscheinen Mermaid-Diagramme in der Vorschau und sind beim Export nach PDF, HTML und EPUB enthalten.

Muss ich zeichnen können?

Nein. Du beschreibst das Diagramm in Worten — Kästchen, Pfeile und Anordnung entstehen von selbst. Das ist genau richtig für alle, die klare Diagramme wollen, ohne ein Grafikprogramm zu öffnen.