Mermaid 11.15.0
Mermaid bietet keine nativen Swimlanes. Nutze eine Untergruppe pro Rolle; Sequenzdiagramme eignen sich für Nachrichten, architecture-beta für Infrastrukturgruppen.
Mit dem Mermaid-Flussdiagramm-Editor erstellen →Erstelle pro Rolle eine Untergruppe und verbinde Aktionen über ihre Knoten-Ids.
flowchart LR
subgraph author ["Autor"]
direction TB
A["Entwurf"] --> B["Überarbeiten"]
end
subgraph reviewer ["Prüfer"]
direction TB
C["Prüfen"] --> D["Genehmigen"]
end
A --> C
C --> B
B --> DWird geladen…
| Syntax | Bedeutung |
|---|---|
| flowchart LR / flowchart TB | Nutze flowchart; swimlane ist kein gültiges Diagrammschlüsselwort. |
| subgraph laneId ["Role"] / end | Gruppiert Aktionen pro Rolle; Gruppen- und Knoten-Ids müssen verschieden sein. |
| direction TB / direction LR | Fordert lokale Richtung an; externe Verbindungen können sie übersteuern. |
| A --> B / A -->|Handoff| B | Verbindet Aktionen zwischen Rollen und beschriftet Übergaben. |
| laneA --> laneB / A ~~~ B | Gruppenverbindungen und unsichtbare Kanten beeinflussen die Reihenfolge ohne feste Koordinaten. |
| style laneId fill:#f5f5f5,stroke:#a1a1a1 | Gestaltet Gruppenhintergrund und Rand direkt. |
| classDef / class A name / A:::name | Wendet wiederverwendbare Stile auf Aktionsknoten an. |
| %% / accTitle: / accDescr: | Kommentare und zugängliche Beschreibungen; weitere Flowchart-Syntax bleibt nutzbar. |
Jede Aktion gehört zu einer Rolle. Gruppen-Ids beschreiben Rollen, Knoten-Ids Aktionen. Ganze Gruppen zu verbinden bewahrt die lokale Richtung besser.
flowchart LR
subgraph writer ["Verfasser"]
direction TB
A["Gliederung"] --> B["Entwurf"]
end
subgraph editor ["Redakteur"]
direction TB
C["Prüfung"] --> D["Freigeben"]
end
writer --> editorWird geladen…
Kanten zwischen Aktionen zeigen präzise Übergaben, können die Gruppe aber zur globalen Richtung zwingen.
flowchart TB
subgraph requester ["Anfragender"]
direction LR
A["Einreichen"] --> B["Antworten"]
end
subgraph approver ["Freigabeverantwortlicher"]
direction LR
C["Bewerten"] --> D["Genehmigen"]
end
A -->|Anfrage| C
C -->|Änderungen| B
B --> DWird geladen…
style gestaltet die Gruppe, classDef die Aktionen. Halte Ränder und Text lesbar; Farben ergänzen die Rollenbeschriftung.
flowchart LR
subgraph drafting ["Redaktion"]
A["Schreiben"]:::action
end
subgraph checking ["Kontrolle"]
B["Prüfung"]:::action
end
A --> B
style drafting fill:#f5f5f5,stroke:#a1a1a1
style checking fill:#d3e5ff,stroke:#0070f3
classDef action fill:#ffffff,stroke:#171717,color:#171717Wird geladen…
rankSpacing trennt Übergaben, nodeSpacing Aktionen. Mermaid kontrolliert Reihenfolge, Breite und Positionen; teile lange Prozesse auf.
---
config:
flowchart:
nodeSpacing: 40
rankSpacing: 70
---
flowchart LR
subgraph drafting ["Redaktion"]
A["Schreiben"]
end
subgraph review ["Prüfung"]
B["Prüfen"]
end
A --> BWird geladen…
Beginne mit flowchart und erstelle Untergruppen.
Ungültige Syntax: Korrektur weiter unten
swimlane
Author --> Reviewerflowchart LR
subgraph author ["Autor"]
A["Entwurf"]
end
subgraph reviewer ["Prüfer"]
B["Prüfen"]
end
A --> BWird geladen…
Untergruppen passen sich ihrem Inhalt an; unsichtbare Kanten erzeugen kein festes Raster.