📊 Mermaid Diagramme — Visualisierungen

Abstract

Mermaid ist eine in Quartz eingebaute Diagramm-Sprache. Du schreibst Text-Syntax in einem Codeblock mit ```mermaid — Quartz rendert daraus interaktive SVG-Grafiken. Keine Bildbearbeitung, keine externe Software.

---

🔤 Grundsyntax

```mermaid
[Diagramm-Typ]
    [Inhalt]
```

---

1. Flowchart — Abläufe & Entscheidungen

graph TD
    A[Start] --> B{Entscheidung?}
    B -- Ja --> C[Schritt C]
    B -- Nein --> D[Schritt D]
    C --> E[Ende]
    D --> E

Syntax:

graph TD          ← Top-Down
graph LR          ← Left-Right
graph BT          ← Bottom-Top
graph RL          ← Right-Left

Node-Formen:

A[Rechteck]
B(Abgerundet)
C{Raute / Entscheidung}
D((Kreis))
E>Asymmetrisch]
F[(Datenbank)]

Pfeile:

A --> B            ← Einfacher Pfeil
A -- Text --> B    ← Mit Beschriftung
A -.-> B           ← Gestrichelt
A ==> B            ← Dicke Linie
A --o B            ← Kreis am Ende
A --x B            ← X am Ende

Farben (Inline-Styling):

style A fill:#d4edda,stroke:#28a745
style B fill:#fff3cd,stroke:#ffc107

---

2. Mindmap — Ideen-Strukturierung

mindmap
  root((Digital Garden))
    Inhalt
      Atomic Notes
      MOCs
      Artikel
    Technik
      Quartz
      Obsidian
      Deployment
    Methodik
      Zettelkasten
      Verlinkung
      Reifegrade

Besonderheit: Mindmaps haben keine Pfeile — nur Hierarchie durch Einrückung.

mindmap
  root((Zentrum))
    Hauptthema 1
      Unterpunkt 1a
      Unterpunkt 1b
    Hauptthema 2
      Unterpunkt 2a

---

3. Sequenzdiagramm — Interaktionen

sequenceDiagram
    participant N as Neue Idee
    participant T as Tagesnotiz
    participant A as Atomic Note
    participant M as MOC

    N->>T: Schnell notieren
    T->>A: Ausarbeiten (nächster Tag)
    A->>M: In Übersicht einbetten
    M-->>A: Backlink entsteht

Syntax:

sequenceDiagram
    participant A as Alias A
    participant B as Alias B
    A->>B: Nachricht (Pfeil)
    A-->>B: Gestrichelt
    A-)B: Async
    A-x B: Mit X
    Note over A,B: Notiz über beide
    loop Schleife
        A->>B: Wiederholt
    end

---

4. Gantt — Zeitpläne

gantt
    title Garten-Aufbau
    dateFormat  YYYY-MM-DD
    section Templates
    Atomic + MOC    :done,    t1, 2026-04-21, 2026-04-21
    Artikel + Lit   :done,    t2, 2026-04-21, 2026-04-21
    Projekt + Daily :done,    t3, 2026-04-21, 2026-04-21
    ADR + Research  :done,    t4, 2026-04-21, 2026-04-21
    Learning Track  :done,    t5, 2026-04-21, 2026-04-21
    section Guides
    Frontmatter     :active,  g1, 2026-04-21, 2026-04-22
    Callouts        :active,  g2, 2026-04-21, 2026-04-22
    Wikilinks       :active,  g3, 2026-04-21, 2026-04-22
    Mermaid         :active,  g4, 2026-04-21, 2026-04-22
    CSS Classes     :active,  g5, 2026-04-21, 2026-04-22

Task-Status:

:done,    id, start, end    ← Abgeschlossen (grün)
:active,  id, start, end    ← Aktiv (blau)
:crit,    id, start, end    ← Kritisch (rot)
          id, start, end    ← Geplant (grau)

---

5. Pie Chart — Verteilungen

pie title Notiz-Typen im Garten
    "Atomic Notes" : 45
    "MOCs" : 15
    "Artikel" : 20
    "Literatur" : 10
    "Sonstiges" : 10

pie title Titel
    "Label A" : 42
    "Label B" : 28
    "Label C" : 30

---

6. Git Graph — Versionsverlauf

gitGraph
    commit id: "Initial Setup"
    commit id: "Templates 01-04"
    branch feature/guides
    checkout feature/guides
    commit id: "Frontmatter Guide"
    commit id: "Callout Showcase"
    checkout main
    merge feature/guides
    commit id: "Alle Guides fertig"

---

7. Entity Relationship — Datenstrukturen

erDiagram
    NOTIZ ||--o{ BACKLINK : "hat"
    NOTIZ {
        string title
        string[] tags
        string description
        bool publish
    }
    BACKLINK {
        string source
        string target
    }
    NOTIZ ||--o{ TAG : "hat"
    TAG {
        string name
        string hierarchy
    }

---

8. State Diagram — Zustände

stateDiagram-v2
    [*] --> Seedling : Neue Notiz
    Seedling --> Budding : Ausgearbeitet
    Budding --> Evergreen : Stabil & gepflegt
    Evergreen --> Budding : Überarbeitung nötig
    Budding --> Abandoned : Nicht weitergeführt
    Abandoned --> [*]

---

9. Klassendiagramm — Strukturen

classDiagram
    class Notiz {
        +String title
        +String[] tags
        +Boolean publish
        +schreiben()
        +verlinken()
    }
    class AtomicNote {
        +String kernidee
        +vernetzen()
    }
    class MOC {
        +Notiz[] links
        +strukturieren()
    }
    Notiz <|-- AtomicNote
    Notiz <|-- MOC

---

💡 Tipps für Mermaid in Quartz

Performance

Mermaid wird clientseitig gerendert. Viele komplexe Diagramme auf einer Seite können das Laden verlangsamen.

Sonderzeichen

Anführungszeichen " in Knotenbeschriftungen müssen als "Mein Text" geschrieben oder vermieden werden.

Mobile

Komplexe Diagramme werden auf kleinen Bildschirmen gescrollt — halte Diagramme schlank für bessere Mobile-UX.

---

📊 Schnellreferenz

Typ	Keyword	Nutzen
Flowchart	graph TD/LR	Abläufe, Entscheidungen
Mindmap	mindmap	Ideen-Hierarchien
Sequenz	sequenceDiagram	Interaktionen, Kommunikation
Gantt	gantt	Zeitpläne, Projektplanung
Pie	pie	Verteilungen
Git	gitGraph	Versionsverlauf
ER	erDiagram	Datenstrukturen
State	stateDiagram-v2	Zustandsmaschinen
Klasse	classDiagram	Objekt-Strukturen

---

🌱 Verwandte Seiten

• 05-project — Gantt und Mindmap in Projekten
• 09-learning-track — Prereq-Graphen für Lernpfade
• 07-decision-log — Flowcharts für Entscheidungswege
• callout-showcase — Diagramme in Callouts einbetten

---

Status: 🌳 Evergreen | Vollständige Mermaid-Referenz