Inhalt
← Zurück zum Inhaltsverzeichnis
10. Mermaid (Diagramme)
mrkdwn rendert Mermaid-Diagramme direkt im Editor und im PDF-Export — schnell und vollständig offline (die Mermaid-Bibliothek ist in der App enthalten, es werden keine externen Ressourcen geladen).
Aktivieren
Einstellungen → Editor → Mermaid einschalten.
Schreibweise
Ein Diagramm wird als Codeblock mit der Sprache mermaid notiert:
```mermaid
flowchart TD
A[Start] --> B{Entscheidung}
B -->|Ja| C[Aktion]
B -->|Nein| D[Ende]
```
- Im Visual-Modus wird das Diagramm gerendert dargestellt.
- Im Raw-Modus ist der Mermaid-Quelltext sichtbar.
- Beim Zurückwandeln in Markdown bleibt der Quelltext unverändert erhalten (das gerenderte Diagramm wird nicht „eingebrannt").
Unterstützte Diagrammtypen
Mermaid unterstützt u. a.:
- Flussdiagramme (
flowchart/graph) - Sequenzdiagramme (
sequenceDiagram) - Klassendiagramme (
classDiagram) - Zustandsdiagramme (
stateDiagram-v2) - Entity-Relationship (
erDiagram) - Gantt-Diagramme (
gantt) - Tortendiagramme (
pie) - User-Journey, Mindmap, Timeline u. a.
Dunkle Themes
In dunklen Themes verwendet Mermaid automatisch angepasste Linien- und Schriftfarben (helle Linien/Beschriftungen auf dunklem Grund), damit Diagramme auch ohne hellen Hintergrund gut lesbar bleiben. Die Auswahl erfolgt anhand der Hintergrund-Helligkeit des aktiven Themes.
PDF & Druck
Diagramme werden auch in den PDF-Export und ins Drucken übernommen. Ist der wissenschaftliche Stil (siehe Export ) aktiv, werden Diagramme in einem neutralen Schwarz-Weiß-Stil dargestellt.
Sicherheit
Mermaid wird im strikten Sicherheitsmodus ausgeführt: Diagramm-Beschriftungen werden als Text behandelt, eingebettetes HTML oder Skript wird nicht ausgeführt.