Mermaid Einstieg

# Diagramme mit Mermaid > **Autor:** Rico Meiner > **Lizenz:** [CC0](https://creativecommons.org/publicdomain/zero/1.0/) > **Version** 0.0.1 vom 07.02.2026 **Mermaid kurz** - Aus Text werden Diagramme und diverse Charts erstellt - Javascript-Bibliothek - Auf vielen Plattformen unterstützt (oft in Verbindung mit Markdown) ## Links - Webseite [mermaid.js.org](https://mermaid.js.org) - [Dokumentation](https://mermaid.js.org/intro/getting-started.html) - Zum Üben den [Live-Editor](https://mermaid.live/) nutzen! - [Quellcode auf Github](https://github.com/mermaid-js/mermaid) unter MIT-Lizenz Alternativ bietet sich eine Notiz in HackMD, Hedgedoc oder eine github-Seite an. ## Überblick  ### Kreisdiagramm ```mermaid pie "label 1" : 1 "label 2" : 2 "label 3" : 3 ``` ```mermaid radar-beta title "Mitarbeiter-Analyse: Kompetenzprofil" axis f["Fachwissen"], t["Teamarbeit"], k["Kommunikation"], p["Problemlosung"] curve a["xxx"]{85, 90, 70, 75} graticule polygon max 120 ticks 3 showLegend false ``` ```mermaid --- config: radar: axisScaleFactor: 0.25 curveTension: 0.1 theme: base themeVariables: cScale0: "#FF0000" cScale1: "#00FF00" cScale2: "#0000FF" radar: curveOpacity: 0 --- radar-beta title adfsasdf axis A, B, C, D, E, F curve c1{1,2,3,4,5, 6} curve c2{5,4,3,2,1,5} curve c3{3,3,3,3,3,3} ``` ```mermaid pie showData "Arbeit" : 9 "Freizeit" : 7 "Ehrenamt" : 4 ``` ## 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 @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 @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: ```markdown graph A <--> B Kante mit Pfleilen C o--o D Kante mit Kreisen E x--x F Kante mit x G ~~~ H Kante unsichtbar I -.- J Kante gepunktet K --- L Kante normal M === N Kante O ---|test| P Kante mit Text Q ---- R längere Kante ``` ```mermaid @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 ``` Alternativ zum Text in einer Kanten mit `-->|Text|`, kann auch zwischen den Linien Text stehen `-- Text --`. **Tipp:*- Diese Methode führt schneller zu Syntaxfehlern. ### Knoten Knoten können durch `(`, `[`, `/` sowie deren Kombination diverse Formen annehmen. ```markdown graph A(Start) B[Prozess] C{Entscheidung} D((Referenz<br>punkt)) E((Kreis)) F[[Teil<br>prozess]] G[(Daten<br>bank)] H[/Daten/] ``` ```mermaid @mermaid graph LR A(Start) ~~~ B[Prozess] ~~~ C{Entscheidung} ~~~ D((Referenz<br>punkt)) ~~~ E((Kreis)) ~~~ F[[Teil<br>prozess]]~~~ G[(Daten<br>bank)] ~~~ H[/Daten/] ``` **Tipp:*- Ein Zeilenumbruch erfolgt mit `<br>` (in früheren Versionen 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 ``` <div style="display: flex;"> ```mermaid @mermaid graph LR A --> B ``` ```mermaid @mermaid graph RL A --> B ``` ```mermaid @mermaid graph TB A --> B ``` ```mermaid @mermaid graph BT A --> B ``` </div> ## Flowchart ```mermaid @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 ``` ```mermaid journey title Reisebuchung section Vor Buchung Newsletter: 3 Webseit: 6 section Buchung Beratungsgespräch: 5 Buchung: 4 Bezahlung: 5 section Nach Reise Feedbackbogen: 5 ``` |![radar](https://hackmd.io/_uploads/H1t_UVfPZg.png) |:-: |Bildunterschrift ```mermaid journey title Customer Journey: Reisebuchung section Entdecken Suchen nach Reisezielen: 5: done Vergleichen von Angeboten: 3: active Lesen von Reiseberichten: 2: todo section Planen Reisedaten festlegen: 4: done Budget festlegen: 3: active Auswahl der Reiseart (z. B. Flug + Hotel): 2: todo section Buchen Angebote vergleichen (Preis, Flexibilität): 4: done Buchung abschließen: 3: active Zahlung durchführen: 2: todo section Vorbereiten Reisedokumente erhalten (z. B. Flugticket): 4: done Reiseversicherung abschließen: 3: active Reiseplan erstellen: 2: todo section Reisen Reisebeginn: 4: done Unterwegs (z. B. Flug, Ankunft): 3: active Aufenthalt am Zielort: 2: todo section Rückkehr Rückreise buchen (falls nötig): 4: done Rückreise durchführen: 3: active Feedback geben (z. B. Bewertung): 2: todo ``` ```mermaid timeline title Customer Journey: Reisebuchung (Timeline-Form) section Entdecken Suchen nach Reisezielen : 2025-04-01, 5d Vergleichen von Angeboten : 2025-04-03, 3d Lesen von Reiseberichten : 2025-04-05, 2d section Planen Reisedaten festlegen : 2025-04-06, 2d Budget festlegen : 2025-04-07, 1d Auswahl der Reiseart (z. B. Flug + Hotel) : 2025-04-08, 1d section Buchen Angebote vergleichen (Preis, Flexibilität) : 2025-04-09, 2d Buchung abschließen : 2025-04-11, 1d Zahlung durchführen : 2025-04-12, 1d section Vorbereiten Reisedokumente erhalten (z. B. Flugticket) : 2025-04-13, 1d Reiseversicherung abschließen : 2025-04-14, 1d Reiseplan erstellen : 2025-04-15, 1d section Reisen Reisebeginn : 2025-04-16, 1d Unterwegs (z. B. Flug, Ankunft) : 2025-04-16, 2d Aufenthalt am Zielort : 2025-04-18, 7d section Rückkehr Rückreise buchen (falls nötig) : 2025-04-25, 1d Rückreise durchführen : 2025-04-26, 1d Feedback geben (z. B. Bewertung) : 2025-04-27, 1d ``` ## 4-Felder-Matrix ```mermaid --- config: quadrantChart: chartWidth: 400 chartHeight: 400 themeVariables: quadrant1TextFill: "#ff0000" XYChartAxisConfig: xAxisPosition: "top" xAxisLabelFontSize: 25 titlePadding: "30" theme: 'forest' --- quadrantChart title SWOT Analyse x-axis Hilfreich --> Problematisch y-axis Extern --> Intern quadrant-1 "Schwächen" quadrant-2 "Stärken" quadrant-3 "Chancen" quadrant-4 "Risiken" Functional offices : [0.2, 0.8] Good busisness knowledge : [0.3, 0.9] "Streamline tasks and development" : [0.2, 0.3] Lack of competence : [0.7, 0.7] "AI" : [0.7, 0.4] Foreign and cheaper labour : [0.5, 0.5] ``` ```mermaid %%{init: { "themeVariables": [ {"quadrant1Fill": "#F44336"}, {"quadrant2Fill": "#FFB74D"}, {"quadrant3Fill": "#AED581"}, {"quadrant4Fill": "#FFEE58"}] } }%% quadrantChart title Quadranten farbig gestalten x-axis Low Value --> High Value y-axis Low Risk --> High Risk Data Point: [0.7, 0.8] Another Point: [0.8, 0.6] ``` ```mermaid quadrantChart title SWOT-Analyse (fiktives Beispiel) x-axis Intern negativ --> Intern positiv y-axis Extern negativ --> Extern positiv quadrant-1 "Stärken" quadrant-2 "Chancen" quadrant-3 "Schwächen" quadrant-4 "Risiken" "Hohe Produktqualität": [0.7, 0.8] "Starkes Markenimage": [0.6, 0.7] "Wachsender Markt": [0.8, 0.6] "Technologische Innovationen": [0.7, 0.3] "Hohe Produktionskosten": [0.3, 0.3] "Abhängigkeit von Lieferanten": [0.2, 0.4] "Starker Wettbewerb": [0.4, 0.2] "Gesetzliche Regulierung": [0.3, 0.1] ``` ```mermaid quadrantChart title BCG-Matrix - Beispiel x-axis "rel. Marktanteil: niedrig" --> "hoch" y-axis "Marktwachstum: niedrig" --> "hoch" quadrant-1 "Stars" quadrant-2 "Question Marks" quadrant-3 "Dogs" quadrant-4 "Cash Cows" "Produkt A": [0.75, 0.8] radius: 15, color: #ccc "Produkt B": [0.65, 0.7] radius: 35, color: #ddd, stroke-color: #fff, stroke-width: 5px "Produkt C": [0.3, 0.75] radius: 2, color: #aaa "Produkt D": [0.4, 0.6] radius: 8, color: #c88 "Produkt E": [0.25, 0.3] radius: 35, color: #bbb "Produkt F": [0.35, 0.2] radius: 22, color: #ccc "Produkt G": [0.8, 0.25] radius: 20, color: #daa "Produkt H": [0.7, 0.4] radius: 15, color: #b88 ``` ## Zeitleiste (timeline) ```mermaid timeline vor 2000 : FH Elsfleth : FH Emden : FH Leer : FH Oldenburg : FH Wilhelmshaven 2000-2009: FH OOW seit 2009 : Jade HS : HS Emden Leer ``` ```mermaid --- config: theme: 'neutral' themeVariables: cScale0: '#ff0000' cScaleLabel0: '#ffffff' cScale1: '#ff0000' cScaleLabel1: 'ff0000' cScale2: '#ff0000' cScaleLabel2: 'ff0000' cScale3: '#ff0000' cScaleLabel3: '#ffffff' timeline: disableMulticolor: false --- timeline section Regionale Hochschulen vor 2000 : FH Elsfleth : FH Emden : FH Leer : FH Oldenburg : FH Wilhelmshaven section Fusion zu einer Fachhochschule 2000-2009: FH OOW section Defusion in zwei Hochschulen seit 2009 : Jade HS : HS Emden Leer ``` ```mermaid --- config: theme: 'base' --- timeline title Project Timeline section Planning 2024-Q1 : Requirements Gathering : Initial Design section Development 2024-Q2 : Phase 1 : Phase 2 section Deployment 2024-Q3 : Beta Release : Production ``` ```mermaid xychart-beta title "Säulen und Liniendiagramm" x-axis "X-Achse" ["A", "B", "C", "D"] y-axis "Y-Achse" 5 --> 45 bar [10,20,20,40] bar [20,10,25,30] line [30,24,25,20] ``` Ein Flussdiagramm oder auch Sankey-Diagramm bildet einen ```mermaid sankey-beta %%Quelle Ziel, Wert Nichtwaehler, CDU, 78000 Linke, CDU, 19000 Gruene, CDU, 31000 SPD, CDU, 18000 CDU, AFD, 43000 CDU, BSW, 43000 AFD, BSW, 10000 ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.