wip - in Bearbeitung
This commit is contained in:
parent
b8f464fc4a
commit
1320328b58
12
.vscode/extensions.json
vendored
12
.vscode/extensions.json
vendored
@ -1,9 +1,9 @@
|
||||
{
|
||||
// Diese Erweiterungen werden empfohlen, wenn das Projekt geöffnet wird
|
||||
"recommendations": [
|
||||
"davidanson.vscode-markdownlint",
|
||||
"mhutchie.git-graph",
|
||||
"ms-ceintl.vscode-language-pack-de",
|
||||
"tomoki1207.pdf",
|
||||
"yzhang.markdown-all-in-one"
|
||||
]
|
||||
],
|
||||
|
||||
// Optional: Erweiterungen, die eher nicht genutzt werden sollten
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
|
||||
BIN
.vscode/extensions.txt
vendored
BIN
.vscode/extensions.txt
vendored
Binary file not shown.
13
.vscode/launch.json
vendored
13
.vscode/launch.json
vendored
@ -0,0 +1,13 @@
|
||||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"name": "Start index.js",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"program": "${workspaceFolder}/src/index.js"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
14
.vscode/settings.json
vendored
Normal file
14
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"eslint.validate": ["javascript", "typescript"],
|
||||
"files.eol": "\n",
|
||||
"files.exclude": {
|
||||
"**/node_modules": true
|
||||
},
|
||||
"javascript.updateImportsOnFileMove.enabled": "always",
|
||||
"typescript.updateImportsOnFileMove.enabled": "always"
|
||||
}
|
||||
|
||||
1000
build/mermaid.html
Normal file
1000
build/mermaid.html
Normal file
File diff suppressed because it is too large
Load Diff
BIN
build/mermaid.pdf
Normal file
BIN
build/mermaid.pdf
Normal file
Binary file not shown.
@ -69,7 +69,7 @@
|
||||
- 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**
|
||||
- Unterstützt **Versionierung**, **Code-first-Dokumentation** und ist vollständig **plattformunabhängig**
|
||||
|
||||
---
|
||||
|
||||
@ -110,7 +110,7 @@ flowchart TD
|
||||
Entscheidung -- Nein --> Aktion2 --> Ende
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -163,7 +163,7 @@ flowchart TD
|
||||
Schleife -- Ja --> Ende
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -225,7 +225,7 @@ flowchart TD
|
||||
- `A -.-> B` → gestrichelte Linie
|
||||
- `A ===> B` → dicker Pfeil
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -266,7 +266,7 @@ classDiagram
|
||||
- `o--` → Aggregation
|
||||
- `--` → Assoziation
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -292,7 +292,7 @@ stateDiagram-v2
|
||||
Aktiv --> [*]
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -316,7 +316,7 @@ flowchart TD
|
||||
A -- Nein --> C[Ausgabe: Klein]
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -348,7 +348,7 @@ flowchart TD
|
||||
A2 --> B1
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -358,7 +358,7 @@ flowchart TD
|
||||
- `pie` für Verhältnisdarstellungen
|
||||
- `erDiagram` für Entitäten & Datenbanken
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -369,7 +369,7 @@ flowchart TD
|
||||
- Wenn **Nein**, wird das nächste Element geholt und aufaddiert
|
||||
- Wenn **Ja**, wird die Schleife beendet und `summe` zurückgegeben
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -388,7 +388,7 @@ flowchart TD
|
||||
Öffne .md-Datei
|
||||
> `Ctrl+Shift+V` oder rechtsklick → Markdown-Vorschau öffnen
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -420,7 +420,7 @@ flowchart LR
|
||||
Start --> Prozess1 --> Fehler
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -460,6 +460,10 @@ flowchart TD
|
||||
| `text-align` | Textausrichtung innerhalb des Knotens | `text-align:center` |
|
||||
| `rx`, `ry` | Rundung der Ecken | `rx:10`, `ry:10` |
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### Beispiel mit mehreren Eigenschaften
|
||||
|
||||
**Code:**
|
||||
@ -484,7 +488,7 @@ flowchart TD
|
||||
- Du kannst mehrere style-Zeilen einfügen
|
||||
- Unterstützt nur Grundwerte, kein CSS-Selektor, kein hover, keine Klassen
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -492,6 +496,8 @@ flowchart TD
|
||||
|
||||
Mermaid erlaubt einfache Interaktionen direkt im Diagramm. Besonders hilfreich für Dokumentationen, Präsentationen oder klickbare Projektübersichten.
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Klickbare Knoten
|
||||
@ -516,6 +522,8 @@ flowchart TD
|
||||
|
||||
> **Hinweis:** Das funktioniert nur in Umgebungen, die `click` unterstützen (z. B. HTML-Embedding oder Mermaid Live Editor, nicht in GitHub-Rendern).
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Tooltip mit `click` kombinieren
|
||||
@ -536,6 +544,8 @@ flowchart TD
|
||||
click Hilfe "https://example.com/hilfe" "Öffnet die Hilfeseite"
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Ankerpunkte / Subgraph-Steuerung
|
||||
@ -578,6 +588,8 @@ flowchart TB
|
||||
click DB "https://db-docs.example.com" "DB-Doku"
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Weitere Optionen
|
||||
@ -598,7 +610,7 @@ flowchart TB
|
||||
- Für interaktive Versionen → HTML exportieren oder Mermaid Live Editor nutzen.
|
||||
- Tooltips erscheinen nur bei aktiver `click`-Anweisung.
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -606,6 +618,8 @@ flowchart TB
|
||||
|
||||
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.
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Mermaid CLI (`@mermaid-js/mermaid-cli`)
|
||||
@ -622,6 +636,8 @@ Danach kannst du eine `.mmd`-Quelldatei rendern:
|
||||
mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Beispiel: Einfache .mmd-Datei
|
||||
@ -651,6 +667,8 @@ mmdc -i diagram.mmd -o diagram.svg
|
||||
| `--width` | Breite des Diagramms |
|
||||
| `--scale` | Skalierung (z. B. für PDF-Ausgabe) |
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Automatisierung mit Makefile
|
||||
@ -660,6 +678,8 @@ diagram.svg: diagram.mmd
|
||||
mmdc -i diagram.mmd -o diagram.svg -t dark
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ CI-Beispiel (GitHub Actions)
|
||||
@ -678,6 +698,8 @@ jobs:
|
||||
- run: mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### 📌 Hinweis
|
||||
@ -696,7 +718,7 @@ Makefile
|
||||
README.md
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -714,6 +736,8 @@ Die **offizielle Mermaid CLI** (`@mermaid-js/mermaid-cli`) erlaubt den Export vo
|
||||
mmdc -i diagram.mmd -o diagram.svg
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Installation
|
||||
@ -724,6 +748,8 @@ Installieren über npm:
|
||||
npm install -g @mermaid-js/mermaid-cli
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### 🛠 Typische Optionen
|
||||
@ -736,6 +762,8 @@ npm install -g @mermaid-js/mermaid-cli
|
||||
| `--scale` | Skalierung der Ausgabe (z. B. `--scale 2`) |
|
||||
| `--width`, `--height` | Feste Größenangabe |
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Beispiel: SVG aus `.mmd` erzeugen
|
||||
@ -768,6 +796,8 @@ Makefile
|
||||
README.md
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Makefile-Beispiel
|
||||
@ -795,6 +825,8 @@ jobs:
|
||||
- run: mmdc -i diagram.mmd -o diagram.svg -t forest
|
||||
```
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
### ➖ Hinweise
|
||||
@ -803,6 +835,8 @@ jobs:
|
||||
- Nur `.mmd`-Dateien werden unterstützt – kein Inline-Markdown
|
||||
- Ideal für automatisierten SVG-Export für Dokumentation oder statische Webseiten
|
||||
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
## ➖ Template & Projektintegration
|
||||
@ -833,7 +867,7 @@ flowchart TD
|
||||
Init --> Task1 --> Task2 --> Done
|
||||
```
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -850,7 +884,7 @@ flowchart TD
|
||||
|
||||
- Mermaid auf GitHub <https://github.com/mermaid-js/>
|
||||
|
||||
[⚓ Inhalt](#-inhalt)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
|
||||
@ -860,6 +894,6 @@ flowchart TD
|
||||
|
||||
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)
|
||||
[⚓](#-inhalt)
|
||||
|
||||
---
|
||||
1
pandoc/pandoc-toolkit.txt
Normal file
1
pandoc/pandoc-toolkit.txt
Normal file
@ -0,0 +1 @@
|
||||
pandoc index.md -o ./build/mermaid.html --standalone --toc --metadata pagetitle="Mermaid Pocket Guide" --template=mermaid.html
|
||||
19
pandoc/template/mermaid.html
Normal file
19
pandoc/template/mermaid.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>$title$</title>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
|
||||
<script>
|
||||
mermaid.initialize({ startOnLoad: true });
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
$body$
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user