Einstieg in Mermaid

# Einstieg in Mermaid **Autor:** Rico Meiner **Lizenz:** [CC0](https://creativecommons.org/publicdomain/zero/1.0/) > Mermaid kann aus Text eine Reihe von Diagrammen erstellen und leicht anzupassen. --- ## Linksammlung - Webseite [mermaid.js.org](https://mermaid.js.org) - Quellcode [Github](https://github.com/mermaid-js/mermaid) (MIT-Lizenz) - [Live-Editor](https://mermaid.live/) - [Dokumentation](https://mermaid.js.org/intro/getting-started.html) Zum Üben mit den folgenden Beispielen parallel den Live-Editor nutzen. Alternativ bietet sich eine Notiz in HackMD, Hedgedoc oder eine github-Seite an. --- ## Graph, Ablaufdiagramm ### einfacher Graph ```markdown= graph A --> B ``` Zeile 1: Diagrammtyp festlegen (`graph` oder `flowchart`). Zeile 2: 2 Knoten (`A`, `B`) werden mit einer Kante `-->` verbunden. ```mermaid graph A --> B ``` Es können beliebig viele Knoten miteinander verbunden werden. :::spoiler Graph mit 3 Knoten ```markdown graph A --> B B --> C A --> C ``` ```mermaid graph A --> B B --> C A --> C ``` ::: ### Kanten und Pfleile Mit Hilfe von Linien (`-`, `=`) und Zeichen (`<`, `o`) können Kanten zwischen Knoten erstellt werden. Die Beispiel sind kombinierbar. Alternativ zum Text in einer Kanten mit `-->|Text|`, kann auch zwischen den Linien Text stehen `-- Text --`. **Tipp:** Diese Methode führt schneller zu Syntaxfehlern. ```markdown graph A <--> B Kante mit Pfleilen C o--o D Kante mit Kreisen E x--x F Kante mit x G ~~~ H unsichtbare Kante I -.- J gepunktete Kante K --- L normale Kante M === N dicke Kante O ---|test| P Kante mit Text Q ---- R längere Kante ``` ```mermaid graph A <--> B C o--o D E x--x F G ~~~ H I -.- J K --- L M === N O ---|Text| P Q ---- R ``` ### Knoten Knoten können durch `(`, `[`, `/` sowie deren Kombination diverse Formen annehmen. ```markdown graph A(Start) B[Prozess] C{Entscheidung} D((Referenz-\npunkt)) E((Kreis)) F[[Teil\nprozess]] G[(Daten\nbank)] H[/Daten/] ``` ```mermaid graph LR A(Start) ~~~ B[Prozess] ~~~ C{Entscheidung} ~~~ D((Referenz-\npunkt)) ~~~ E((Kreis)) ~~~ F[[Teil\nprozess]]~~~ G[(Daten\nbank)] ~~~ H[/Daten/] ``` **Tipp:** Ein Zeilenumbruch erfolgt mit `\n` im Text. Ab Version mermaid 11.3.x wurde ein sehr große Zahl von Formen mit einer neuen Syntax hinzugefügt. [^1] [^1]: [Liste](https://mermaid.js.org/syntax/flowchart.html?id=flowcharts-basic-syntax#complete-list-of-new-shapes) mit neuen Formen für Knoten. ### Leserichtung Es können folgende Ausrichtungen für Graphen/Diagramme festgelegt werden: - `TB` top > bottom (Alternativ `TD` top > down) - `BT` bottom > top - `RL` right > left - `LR` left > right ```markdown graph LR A --> B graph RL A --> B graph TB A --> B graph BT A --> B ``` ```mermaid flowchart LR A --> B B --> C ``` ## Flowchart ```mermaid flowchart LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ``` ``` mermaid @mermaid flowchart LR A[Initial Request<br>for Consideration] --> B{Preliminary Review} B -- Advanced --> C[Project Owner Assigned<br>to Conduct Assessment]; B -- Declined --> D[Request Closed]; C --> E[Privacy Review]; C --> F[Data Needs Assessment]; C --> G[Data Contribution Assessment]; C --> H[CITI Training Verification]; E --> I{Final Approval}; F --> I; G --> I; H --> I; I -- Approved --> J[Scientific Project Begins]; I -- Declined --> D; ``` ### Flowchart - Subgraphen ``` mermaid @mermaid flowchart LR subgraph TOPX direction TB subgraph B1 direction RL i1 -->f1 end subgraph B2 direction BT i2 -->f2 end end A --> TOPX --> B B1 --> B2 ``` ## Flowchat gestalten ```mermaid flowchart LR classDef blue fill:#27f,stroke:#333,color:#fff classDef red fill:#f23,stroke:#a00,color:#fff G[(Goals)]:::red <---> |Connect To| P[(Projects)]:::blue ``` ## Customer Journey ```mermaid journey title My working day section Vor dem Einkauf mit Freundin Aufstehen: 1: Ich Go upstairs: 3: Me Webseit: 3, Hein, Cat Do work: 1: Me, Cat section Go home Go downstairs: 6: Me Sit down: 5: Me section Go away Go downstairs: 5: Me Sit down: 5: Me ```