initial commit
This commit is contained in:
commit
b8f464fc4a
9
.vscode/extensions.json
vendored
Normal file
9
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"davidanson.vscode-markdownlint",
|
||||
"mhutchie.git-graph",
|
||||
"ms-ceintl.vscode-language-pack-de",
|
||||
"tomoki1207.pdf",
|
||||
"yzhang.markdown-all-in-one"
|
||||
]
|
||||
}
|
||||
BIN
.vscode/extensions.txt
vendored
Normal file
BIN
.vscode/extensions.txt
vendored
Normal file
Binary file not shown.
0
.vscode/launch.json
vendored
Normal file
0
.vscode/launch.json
vendored
Normal file
BIN
assets/favicon.ico
Normal file
BIN
assets/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
assets/favicon_mermaid_128x128.png
Normal file
BIN
assets/favicon_mermaid_128x128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
assets/favicon_mermaid_16x16.png
Normal file
BIN
assets/favicon_mermaid_16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 647 B |
BIN
assets/favicon_mermaid_32x32.png
Normal file
BIN
assets/favicon_mermaid_32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
assets/favicon_mermaid_64x64.png
Normal file
BIN
assets/favicon_mermaid_64x64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
assets/logo-bright-alpha.png
Normal file
BIN
assets/logo-bright-alpha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/logo-dark-alpha.png
Normal file
BIN
assets/logo-dark-alpha.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/logo-icon-basis.png
Normal file
BIN
assets/logo-icon-basis.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 954 KiB |
29
demo.html
Normal file
29
demo.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- Externes JS einbinden -->
|
||||
<script type="module">
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- ab hier, innerhalb der mermaid-class, einfach den mermaid Code einfügen -->
|
||||
<div class="mermaid">
|
||||
flowchart TD
|
||||
Start([Start])
|
||||
Init[summe = 0]
|
||||
Schleife{Liste leer?}
|
||||
Hole[Hole nächstes Element]
|
||||
Addiere[summe += zahl]
|
||||
Ende([return summe])
|
||||
|
||||
Start --> Init --> Schleife
|
||||
Schleife -- Nein --> Hole --> Addiere --> Schleife
|
||||
Schleife -- Ja --> Ende
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
865
mermaid.md
Normal file
865
mermaid.md
Normal file
@ -0,0 +1,865 @@
|
||||
|
||||
# ⚙️ Mermaid Crashkurs
|
||||
|
||||
## 📄 **Mermaid Cheat Sheet (Deutsch)**
|
||||
|
||||
## ⚓ Inhalt
|
||||
|
||||
- [⚙️ Mermaid Crashkurs](#️-mermaid-crashkurs)
|
||||
- [📄 **Mermaid Cheat Sheet (Deutsch)**](#-mermaid-cheat-sheet-deutsch)
|
||||
- [⚓ Inhalt](#-inhalt)
|
||||
- [➖ Was ist Mermaid](#-was-ist-mermaid)
|
||||
- [➖ Was macht Mermaid?](#-was-macht-mermaid)
|
||||
- [➖ Vorteile](#-vorteile)
|
||||
- [➖ Typische Anwendungsfälle](#-typische-anwendungsfälle)
|
||||
- [➖ Beispiel](#-beispiel)
|
||||
- [➖ Beispiel-Code: Summiere eine Liste](#-beispiel-code-summiere-eine-liste)
|
||||
- [Diagramme](#diagramme)
|
||||
- [➖ Flussdiagramm (`flowchart`)](#-flussdiagramm-flowchart)
|
||||
- [➖ Klassendiagramm (`classDiagram`)](#-klassendiagramm-classdiagram)
|
||||
- [➖ Zustandsdiagramm (`stateDiagram`)](#-zustandsdiagramm-statediagram)
|
||||
- [➖ Entscheidungsdiagramm (`flowchart` mit Bedingungen)](#-entscheidungsdiagramm-flowchart-mit-bedingungen)
|
||||
- [➖ Subgraphen (z. B. Module, Gruppen)](#-subgraphen-zb-module-gruppen)
|
||||
- [➖ Weitere: Gantt-, Pie- \& ER-Diagramme](#-weitere-gantt--pie---er-diagramme)
|
||||
- [➖ Erklärung](#-erklärung)
|
||||
- [➖ Visualisierung/ Rendering](#-visualisierung-rendering)
|
||||
- [➖ Gängige Symbole (Unicode sicher)](#-gängige-symbole-unicode-sicher)
|
||||
- [➖ Diagramm-Layout und Styling-Optionen](#-diagramm-layout-und-styling-optionen)
|
||||
- [Mermaid `style`-Eigenschaften (Übersicht)](#mermaid-style-eigenschaften-übersicht)
|
||||
- [Beispiel mit mehreren Eigenschaften](#beispiel-mit-mehreren-eigenschaften)
|
||||
- [➖ Interaktive Features \& Erweiterte Syntax](#-interaktive-features--erweiterte-syntax)
|
||||
- [➖ Klickbare Knoten](#-klickbare-knoten)
|
||||
- [➖ Tooltip mit `click` kombinieren](#-tooltip-mit-click-kombinieren)
|
||||
- [➖ Ankerpunkte / Subgraph-Steuerung](#-ankerpunkte--subgraph-steuerung)
|
||||
- [➖ Weitere Optionen](#-weitere-optionen)
|
||||
- [➖ Anmerkungen](#-anmerkungen)
|
||||
- [➖ Testing-Setup \& CI-Integration](#-testing-setup--ci-integration)
|
||||
- [➖ Mermaid CLI (`@mermaid-js/mermaid-cli`)](#-mermaid-cli-mermaid-jsmermaid-cli)
|
||||
- [➖ Beispiel: Einfache .mmd-Datei](#-beispiel-einfache-mmd-datei)
|
||||
- [➖ Typische Optionen](#-typische-optionen)
|
||||
- [➖ Automatisierung mit Makefile](#-automatisierung-mit-makefile)
|
||||
- [➖ CI-Beispiel (GitHub Actions)](#-ci-beispiel-github-actions)
|
||||
- [📌 Hinweis](#-hinweis)
|
||||
- [➖ Diagramm-Export / Automatisierung](#-diagramm-export--automatisierung)
|
||||
- [➖ Export mit Mermaid CLI](#-export-mit-mermaid-cli)
|
||||
- [➖ Installation](#-installation)
|
||||
- [🛠 Typische Optionen](#-typische-optionen-1)
|
||||
- [➖ Beispiel: SVG aus `.mmd` erzeugen](#-beispiel-svg-aus-mmd-erzeugen)
|
||||
- [➖ Struktur im Projekt](#-struktur-im-projekt)
|
||||
- [➖ Makefile-Beispiel](#-makefile-beispiel)
|
||||
- [➖ GitHub Actions-Beispiel](#-github-actions-beispiel)
|
||||
- [➖ Hinweise](#-hinweise)
|
||||
- [➖ Template \& Projektintegration](#-template--projektintegration)
|
||||
- [➖ Ablauf](#-ablauf)
|
||||
- [🛠 Tools](#-tools)
|
||||
- [Links](#links)
|
||||
- [✏️ Notizen bei Erstellung dieses Dokuments](#️-notizen-bei-erstellung-dieses-dokuments)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Was ist Mermaid
|
||||
|
||||
**Mermaid** ist eine deklarative Scriptsprache zur Erstellung von Diagrammen und Visualisierungen auf Basis von **einfachem Text**. Sie wurde entwickelt, um komplexe Abläufe, Strukturen und Beziehungen direkt aus Quellcode-artiger Notation zu **automatisch generierten Diagrammen** umzuwandeln – ohne grafische Tools oder spezielle Software.
|
||||
|
||||
---
|
||||
|
||||
### ➖ Was macht Mermaid?
|
||||
|
||||
- Generiert **Flowcharts**, **Klassendiagramme**, **Zustandsautomaten**, **Gantt-Diagramme**, **Entscheidungsbäume**, **Entity-Relationship-Diagramme** u.v.m.
|
||||
- Nutzt eine **einfach lesbare Syntax** ähnlich wie Markdown oder Code
|
||||
- Eignet sich ideal zur Dokumentation von **Software**, **Prozessen**, **Systemarchitekturen** und **Ablauflogiken**
|
||||
- Kann direkt in viele Tools eingebettet werden (z. B. GitHub, VS Code, MkDocs, Obsidian)
|
||||
- Unterstützt **Versionierung**, **Code-first-Dokumentation** und ist vollständig **plattformunabhängig**
|
||||
|
||||
---
|
||||
|
||||
### ➖ Vorteile
|
||||
|
||||
- Kein Drag & Drop – **alles in Text**
|
||||
- Leicht in Git-Projekte integrierbar
|
||||
- Wartbar, automatisierbar, CI/CD-fähig
|
||||
- Unterstützt **Unicode-Symbole**, Farben, Subgraphen und Labels
|
||||
- Ideal für Entwickler, Techniker und Dokumentationszwecke
|
||||
|
||||
---
|
||||
|
||||
### ➖ Typische Anwendungsfälle
|
||||
|
||||
- Darstellung von **Funktionsabläufen**
|
||||
- Visualisierung von **Code-Logik** und **Bedingungen**
|
||||
- Modellierung von **Klassenhierarchien** oder **Zuständen**
|
||||
- Erstellung von **technischen Spezifikationen**
|
||||
- Unterstützung bei **Team-Kommunikation** und **Code Reviews**
|
||||
|
||||
---
|
||||
|
||||
**Beispieldiagram:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
%% Grundstruktur
|
||||
Start([Start])
|
||||
Entscheidung{Bedingung erfüllt?}
|
||||
Aktion1[Aktion bei Ja]
|
||||
Aktion2[Aktion bei Nein]
|
||||
Ende([Ende])
|
||||
|
||||
%% Verbindungen
|
||||
Start --> Entscheidung
|
||||
Entscheidung -- Ja --> Aktion1 --> Ende
|
||||
Entscheidung -- Nein --> Aktion2 --> Ende
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Beispiel
|
||||
|
||||
Exemplarisch ein kleines Programm als **Mermaid-Ablaufdiagramm**.
|
||||
Wir nehmen dazu ein simples Beispiel in Python:
|
||||
|
||||
#### ➖ Beispiel-Code: Summiere eine Liste
|
||||
|
||||
**Python-Code:**
|
||||
|
||||
```python
|
||||
def summiere_liste(liste):
|
||||
summe = 0
|
||||
for zahl in liste:
|
||||
summe += zahl
|
||||
return summe
|
||||
```
|
||||
|
||||
**Das gleiche in Mermaid-Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Start([Start])
|
||||
Init[summe = 0]
|
||||
Schleife{Liste leer?}
|
||||
Hole[Hole nächstes Element]
|
||||
Addiere[summe += zahl]
|
||||
Ende([return summe])
|
||||
|
||||
Start --> Init --> Schleife
|
||||
Schleife -- Nein --> Hole --> Addiere --> Schleife
|
||||
Schleife -- Ja --> Ende
|
||||
```
|
||||
|
||||
**Ergibt dann gerendert:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([Start])
|
||||
Init[summe = 0]
|
||||
Schleife{Liste leer?}
|
||||
Hole[Hole nächstes Element]
|
||||
Addiere[summe += zahl]
|
||||
Ende([return summe])
|
||||
|
||||
Start --> Init --> Schleife
|
||||
Schleife -- Nein --> Hole --> Addiere --> Schleife
|
||||
Schleife -- Ja --> Ende
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### Diagramme
|
||||
|
||||
#### ➖ Flussdiagramm (`flowchart`)
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Start([Start])
|
||||
Entscheidung{Bedingung erfüllt?}
|
||||
Aktion1[Aktion bei Ja]
|
||||
Aktion2[Aktion bei Nein]
|
||||
Ende([Ende])
|
||||
|
||||
Start --> Entscheidung
|
||||
Entscheidung -- Ja --> Aktion1 --> Ende
|
||||
Entscheidung -- Nein --> Aktion2 --> Ende
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([Start])
|
||||
Entscheidung{Bedingung erfüllt?}
|
||||
Aktion1[Aktion bei Ja]
|
||||
Aktion2[Aktion bei Nein]
|
||||
Ende([Ende])
|
||||
|
||||
Start --> Entscheidung
|
||||
Entscheidung -- Ja --> Aktion1 --> Ende
|
||||
Entscheidung -- Nein --> Aktion2 --> Ende
|
||||
```
|
||||
|
||||
**Richtungen:**
|
||||
|
||||
- `TD` = oben nach unten (Top → Down)
|
||||
- `LR` = links nach rechts (Left → Right)
|
||||
- `BT` = unten nach oben (Bottom → Top)
|
||||
- `RL` = rechts nach links (Right → Left)
|
||||
|
||||
**Knotenformen:**
|
||||
|
||||
| Syntax | Bedeutung |
|
||||
| --------------- | -------------------- |
|
||||
| `A[Text]` | Rechteck (Prozess) |
|
||||
| `A((Text))` | Kreis (Start/Ende) |
|
||||
| `A{Bedingung?}` | Raute (Entscheidung) |
|
||||
| `A>"Text"]` | Subprozess |
|
||||
| `A["Text"]` | Textblock |
|
||||
|
||||
**Verbindungen:**
|
||||
|
||||
- `A --> B` → gerichteter Pfeil
|
||||
- `A -- Text --> B` → beschrifteter Pfeil
|
||||
- `A -.-> B` → gestrichelte Linie
|
||||
- `A ===> B` → dicker Pfeil
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
#### ➖ Klassendiagramm (`classDiagram`)
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
classDiagram
|
||||
class Fahrzeug {
|
||||
+String marke
|
||||
+fahre()
|
||||
}
|
||||
class Auto {
|
||||
+int tueranzahl
|
||||
}
|
||||
Fahrzeug <|-- Auto
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class Fahrzeug {
|
||||
+String marke
|
||||
+fahre()
|
||||
}
|
||||
class Auto {
|
||||
+int tueranzahl
|
||||
}
|
||||
Fahrzeug <|-- Auto
|
||||
```
|
||||
|
||||
**Beziehungen:**
|
||||
|
||||
- `<|--` → Vererbung
|
||||
- `*--` → Komposition
|
||||
- `o--` → Aggregation
|
||||
- `--` → Assoziation
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
#### ➖ Zustandsdiagramm (`stateDiagram`)
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
stateDiagram-v2
|
||||
[*] --> Wartend
|
||||
Wartend --> Aktiv : start()
|
||||
Aktiv --> Wartend : stop()
|
||||
Aktiv --> [*]
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
stateDiagram-v2
|
||||
[*] --> Wartend
|
||||
Wartend --> Aktiv : start()
|
||||
Aktiv --> Wartend : stop()
|
||||
Aktiv --> [*]
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
#### ➖ Entscheidungsdiagramm (`flowchart` mit Bedingungen)
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
A{Ist x > 10?}
|
||||
A -- Ja --> B[Ausgabe: Groß]
|
||||
A -- Nein --> C[Ausgabe: Klein]
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
A{Ist x > 10?}
|
||||
A -- Ja --> B[Ausgabe: Groß]
|
||||
A -- Nein --> C[Ausgabe: Klein]
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
#### ➖ Subgraphen (z. B. Module, Gruppen)
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
subgraph ModulA
|
||||
A1 --> A2
|
||||
end
|
||||
subgraph ModulB
|
||||
B1 --> B2
|
||||
end
|
||||
A2 --> B1
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
subgraph ModulA
|
||||
A1 --> A2
|
||||
end
|
||||
subgraph ModulB
|
||||
B1 --> B2
|
||||
end
|
||||
A2 --> B1
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
#### ➖ Weitere: Gantt-, Pie- & ER-Diagramme
|
||||
|
||||
- `gantt` für Zeitplanung
|
||||
- `pie` für Verhältnisdarstellungen
|
||||
- `erDiagram` für Entitäten & Datenbanken
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Erklärung
|
||||
|
||||
- **Start** → Initialisierung
|
||||
- **Schleife** prüft, ob noch Elemente vorhanden sind
|
||||
- Wenn **Nein**, wird das nächste Element geholt und aufaddiert
|
||||
- Wenn **Ja**, wird die Schleife beendet und `summe` zurückgegeben
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Visualisierung/ Rendering
|
||||
|
||||
- [x] **<https://mermaid.live>**
|
||||
- Vollständig browserbasiert, keine Installation
|
||||
- Sofortige Vorschau
|
||||
- Export als PNG, SVG, PDF
|
||||
- Speichern & Teilen von Diagrammen
|
||||
- [x] **Eingebettet in HTML**
|
||||
- Die Datei [`demo.html`](demo.html) zeigt wie dies erfolgen könnte.
|
||||
- [x] **In VS-Code** (nur lokal)
|
||||
- 📦 „**Markdown Preview Mermaid Support**" (Autor: bierner oder vhatpal)
|
||||
Damit kannst du in Markdown-Dateien Mermaid-Diagramme live in der Vorschau anzeigen lassen:
|
||||
Öffne .md-Datei
|
||||
> `Ctrl+Shift+V` oder rechtsklick → Markdown-Vorschau öffnen
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Gängige Symbole (Unicode sicher)
|
||||
|
||||
| Symbol | Bedeutung |
|
||||
| ------ | ---------------- |
|
||||
| ⚙ | Prozess |
|
||||
| ✔ | Erfolgreich |
|
||||
| ✖ | Fehler / Abbruch |
|
||||
| ℹ | Info / Hinweis |
|
||||
| ⏳ | Warten / Delay |
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart LR
|
||||
Start((⚙ Start))
|
||||
Prozess1[✔ OK]
|
||||
Fehler[✖ Fehler]
|
||||
Start --> Prozess1 --> Fehler
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
Start((⚙ Start))
|
||||
Prozess1[✔ OK]
|
||||
Fehler[✖ Fehler]
|
||||
Start --> Prozess1 --> Fehler
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Diagramm-Layout und Styling-Optionen
|
||||
|
||||
Mermaid erlaubt die **Anpassung von Farben, Fonts, Ausrichtung und Stilen** über einfache Inline-Befehle:
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Start([Gestylter Start])
|
||||
style Start fill:#f9f,stroke:#333,stroke-width:2px
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Start([Gestylter Start])
|
||||
style Start fill:#f9f,stroke:#333,stroke-width:2px
|
||||
```
|
||||
|
||||
### Mermaid `style`-Eigenschaften (Übersicht)
|
||||
|
||||
| Eigenschaft | Beschreibung | Beispiel |
|
||||
| ------------------ | ------------------------------------- | ----------------------- |
|
||||
| `fill` | Hintergrundfarbe | `fill:#f9f` |
|
||||
| `stroke` | Rahmenfarbe | `stroke:#333` |
|
||||
| `stroke-width` | Rahmenstärke | `stroke-width:2px` |
|
||||
| `color` | Textfarbe | `color:#000000` |
|
||||
| `font-size` | Schriftgröße | `font-size:14px` |
|
||||
| `font-family` | Schriftart | `font-family:monospace` |
|
||||
| `font-weight` | Schriftstil (z. B. `bold`, `normal`) | `font-weight:bold` |
|
||||
| `background-color` | Alternativ zu `fill` (seltener nötig) | `background-color:#eee` |
|
||||
| `opacity` | Transparenz (0 bis 1) | `opacity:0.8` |
|
||||
| `text-align` | Textausrichtung innerhalb des Knotens | `text-align:center` |
|
||||
| `rx`, `ry` | Rundung der Ecken | `rx:10`, `ry:10` |
|
||||
|
||||
### Beispiel mit mehreren Eigenschaften
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Wichtig([⚠ Kritischer Pfad])
|
||||
style Wichtig fill:#ffe6e6,stroke:#cc0000,stroke-width:2px,color:#000,font-weight:bold
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Wichtig([⚠ Kritischer Pfad])
|
||||
style Wichtig fill:#ffe6e6,stroke:#cc0000,stroke-width:2px,color:#000,font-weight:bold
|
||||
```
|
||||
|
||||
**🔧 Hinweis:**
|
||||
|
||||
- Die style-Anweisung wirkt nur auf den genannten Knoten (`style <ID>` ...)
|
||||
- Du kannst mehrere style-Zeilen einfügen
|
||||
- Unterstützt nur Grundwerte, kein CSS-Selektor, kein hover, keine Klassen
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Interaktive Features & Erweiterte Syntax
|
||||
|
||||
Mermaid erlaubt einfache Interaktionen direkt im Diagramm. Besonders hilfreich für Dokumentationen, Präsentationen oder klickbare Projektübersichten.
|
||||
|
||||
---
|
||||
|
||||
### ➖ Klickbare Knoten
|
||||
|
||||
**Du kannst Knoten interaktiv machen, indem du sie mit Links versiehst:**
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Info([ℹ Dokumentation])
|
||||
click Info "https://example.com/doku" "Mehr zur Doku"
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Info([ℹ Dokumentation])
|
||||
click Info "https://example.com/doku" "Mehr zur Doku"
|
||||
```
|
||||
|
||||
> **Hinweis:** Das funktioniert nur in Umgebungen, die `click` unterstützen (z. B. HTML-Embedding oder Mermaid Live Editor, nicht in GitHub-Rendern).
|
||||
|
||||
---
|
||||
|
||||
### ➖ Tooltip mit `click` kombinieren
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Hilfe([ℹ Hilfe anzeigen])
|
||||
click Hilfe "https://example.com/hilfe" "Öffnet die Hilfeseite"
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Hilfe([ℹ Hilfe anzeigen])
|
||||
click Hilfe "https://example.com/hilfe" "Öffnet die Hilfeseite"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Ankerpunkte / Subgraph-Steuerung
|
||||
|
||||
**Subgraphen lassen sich interaktiv strukturieren – z. B. als Module oder Zuständigkeiten:**
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TB
|
||||
subgraph Backend [Backend-Systeme]
|
||||
DB[(PostgreSQL DB)]
|
||||
API[REST API]
|
||||
end
|
||||
|
||||
subgraph Frontend [Client]
|
||||
UI[Benutzeroberfläche]
|
||||
end
|
||||
|
||||
UI --> API --> DB
|
||||
click UI "https://frontend.example.com" "Zur Benutzeroberfläche"
|
||||
click DB "https://db-docs.example.com" "DB-Doku"
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TB
|
||||
subgraph Backend [Backend-Systeme]
|
||||
DB[(PostgreSQL DB)]
|
||||
API[REST API]
|
||||
end
|
||||
|
||||
subgraph Frontend [Client]
|
||||
UI[Benutzeroberfläche]
|
||||
end
|
||||
|
||||
UI --> API --> DB
|
||||
click UI "https://frontend.example.com" "Zur Benutzeroberfläche"
|
||||
click DB "https://db-docs.example.com" "DB-Doku"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Weitere Optionen
|
||||
|
||||
| Funktion | Beschreibung | Beispiel |
|
||||
|--------------|--------------------------------------|--------------------------------------------------------|
|
||||
| `click` | Knoten klickbar machen | `click ID "https://..." "Tooltip"` |
|
||||
| `tooltip` | Tooltip anzeigen (oft via `click`) | Bestandteil von `click`, kein eigener Befehl |
|
||||
| `linkStyle` | Stil für Link-Linien setzen | `linkStyle 0 stroke:#f66,stroke-width:2px` |
|
||||
| `subgraph` | Gruppe von Elementen darstellen | `subgraph Name` … `end` |
|
||||
| `style` | Styling eines Knotens | `style KnotenID fill:#eee,stroke:#000` |
|
||||
|
||||
---
|
||||
|
||||
### ➖ Anmerkungen
|
||||
|
||||
- In Markdown-Dokumenten (z. B. GitHub READMEs) **funktionieren `click`-Links meist nicht**, da Mermaid dort ohne JS läuft.
|
||||
- Für interaktive Versionen → HTML exportieren oder Mermaid Live Editor nutzen.
|
||||
- Tooltips erscheinen nur bei aktiver `click`-Anweisung.
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Testing-Setup & CI-Integration
|
||||
|
||||
Mermaid-Diagramme lassen sich auch automatisiert rendern und testen – z. B. in **Build-Skripten**, **Makefiles** oder **CI/CD-Pipelines**. Das ist nützlich, wenn du aus `.mmd`-Quelldateien automatisch **SVGs** oder **PNGs** generieren willst.
|
||||
|
||||
---
|
||||
|
||||
### ➖ Mermaid CLI (`@mermaid-js/mermaid-cli`)
|
||||
|
||||
Das offizielle Node.js-Tool heißt `mmdc` und kann über `npm` installiert werden:
|
||||
|
||||
```bash
|
||||
npm install -g @mermaid-js/mermaid-cli
|
||||
```
|
||||
|
||||
Danach kannst du eine `.mmd`-Quelldatei rendern:
|
||||
|
||||
```bash
|
||||
mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Beispiel: Einfache .mmd-Datei
|
||||
|
||||
**`diagram.mmd`**:
|
||||
|
||||
```plaintext
|
||||
flowchart TD
|
||||
A[Start] --> B[Ende]
|
||||
```
|
||||
|
||||
**Exportbefehl:**
|
||||
|
||||
```bash
|
||||
mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Typische Optionen
|
||||
|
||||
| Option | Bedeutung |
|
||||
|----------------|------------------------------------------|
|
||||
| `-i` | Eingabedatei (.mmd) |
|
||||
| `-o` | Ausgabedatei (SVG, PNG, PDF möglich) |
|
||||
| `-t default` | Theme: `default`, `dark`, `neutral`, `forest` |
|
||||
| `--width` | Breite des Diagramms |
|
||||
| `--scale` | Skalierung (z. B. für PDF-Ausgabe) |
|
||||
|
||||
---
|
||||
|
||||
### ➖ Automatisierung mit Makefile
|
||||
|
||||
```makefile
|
||||
diagram.svg: diagram.mmd
|
||||
mmdc -i diagram.mmd -o diagram.svg -t dark
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ CI-Beispiel (GitHub Actions)
|
||||
|
||||
```yaml
|
||||
name: Mermaid Build
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- run: npm install -g @mermaid-js/mermaid-cli
|
||||
- run: mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 📌 Hinweis
|
||||
|
||||
- Mermaid CLI nutzt **Puppeteer (Headless Chromium)**, daher ggf. zusätzliche Abhängigkeiten im CI-System notwendig
|
||||
- Mermaid CLI rendert **keine eingebetteten Diagramme** in Markdown – nur `.mmd`-Dateien!
|
||||
|
||||
**Empfohlene Struktur im Projekt:**
|
||||
|
||||
```plaintext
|
||||
docs/
|
||||
diagrams/
|
||||
main.mmd
|
||||
main.svg
|
||||
Makefile
|
||||
README.md
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Diagramm-Export / Automatisierung
|
||||
|
||||
Mermaid-Diagramme lassen sich automatisch aus Quelltext-Dateien exportieren – ideal für Skripte, Build-Systeme oder CI/CD-Pipelines.
|
||||
|
||||
---
|
||||
|
||||
### ➖ Export mit Mermaid CLI
|
||||
|
||||
Die **offizielle Mermaid CLI** (`@mermaid-js/mermaid-cli`) erlaubt den Export von `.mmd`-Quelldateien in verschiedene Formate:
|
||||
|
||||
```bash
|
||||
mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Installation
|
||||
|
||||
Installieren über npm:
|
||||
|
||||
```bash
|
||||
npm install -g @mermaid-js/mermaid-cli
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🛠 Typische Optionen
|
||||
|
||||
| Option | Bedeutung |
|
||||
|--------------------|--------------------------------------------|
|
||||
| `-i` | Eingabedatei (`.mmd`) |
|
||||
| `-o` | Ausgabedatei (`.svg`, `.png`, `.pdf`) |
|
||||
| `-t dark` | Theme (`default`, `dark`, `forest`, `neutral`) |
|
||||
| `--scale` | Skalierung der Ausgabe (z. B. `--scale 2`) |
|
||||
| `--width`, `--height` | Feste Größenangabe |
|
||||
|
||||
---
|
||||
|
||||
### ➖ Beispiel: SVG aus `.mmd` erzeugen
|
||||
|
||||
**Datei `ablauf.mmd`:**
|
||||
|
||||
```plaintext
|
||||
flowchart TD
|
||||
Start --> Verarbeitung --> Ende
|
||||
```
|
||||
|
||||
**Exportbefehl:**
|
||||
|
||||
```bash
|
||||
mmdc -i ablauf.mmd -o ablauf.svg -t default
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Struktur im Projekt
|
||||
|
||||
Empfohlene Projektstruktur:
|
||||
|
||||
```plaintext
|
||||
docs/
|
||||
diagrams/
|
||||
diagram.mmd
|
||||
diagram.svg
|
||||
Makefile
|
||||
README.md
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Makefile-Beispiel
|
||||
|
||||
```makefile
|
||||
diagram.svg: diagram.mmd
|
||||
mmdc -i diagram.mmd -o diagram.svg -t dark
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ GitHub Actions-Beispiel
|
||||
|
||||
```yaml
|
||||
name: Mermaid-Diagramm-Export
|
||||
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- run: npm install -g @mermaid-js/mermaid-cli
|
||||
- run: mmdc -i diagram.mmd -o diagram.svg -t forest
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### ➖ Hinweise
|
||||
|
||||
- Mermaid CLI basiert auf Puppeteer (Headless Chrome) → CI-Systeme benötigen ggf. zusätzliche Abhängigkeiten
|
||||
- Nur `.mmd`-Dateien werden unterstützt – kein Inline-Markdown
|
||||
- Ideal für automatisierten SVG-Export für Dokumentation oder statische Webseiten
|
||||
|
||||
---
|
||||
|
||||
## ➖ Template & Projektintegration
|
||||
|
||||
**Ein Mini-Template als Startpunkt für neue Projekte:**
|
||||
|
||||
## ➖ Ablauf
|
||||
|
||||
**Code:**
|
||||
|
||||
```plaintext (mermaid)
|
||||
flowchart TD
|
||||
Init((Start))
|
||||
Task1[Prozess 1]
|
||||
Task2[Prozess 2]
|
||||
Done((Fertig))
|
||||
Init --> Task1 --> Task2 --> Done
|
||||
```
|
||||
|
||||
**Ausgabe:**
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Init((Start))
|
||||
Task1[Prozess 1]
|
||||
Task2[Prozess 2]
|
||||
Done((Fertig))
|
||||
Init --> Task1 --> Task2 --> Done
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## 🛠 Tools
|
||||
|
||||
| Tool | Vorschau | Markdown-kompatibel | Bemerkung |
|
||||
| ------------------------------------ | -------- | ------------------- | -------------------------------- |
|
||||
| [mermaid.live](https://mermaid.live) | ✔ | ✔ | Online-Editor |
|
||||
| VS Code + Plugin | ✔ | ✔ | Markdown Preview Mermaid Support |
|
||||
| GitHub README | ✔ | ✔ | nur in Repos |
|
||||
| mkdocs-material | ✔ | ✔ | für Doku-Webseiten |
|
||||
|
||||
### Links
|
||||
|
||||
- Mermaid auf GitHub <https://github.com/mermaid-js/>
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ✏️ Notizen bei Erstellung dieses Dokuments
|
||||
|
||||
> `extensions.json` erstellt mit `code --list-extensions > extensions.txt`
|
||||
|
||||
Hier ist ein **deutschsprachiges Mermaid Cheat Sheet** mit den wichtigsten Diagrammtypen, Syntaxelementen und Beispielen – vollständig in Markdown, damit du es direkt in deine Projekte einbinden kannst.
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
|
||||
---
|
||||
65
template.md
Normal file
65
template.md
Normal file
@ -0,0 +1,65 @@
|
||||
## ➖ Projektvorlage
|
||||
|
||||
Ein wiederverwendbares Grundgerüst für Mermaid-Diagramme in Projekten – ideal für schnelle Abläufe, Prozessbeschreibungen oder Dokumentationsmodule.
|
||||
|
||||
---
|
||||
|
||||
### 🧩 Beispiel für ein einfaches Ablaufdiagramm
|
||||
|
||||
```mermaid
|
||||
flowchart TD
|
||||
Init((Start))
|
||||
Schritt1[⏳ Prozessschritt 1]
|
||||
Schritt2[⚙ Verarbeitung]
|
||||
Ergebnis{Erfolg?}
|
||||
Positiv[✔ Erfolgreich]
|
||||
Negativ[✖ Fehler]
|
||||
Fertig((Fertig))
|
||||
|
||||
Init --> Schritt1 --> Schritt2 --> Ergebnis
|
||||
Ergebnis -- Ja --> Positiv --> Fertig
|
||||
Ergebnis -- Nein --> Negativ --> Fertig
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 📁 Ordnerstruktur-Vorschlag
|
||||
|
||||
```
|
||||
docs/
|
||||
diagrams/
|
||||
main.mmd # Mermaid-Quelldatei
|
||||
main.svg # Exportiertes Diagramm
|
||||
README.md # Referenz auf das Diagramm
|
||||
Makefile # Automatisierter Export
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🛠 Makefile-Snippet für automatische Generierung
|
||||
|
||||
```makefile
|
||||
diagrams/main.svg: diagrams/main.mmd
|
||||
mmdc -i diagrams/main.mmd -o diagrams/main.svg -t neutral
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🔗 Verlinkung im README.md
|
||||
|
||||
```markdown
|
||||
## 🔍 Prozessübersicht
|
||||
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 📌 Empfehlung
|
||||
|
||||
- Diagramme als `.mmd` separat pflegen – kein Inline-Markdown
|
||||
- Automatisch als `.svg` oder `.png` exportieren
|
||||
- Diagramme per Git versionieren
|
||||
- In CI/CD-Pipeline oder Build-System integrieren
|
||||
|
||||
---
|
||||
Loading…
x
Reference in New Issue
Block a user