| updated: | 2025 06. May |
| published: | 2022 03. May |
Diagramme
Diagramme und Graphen in Markdown.Einfach Ascii Diagramme mit goat
Mit dem Syntaxhighlight goat lassen sich durch einfache Ascii-Textzeichen simple Diagramme erstellen.
Beispiel Verzeichnisstruktur
```goat
Linux
├──Android
└──Debian
└──Ubuntu
├──Lubuntu
└──Kubuntu
```
Weitere Beispiele sind hier
Mermaid
Mit Mermaid erhält man viel bessere und umfangreichere Diagramme und Graphen. Zum testen ist der OnlineEditor hilfreich.
Flowchart TD
%%{init: { 'theme': 'forest',
'loglevel': 'fatal',
'themeVariables': {
'fontFamily': 'arial',
'fontSize': '15px' }
}
}%%
flowchart TD
A[Christmas] -->|Get moneyy| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
XY Diagramm
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
Pie
pie title Tortendiagramm
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Basic Flowchart
graph LR;
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
GitGraph
%%{init: { 'theme': 'forest',
'loglevel': 'fatal',
'gitGraph': {
'rotateCommitLabel': true,
'showBranches': true,
'showCommitLabel': true,
'mainBranchName': 'mab',
'mainBranchOrder': 2
}
}
}%%
gitGraph
commit
branch dev
commit
commit
checkout mab
commit
commit
merge dev
commit
commit