Mermaid Flussdiagramm: Spickzettel

Schnellstart

Behalte feste Ids und setze Beschriftungen in Anführungszeichen; Kanten verbinden die Ids.

flowchart LR
  D["Anleitung entwerfen"] --> R{"Genehmigt?"}
  R -->|Ja| P["Anleitung veröffentlichen"]
  R -->|Nein| D

Syntaxreferenz

Formen und Texte

Der Katalog enthält alle 48 Standardformen des Renderers 11.15 mit Aliasnamen. Nutze @{ shape: ... } für neue Formen; die klassische Notation bleibt gültig.

flowchart TB
  A@{ shape: sl-rect, label: "Titel eingeben" }
  B@{ shape: doc, label: "Dokumententwurf" }
  C@{ shape: diam, label: "Vollständig?" }
  D@{ shape: cyl, label: "Archiv" }
  A --> B --> C
  C -->|Ja| D
  C -->|Nein| A

Verbindungen und Abstände

Zusätzliche Striche fordern mehr Rangabstand. Endmarkierungen drücken Konventionen aus; unsichtbare Kanten beeinflussen das Layout.

flowchart LR
  A["Gliederung"] -->|Bereit| B["Entwurf"]
  B -.-> C["Prüfung"]
  C ==> D["Veröffentlichung"]
  A ----> D
  B o--o E["Prüfliste"]
  E x--x D
  C ~~~ E

Untergruppen

Interne Richtung kann bei Verbindungen nach außen verloren gehen. Verbinde ganze Untergruppen, wenn du ihre Richtung erhalten möchtest.

flowchart LR
  subgraph prep ["Vorbereitung"]
    direction TB
    A["Gliederung"] --> B["Entwurf"]
  end
  subgraph review ["Prüfung"]
    direction TB
    C["Prüfen"] --> D["Genehmigen"]
  end
  prep --> review

Stile und Markdown

classDef definiert Stile; class oder ::: wendet sie an. style betrifft einen Knoten, linkStyle den Deklarationsindex und Ids einzelne Kanten.

flowchart LR
  A["`**Anleitung** entwerfen`"]:::focus e1@--> B["Prüfung"]
  B --> C["Veröffentlichen"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

Abstände und Layout-Renderer

nodeSpacing und rankSpacing passen Abstände an. ELK und Iconpakete erfordern Host-Registrierung; gewöhnliche Formen brauchen diese Erweiterungen nicht.

---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["Schreiben"] --> B["Prüfung"] --> C["Veröffentlichen"]

Häufige Fehler

flowchart LR
  A[Draft

flowchart LR
  A["Entwurf"] --> B["Prüfung"]

Einschränkungen

• Das automatische Layout setzt Positionen; zusätzliche Striche definieren keine Pixelabstände.
• Externe Kanten können die Untergruppenrichtung übersteuern.
• Icons brauchen Pakete, Bilder erreichbare Ressourcen und ELK eine Registrierung.

Verwandte Spickzettel

• Mermaid Swimlane-Diagramm: Spickzettel →
• Mermaid Klassendiagramm: Spickzettel →
• Mermaid-Spickzettel →