Was macht mermaid-claude-code-skill?
Generieren, validieren, konvertieren und rendern Sie Mermaid-Diagramme in Claude Code und ZCode
Beschreibung
Mit diesem Skill können Sie Mermaid-Diagramme direkt in Ihrer KI-gestützten Entwicklungsumgebung bearbeiten. Sie können Diagramme aus natürlicher Sprache generieren, ihre Syntax validieren, in verschiedene Formate konvertieren und sie sogar direkt im Chat rendern.
Verwendung
Voraussetzungen
- Mermaid CLI installiert:
npm install -g @mermaid-js/mermaid-cli - Playwright-Browser zum Rendern:
npx playwright install chromium
Befehle
Diagramm generieren
/generate-diagram [Beschreibung des Diagramms]
Beispiel:
/generate-diagram Erstelle ein Flussdiagramm, das den Anmeldevorgang zeigt.
Diagramm validieren
/validate-diagram [Mermaid-Code]
Beispiel:
/validate-diagram graph TD; A-->B; B-->C;
Diagramm konvertieren
/convert-diagram [Dateipfad] [Format]
Unterstützte Formate: png, svg, pdf
Beispiel:
/convert-diagram diagram.mermaid png
Diagramm rendern
/render-diagram [Mermaid-Code]
Beispiel:
/render-diagram graph TD; A[Start] --> B{Entscheidung}; B -->|Ja| C[Ende]; B -->|Nein| D[Wiederhole];
Funktionsweise
Das Skill verwendet die Mermaid CLI (mmdc), um Diagramme zu validieren, zu konvertieren und zu rendern. Es kann Diagrammdefinitionen aus natürlicher Sprache mithilfe des lokalen LLM generieren oder vorhandenen Mermaid-Code verarbeiten.
Unterstützte Plattformen
- Claude Code
- ZCode