Diagramme in Markdown mit Mermaid

Aha. Wieder was gelernt! Es gibt eine Syntax-Definition, mit der man z.B. auch in Markdown Dokumenten Diagramme aller Art erzeugen kann. Natürlich nur, wenn der zum Einsatz kommende Markdown Prozessor auch Mermaid unterstützt.

Kleiner Mermaid Test

Der folgende Code im Artikel-Markdown …

```mermaid
flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
```

… erzeugt dann dieses Diagramm:

flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

Wie man Mermaid in seine Github Pages einbindet, damit dann eben auch das Rendern so einer Diagramm-Beschreibung klappt, habe ich in diesem Blog Post beschrieben.

🔲