i

Diagramme

Mermaid

Für viele (aber leider nicht für alle) Markdown-Editoren gibt es die Software Mermaidals Plugin, mit der verschiedenste Diagramme gerendert werden können. Es können zum Beispiel Kreisdiagramme, UML-Diagramme, Sequenz-Diagramme, Flussdiagramme und noch viele mehr erzeugt werden.

Dazu wird das Diagramm in einer einfachen Syntax beschreiben, die dann von Mermaid gerendert wird. Es folgen einige Beispiel, die zeigen, wie Mermaid-Quelltext als Diagramme gerendert werden. Angegeben ist jeweils der Quelltext und darunter das fertig gerenderte Diagramm.

Kreisdiagramme

```mermaid
pie title Wo dein Bleistift landet wenn er runterfällt
    "genau dort, wo er hingefallen ist" : 5
    "rollt unter den Stuhl meiner Nachbar:in" : 10
    "rollt genau vor die Füße der Lehrkraft" : 25
    "landet in einer anderen Dimension und ist spurlos verschwunden" : 60
```
pie title Wo dein Bleistift landet wenn er runterfällt
    "genau dort, wo er hingefallen ist" : 5
    "rollt unter den Stuhl meiner Nachbar:in" : 10
    "rollt genau vor die Füße der Lehrkraft" : 25
    "verschindet spurlos in einer anderen Dimension" : 60

Flussdiagramme

```mermaid
flowchart TD
    A[Learn Syntax] --> B[Use Mermaid]
```
flowchart TD
    A[Learn Syntax] --> B[Use Mermaid]

Weitere Beispiele

Viele weitere Beispiele und eine Übersicht über die Syntax von Mermaid findest du hier.

Suche

v
1.4.7
inf-schule.de/information/markdown/diagramme
inf-schule.de/1.4.7
inf-schule.de/@/page/qFXYaIA5RnaTl5lv

Rückmeldung geben