Diagramme mit Grav

Das diagrams Plugin erlaubt das Rendern von Diagrammen direkt im Markdown. Verwendet werden Mermaid-Kurzcode-Blöcke.

Mermaid-Diagramme

Flussdiagramm (Flowchart)

graph TD
    A[Start] --> B{Entscheidung}
    B -->|Ja| C[Aktion ausfuehren]
    B -->|Nein| D[Abbrechen]
    C --> E[Ergebnis speichern]
    E --> F[Ende]
    D --> F

Sequenzdiagramm

sequenceDiagram
    participant User
    participant Server
    participant DB
    User->>Server: POST /api/data
    Server->>DB: INSERT INTO table
    DB-->>Server: Success (id=42)
    Server-->>User: 201 Created

Gantt-Diagramm

gantt
    title Projektplan Splexus
    dateFormat YYYY-MM-DD
    section Phase 1
    Analyse      :a1, 2026-07-01, 7d
    Design       :a2, after a1, 5d
    section Phase 2
    Entwicklung  :b1, after a2, 14d
    Testing      :b2, after b1, 7d
    section Phase 3
    Deployment   :c1, after b2, 3d
    Dokumentation :c2, after c1, 2d

Browser-Verteilung (kompatibles Flowchart)

graph LR
    A[Browser-Verteilung] --> B[Chrome: 65 Prozent]
    A --> C[Firefox: 15 Prozent]
    A --> D[Safari: 12 Prozent]
    A --> E[Edge: 5 Prozent]
    A --> F[Andere: 3 Prozent]

Statuswechsel (Sequenzdiagramm)

sequenceDiagram
    participant Besucher
    participant Seite
    participant Netzwerk
    Besucher->>Seite: Seite oeffnen
    Seite->>Netzwerk: Inhalte laden
    Netzwerk-->>Seite: Erfolg
    Seite-->>Besucher: Geladen
    Netzwerk-->>Seite: Fehler
    Seite-->>Besucher: Erneut versuchen

Theme-Farben (kompatibles Flowchart)

graph LR
    A[Dark Mode] --> B[Lila Akzent]
    B --> C[Tuerkiser Akzent]

Wie es funktioniert

1. Das diagrams Plugin erkennt Mermaid-Kurzcode-Blöcke im Markdown
2. Es übergibt den Inhalt mit erhaltenen Zeilenumbrüchen an einen Mermaid-Container
3. mermaid.min.js rendert ihn automatisch beim Laden zu SVG
4. Zusätzlich unterstützt das Plugin eigene Kurzcode-Varianten für Sequenz- und Flow-Diagramme