Mermaid

Mermaid ist eine JavaScript-basierte Diagramm- und Visualisierungssprache, mit der man Diagramme, Flowcharts, Zeitachsen und andere grafische Darstellungen direkt aus Text erzeugen kann. Anstatt mit einer grafischen Oberfläche zu zeichnen, beschreiben Sie ein Diagramm in einer einfachen, lesbaren Syntax. Mermaid wandelt diese Beschreibung dann automatisch in ein visuelles Diagramm um.

Mermaid ist eine der Ergänzungen in Obsidian, die über das reine Markdown hinausgehen.

#Wie Mermaid funktioniert

Mermaid funktioniert ähnlich wie Markdown: Es ist ein strukturierter Text mit speziellen Schlüsselwörtern, und der Parser macht daraus ein Diagramm. Ein einfaches Flowchart-Beispiel könnte so aussehen:

flowchart TD
    A[Start] --> B[Entscheidung?]
    B -->|Ja| C[Aktion 1]
    B -->|Nein| D[Aktion 2]
    C --> E[Ende]
    D --> E

flowchart TD
    A[Start] --> B[Entscheidung?]
    B -->|Ja| C[Aktion 1]
    B -->|Nein| D[Aktion 2]
    C --> E[Ende]
    D --> E

Diese wenigen Zeilen erzeugen ein kompletes, interaktives Diagramm – ohne ein Zeichenprogramm zu öffnen.

#Unterstützte Diagrammtypen

Mermaid kann verschiedene Arten von Diagrammen erstellen:

• Flowcharts: Zeigen Prozessabläufe, Entscheidungsbäume und logische Strukturen.
• Sequenzdiagramme: Stellen zeitliche Abläufe und Interaktionen zwischen Systemen dar – ideal für technische Dokumentation.
• Gantt-Diagramme: Visualisieren Projektpläne und Zeitachsen.
• Klassendiagramme: Zeigen objektorientierte Strukturen und Beziehungen.
• Entity-Relationship-Diagramme: Modellieren Datenbankstrukturen.
• Mind Maps: Ordnen Gedanken und Konzepte hierarchisch an.
• Zustandsdiagramme: Stellen verschiedene Zustände und Übergänge dar.
• Und mehr: Git-Graphen, Pie Charts, Bar Charts und weitere Visualisierungen.

#Mermaid in Obsidian

Obsidian unterstützt Mermaid nativ – ohne zusätzliche Plugins. Sie können Mermaid-Diagramme direkt in Ihre Markdown-Notizen einbetten, indem Sie einen Code-Block mit der Sprache mermaid erstellen:

​```mermaid
flowchart TD
    A[Idee] --> B[Planung]
    B --> C[Umsetzung]
    C --> D[Fertig]
​```

Die Diagramme werden dann direkt in der Notiz gerendert – das ist besonders wertvoll für:

• Visuelle Dokumentation: Prozesse und Strukturen visuell erklären, ohne externe Tools
• Wissensorganisation: Zusammenhänge und Mind Maps direkt in den Notizen
• Projektplanung: Gantt-Diagramme für Zeitpläne erstellen
• Technische Dokumentation: Flowcharts und Sequenzdiagramme ohne Umschweife

Links:

• Mermaid Webseite
• Obsidian Mermaid Doku