Mermaid-Diagramm-Rendering mit beautiful-mermaid
Rendert Mermaid .mmd-Dateien in gestaltete SVGs mit beautiful-mermaid v1.0.2 und bun.
Fähigkeitsinhalte
| Datei | Zweck |
|---|---|
render-mermaid.ts | CLI-Tool: rendert .mmd-Dateien in SVG |
gemini-diagram-prompt.md | Prompt für die Gemini-Bilderzeugung |
Installation
Nur bun ist erforderlich. Die beautiful-mermaid-Abhängigkeit wird von bun beim ersten Start automatisch installiert.
# macOS
brew install oven-sh/bun/bun
# Oder universeller Installer
curl -fsSL https://bun.sh/install | bash
CLI-Referenz
render-mermaid — Rendert Mermaid .mmd-Dateien in thematisierte SVGs
Verwendung:
bun run render-mermaid.ts [Optionen] <Eingabe.mmd...>
echo 'graph TD; A-->B' | bun run render-mermaid.ts -o ausgabe.svg
Optionen:
-o, --output <Datei> Ausgabedatei (nur bei einer Eingabe)
--outdir <Verz> Ausgabeverzeichnis für mehrere Dateien
-t, --theme <Name> Theme (Standard: tokyo-night)
--list-themes Verfügbare Themes auflisten
--help Diese Hilfe anzeigen
Standardausgabe: Ohne -o oder --outdir wird <Name>.svg neben jeder Eingabedatei geschrieben. (-d wird von bun run verschluckt; verwenden Sie --outdir.)
Kurzform: Setzen Sie MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts für kürzere Befehle.
Beispiele
MERMAID=plugins/autorun/skills/mermaid-diagrams/render-mermaid.ts
# Einzelne Datei rendern (Ausgabe neben der Eingabe)
bun run $MERMAID diagramm.mmd
# Rendern in eine bestimmte Ausgabedatei
bun run $MERMAID diagramm.mmd -o schoen.svg
# Alle .mmd-Dateien in ein Ausgabeverzeichnis rendern
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams
# Anderes Theme
bun run $MERMAID -t dracula diagramm.mmd
# Eingabe über Pipe
$ echo 'graph TD; A-->B-->C' | bun run $MERMAID -o schnell.svg
# Themes auflisten
bun run $MERMAID --list-themes
Projektdiagramme
Mermaid-Quelldateien (.mmd) und gerenderte Ausgaben (.svg) befinden sich in docs/diagrams/, zusätzlich eine Quelldatei im Repository-Stammverzeichnis:
| Quelle | Beschreibung |
|---|---|
docs/diagrams/autofile-policy.mmd | AutoFile-Richtlinien-Flussdiagramm |
docs/diagrams/three-stage-autorun.mmd | Drei-Stufen-Autorun-Flussdiagramm |
autorun-architecture.mmd | Gesamtarchitektur (zu komplex für beautiful-mermaid) |
Neu generieren:
bun run $MERMAID docs/diagrams/*.mmd --outdir docs/diagrams
Bekannte Einschränkungen
- Komplexe Diagramme mit tief verschachtelten Subgraphen können auf Layout-Bugs von dagre stoßen. Fehlgeschlagene Diagramme werden gemeldet, blockieren aber nicht andere Renderings.
%%{init:...}%%-Frontmatter wird automatisch entfernt (beautiful-mermaid wendet sein eigenes Theming an).
<image_generation>
Gemini-Bilderzeugung
gemini-diagram-prompt.md enthält einen Prompt für Gemini zur Erstellung eines ergebnisorientierten Projektübersichtsbildes. Kopieren Sie den Prompt in eine Gemini-Unterhaltung.
</image_generation>