# Meerjungfrau-Architekt: Diagramm- & Dokumentationsfähigkeit > Erstellen Sie umfassende Meerjungfrau-Diagramme und Designdokumente mit intelligenter Orchestrierung, Code-zu-Diagramm-Konvertierung und Python-Dienstprogrammen. Beginnen Sie in Sekunden mit der Erstellung detaillierter technischer Dokumentation. - Canonical: https://nanoskill.ai/de/skills/mermaid-agent-skill - Markdown: https://nanoskill.ai/de/skills/mermaid-agent-skill.md - Author: SpillwaveSolutions - Published: 2026-05-26T01:25:42.765Z - Updated: 2026-07-19T03:48:37.206Z - Language: de - Source type: github - Popularity signal: 66 ## Sources - https://github.com/spillwavesolutions/design-doc-mermaid ## Install ```shell npx skills add https://github.com/spillwavesolutions/design-doc-mermaid ``` ## About Die Meerjungfrau-Architekt-Fähigkeit befähigt Entwickler, Architekten und technische Redakteure, umfassende Meerjungfrau-Diagramme und Designdokumente effizient zu erstellen und zu verwalten. Durch die Nutzung intelligenter Orchestrierung und bedarfsgesteuertem Leitfadenladen rationalisiert diese Fähigkeit die Visualisierung komplexer Systeme, Arbeitsabläufe und Codestrukturen. Sie hilft Benutzern, genaue und visuell ansprechende Diagramme zu erstellen, um eine klare Kommunikation und eine aktuelle Dokumentation sicherzustellen. Diese leistungsstarke Claude-Code-Fähigkeit bietet erweiterte Funktionen wie die Generierung von Code-zu-Diagramm, mit der Sie architektonische Einblicke direkt aus Ihren Spring Boot- oder FastAPI-Anwendungen extrahieren können. Sie enthält auch eine umfangreiche Sammlung von Python-Dienstprogrammen zum Extrahieren, Validieren und Konvertieren von Meerjungfrau-Diagrammen in Bildformate, was die Integration in bestehende Dokumentationsworkflows und -tools wie Confluence erleichtert. Das hierarchische System gewährleistet eine effiziente Token-Nutzung und schnelle Reaktionszeiten und bietet eine nahtlose Erfahrung. Ob Sie eine API dokumentieren, eine Systemarchitektur visualisieren oder einen Geschäftsprozess veranschaulichen müssen, der Meerjungfrau-Architekt bietet die Werkzeuge und Vorlagen, um die Aufgabe zu erledigen. Mit Unterstützung für verschiedene Diagrammtypen, semantische Unicode-Symbole und kontrastreiches Styling sind Ihre Diagramme sowohl informativ als auch zugänglich. Die Fähigkeit bietet außerdem einen strukturierten Lernpfad und Beispiele, um Benutzern zu helfen, schnell die Erstellung detaillierter technischer Dokumentation zu beherrschen. ## Key features - **Intelligente Diagrammerstellung**: Erstellen Sie verschiedene Mermaid-Diagramme, einschließlich Aktivitäts-, Bereitstellungs-, Architektur- und Sequenzdiagrammen, für Workflows, Infrastrukturen, Systemkomponenten und API-Abläufe. - **Code-zu-Diagramm-Konvertierung**: Generieren Sie automatisch Diagramme aus vorhandenen Codebasen (z. B. Spring Boot, FastAPI) oder Konfigurationsdateien, um Architektur, Bereitstellungen und Sequenzabläufe zu visualisieren. - **Umfassende Designdokumenterstellung**: Erstellen Sie vollständige Designdokumente mit eingebetteten Mermaid-Diagrammen unter Verwendung vordefinierter Vorlagen für Architektur-, API-, Feature-, Datenbank- und Systemdesigns. - **Unicode-Semantiksymbole und kontrastreiche Gestaltung**: Verbessern Sie die Klarheit und Zugänglichkeit von Diagrammen mit über 100 aussagekräftigen Unicode-Symbolen und kontrastreichen Farbschemata für eine bessere Lesbarkeit. - **Python-Dienstprogramme für die Diagrammverwaltung**: Nutzen Sie Python-Skripte, um Mermaid-Diagramme zu extrahieren, zu validieren und in PNG-/SVG-Bilder zu konvertieren, mit Unterstützung für Stapelverarbeitung und Integration mit Tools wie Confluence. ## Use cases - **Softwarearchitektur visualisieren**: Entwickler und Architekten können Architektur- und Bereitstellungsdiagramme aus Code oder Konfigurationsdateien generieren, um Systemkomponenten und Infrastrukturen zu verstehen. - **API-Abläufe und Workflows dokumentieren**: Technische Redakteure und Ingenieure können detaillierte Sequenz- und Aktivitätsdiagramme erstellen, um API-Interaktionen, Geschäftsprozesse und Benutzerpfade zu veranschaulichen. - **Automatisierte Erstellung von Designdokumenten**: Teams können schnell strukturierte Designdokumente für verschiedene Zwecke (API, System, Feature) mit automatisch eingebetteten Mermaid-Diagrammen erstellen, was Zeit spart und Konsistenz gewährleistet. - **Aktuelle technische Dokumentation pflegen**: Stellen Sie sicher, dass die Dokumentation aktuell bleibt, indem Sie Diagramme direkt aus Code oder Konfiguration generieren und sie einfach in Bildformate für die gemeinsame Nutzung und Zusammenarbeit konvertieren. ## Result preview Sehen Sie Meerjungfrau-Diagramme über das System einer Lebensmittel-Lieferplattform, die von dieser Agentenfähigkeit generiert wurden. ![mermaid-architect-demo1](https://file.nanoskill.ai/mermaid-architect-demo1.jpg) ![mermaid-architect-demo-2](https://file.nanoskill.ai/mermaid-architect-demo-2.jpg) ![mermaid-architect-demo-3](https://file.nanoskill.ai/mermaid-architect-demo-3.jpg) ## Result walkthrough ### Schritt 1：Installieren Fügen Sie die Fähigkeit Ihrem Agenten hinzu. ![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg) ### Schritt 2：Beschreiben Sie einen Prozess Geben Sie einen Workflow, ein System oder eine Sequenz ein, die Sie visualisieren möchten. ![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg) ### Schritt 3：Ergebnis überprüfen Erhalten Sie Meerjungfrau-Diagramme, die basierend auf Ihrer Prozessbeschreibung generiert wurden. ![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg) ## Skill definition # Mermaid Architect - Umfassende Diagramm- & Dokumentationsfähigkeit **Version 2.0** - Hierarchische Architektur mit intelligenter Orchestrierung Eine leistungsstarke Claude-Code-Fähigkeit zur Erstellung von Mermaid-Diagrammen und Designdokumenten mit bedarfsgesteuertem Laden von Leitfäden, Code-zu-Diagramm-Generierung und Python-Dienstprogrammen. ## Installation ### Ein-Klick-Installation über den Skilz-Marktplatz Installieren Sie diese Fähigkeit sofort vom [Skilz-Marktplatz](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/): ```bash skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid ``` ### Manuelle Installation Klonen Sie direkt in Ihr Claude-Code-Fähigkeiten-Verzeichnis: ```bash # Navigieren Sie zu Ihrem Fähigkeiten-Verzeichnis cd ~/.claude/skills # Repository klonen git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ``` ### Installation überprüfen Überprüfen Sie nach der Installation, ob die Fähigkeit verfügbar ist: ```bash # Installierte Fähigkeiten auflisten ls ~/.claude/skills/design-doc-mermaid # Oder fragen Sie Claude Code # „Liste meine installierten Fähigkeiten auf“ ``` ## Was diese Fähigkeit macht **Intelligente Diagrammgenerierung:** - Aktivitätsdiagramme (Arbeitsabläufe, Prozesse, Geschäftslogik) - Bereitstellungsdiagramme (Cloud-Infrastruktur, K8s, serverlos) - Architekturdiagramme (Systemkomponenten, Microservices) - Sequenzdiagramme (API-Abläufe, Dienstinteraktionen) - Vollständige Designdokumente mit eingebetteten Diagrammen **Code-zu-Diagramm-Konvertierung:** - Architektur aus Spring-Boot-Anwendungen extrahieren - Bereitstellungsdiagramme aus Konfigurationsdateien generieren - Sequenzdiagramme aus Methodenaufrufen erstellen - ETL-Pipelines und Datenflüsse dokumentieren **Diagrammverwaltung:** - Mermaid-Diagramme aus Markdown-Dateien extrahieren - Diagrammsyntax mit mermaid-cli validieren - Diagramme in PNG-/SVG-Bilder konvertieren - Gesamte Verzeichnisse stapelweise verarbeiten ## Schnellstart ### Ein Aktivitätsdiagramm erstellen ``` Benutzer: „Erstelle ein Aktivitätsdiagramm für die Benutzerregistrierung mit E-Mail-Verifizierung“ ``` Die Fähigkeit wird: 1. `references/guides/diagrams/activity-diagrams.md` laden 2. Die Registrierungsmustervorlage verwenden 3. Unicode-Symbole hinzufügen (🔐 für Sicherheit, 📧 für E-Mail, ✅ für Erfolg) 4. Styling mit hohem Kontrast anwenden 5. Vollständiges Mermaid-Diagramm ausgeben ### Aus Code generieren ``` Benutzer: „Hier ist meine Spring-Boot-Anwendung.yml – generiere ein Bereitstellungsdiagramm“ ``` Die Fähigkeit wird: 1. Konfiguration analysieren (Datenquelle, Cache, Sicherheit) 2. `references/guides/diagrams/deployment-diagrams.md` laden 3. `examples/spring-boot/README.md` laden 4. Konfiguration auf Cloud-Ressourcen abbilden 5. Bereitstellungsdiagramm mit Ressourcenspezifikationen generieren ### Designdokument erstellen ``` Benutzer: „Erstelle ein API-Designdokument für die Kontakte-API“ ``` Die Fähigkeit wird: 1. `assets/api-design-template.md` laden 2. Relevante Diagrammleitfäden laden (Sequenz, ER, Architektur) 3. Vollständiges Dokument mit eingebetteten Diagrammen generieren 4. In `docs/design/api-contacts-v1-2025-01-13.md` speichern ## Struktur ### Hierarchische Organisation ``` mermaid-architect/ ├── SKILL.md # Hauptorchestrator mit Entscheidungsbaum ├── README.md # Diese Datei ├── CLAUDE.md # Claude-Code-Anweisungen │ ├── references/ # Referenzmaterialien │ ├── mermaid-diagram-guide.md # Legacy-allgemeiner Leitfaden │ └── guides/ # Spezialisierte Leitfäden (bei Bedarf geladen) │ ├── diagrams/ │ │ ├── activity-diagrams.md # ✅ Vollständig │ │ ├── deployment-diagrams.md # ✅ Vollständig │ │ ├── architecture-diagrams.md # ✅ Vollständig │ │ └── sequence-diagrams.md # ✅ Vollständig │ ├── code-to-diagram/ │ │ └── README.md # ✅ Vollständig (Hauptleitfaden) │ ├── unicode-symbols/ │ │ └── guide.md # ✅ Vollständig (100+ Symbole) │ └── troubleshooting.md # ✅ Vollständig (28 häufige Fehler) │ ├── scripts/ # Python-Dienstprogramme │ ├── extract_mermaid.py # ✅ Diagramme extrahieren & validieren │ └── mermaid_to_image.py # ✅ In PNG/SVG konvertieren │ ├── examples/ # Sprachspezifische Muster │ ├── spring-boot/ # ✅ Vollständig │ ├── fastapi/ # ✅ Vollständig │ ├── react/ # ✅ Vollständig │ ├── python-etl/ # ✅ Vollständig │ ├── node-webapp/ # ✅ Vollständig │ └── java-webapp/ # ✅ Vollständig │ └── assets/ # Designdokumentvorlagen ├── architecture-design-template.md ├── api-design-template.md ├── feature-design-template.md ├── database-design-template.md └── system-design-template.md ``` ## Hauptmerkmale ### 1. Unicode-semantische Symbole Jedes Diagramm verwendet aussagekräftige Unicode-Symbole: ```mermaid graph TB User[👤 Client] --> Gateway[🌐 API-Gateway] Gateway --> Auth[🔐 Auth-Dienst] Gateway --> API[⚙️ API-Dienst] API --> DB[(💾 Datenbank)] API --> Cache[(⚡ Redis)] API --> Queue[📬 Nachrichtenwarteschlange] Queue --> Worker[⚙️ Hintergrundarbeiter] ``` **Symbolkategorien:** - Infrastruktur: ☁️ 🌐 🔌 📡 🗄️ - Rechnen: ⚙️ ⚡ 🔄 🚀 💨 - Daten: 💾 📦 📊 📈 🗃️ - Nachrichtenübermittlung: 📨 📬 📤 📥 🐰 - Sicherheit: 🔐 🔑 🛡️ 🚪 👤 - Überwachung: 📝 📊 🚨 ⚠️ ✅ ❌ ### 2. Styling mit hohem Kontrast Alle Diagramme verwenden zugängliche, kontrastreiche Farben – siehe SKILL.md für vollständige Details. ### 3. Python-Dienstprogramme #### Diagramme extrahieren ```bash # Alle Diagramme in einer Datei auflisten python scripts/extract_mermaid.py document.md --list-only # In separate .mmd-Dateien extrahieren python scripts/extract_mermaid.py document.md --output-dir diagrams/ # Alle Diagramme validieren python scripts/extract_mermaid.py document.md --validate # Diagramme durch Bildreferenzen ersetzen (für Confluence) python scripts/extract_mermaid.py document.md --replace-with-images \ --image-format png --output-markdown output.md ``` #### In Bilder konvertieren ```bash # Einzelne Datei python scripts/mermaid_to_image.py diagram.mmd output.png # Benutzerdefiniertes Thema und Größe python scripts/mermaid_to_image.py diagram.mmd output.svg \ --theme dark --background white --width 1200 # Verzeichnis stapelweise konvertieren python scripts/mermaid_to_image.py diagrams/ output/ \ --format png --recursive # Aus Standardeingabe echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png ``` ## Anforderungen ### Für die Diagrammgenerierung - Claude-Code-Fähigkeitssystem (automatisch) - Leitfäden und Vorlagen (in dieser Fähigkeit enthalten) ### Für Validierung & Bildkonvertierung ```bash # mermaid-cli global installieren npm install -g @mermaid-js/mermaid-cli # Installation überprüfen mmdc --version ``` ### Für Python-Skripte - Python 3.7+ - Keine zusätzlichen Pakete erforderlich (verwendet nur die Standardbibliothek) ## Lernpfad ### Neu bei Mermaid-Diagrammen? 1. **Mit Aktivitätsdiagrammen beginnen** – Lesen Sie `references/guides/diagrams/activity-diagrams.md` 2. **Unicode-Symbole lernen** – Lesen Sie `references/guides/unicode-symbols/guide.md` 3. **Ein Beispiel ausprobieren** – Verwenden Sie Muster aus `examples/spring-boot/` 4. **Ihre Arbeit validieren** – Führen Sie `python scripts/extract_mermaid.py --validate` aus ### Müssen Sie vorhandenen Code dokumentieren? 1. **Framework identifizieren** – Spring Boot, FastAPI, React usw. 2. **Beispiel-Leitfaden laden** – Lesen Sie `examples/{your-framework}/README.md` 3. **Muster abgleichen** – Ähnliche Code-Muster in den Beispielen finden 4. **Diagramme generieren** – Vorlagen aus Leitfäden verwenden 5. **Validieren** – Validierungsskripte verwenden ### Erstellen Sie Designdokumente? 1. **Vorlagentyp wählen** – Architektur, API, Feature, Datenbank oder System 2. **Vorlage laden** – Lesen Sie aus `assets/{type}-design-template.md` 3. **Abschnitte ausfüllen** – Platzhalter durch tatsächlichen Inhalt ersetzen 4. **Diagramme hinzufügen** – Je nach Bedarf Diagrammleitfäden für jeden Abschnitt laden 5. **Symbole verwenden** – Durchgehend mit Unicode-Symbolen anreichern 6. **Speichern** – In `docs/design/` mit Zeitstempel ablegen ## Wie das hierarchische System funktioniert ### Traditioneller Ansatz (ineffizient) - Gesamte Fähigkeitendokumentation laden (~50 KB) - KI verarbeitet alle Vorlagen und Beispiele - Hohe Token-Nutzung - Langsame Antwortzeit ### Hierarchischer Ansatz (effizient) 1. **Benutzer stellt Anfrage** → KI analysiert Absicht 2. **Entscheidungsbaum aktiviert** → Bestimmt benötigte Leitfäden 3. **Nur das Nötige laden** → Liest spezifischen Leitfaden (~2-5 KB) 4. **Ausgabe generieren** → Verwendet zielgerichtete Vorlagen 5. **Token-effizient** → 10x weniger Kontext benötigt ### Beispielablauf **Benutzer:** „Erstelle ein Bereitstellungsdiagramm für mein Docker-Compose-Setup" **Entscheidungsbaum:** ``` 1. Analysieren: „Bereitstellungsdiagramm" + „Docker Compose" 2. Bestimmen: deployment-diagrams.md erforderlich 3. Laden: references/guides/diagrams/deployment-diagrams.md (2 KB) 4. Muster finden: Docker-Compose-Vorlage vorhanden 5. Generieren: Mithilfe von Vorlage + Unicode-Symbolen 6. Ausgabe: Vollständiges Diagramm in <30 Sekunden ``` **Verwendete Token:** ~2.000 (im Vergleich zu ~10.000 mit traditionellem Ansatz) ## Fertigstellungsstatus ✅ **Vollständig:** - Hierarchischer Entscheidungsbaum-Orchestrator - Aktivitätsdiagramm-Leitfaden mit Vorlagen - Bereitstellungsdiagramm-Leitfaden (AWS, GCP, K8s, serverlos, Docker) - Unicode-Symbole-Leitfaden (100+ Symbole) - Mermaid-Extraktionsskript mit Validierung - Mermaid-zu-Bild-Konvertierungsskript - Spring-Boot-Code-zu-Diagramm-Beispiele - Designdokumentvorlagen (5 Typen) - Styling-System mit hohem Kontrast 🚧 **In Arbeit:** - FastAPI-Beispiele - React-Komponentenarchitektur-Beispiele - Python-ETL-Pipeline-Beispiele 📋 **Geplant:** - Architekturdiagramme-Leitfaden - Sequenzdiagramme-Leitfaden - Code-zu-Diagramm-Hauptleitfaden - Node.js/Express-Beispiele - Java-Web-App-Beispiele ## Mitwirken Um einen neuen Diagrammtyp-Leitfaden hinzuzufügen: 1. Erstellen Sie einen Leitfaden in `references/guides/diagrams/{type}-diagrams.md` 2. Enthalten Sie: - Wann zu verwenden - Grundlegende Syntax - Häufige Muster (3-5 Vorlagen) - Unicode-Symbol-Beispiele - Bewährte Verfahren 3. Aktualisieren Sie den Entscheidungsbaum in `SKILL.md` 4. Fügen Sie Beispiele mit Code-Zuordnungen hinzu Um ein neues Sprachbeispiel hinzuzufügen: 1. Erstellen Sie ein Verzeichnis in `examples/{framework}/` 2. Fügen Sie `README.md` hinzu mit: - Framework-Übersicht - Architekturdiagramm aus der Struktur - Bereitstellungsdiagramm aus der Konfiguration - Sequenzdiagramm aus Code - Aktivitätsdiagramm aus Logik 3. Aktualisieren Sie die Code-zu-Diagramm-Tabelle in `SKILL.md` ## Lizenz Teil von Claude Code Skills - MIT-Lizenz ## Verwandte Fähigkeiten - **confluence** – Diagramme in Confluence hochladen - **plantuml** – Alternatives Diagrammformat ## Links - [GitHub-Repository](https://github.com/SpillwaveSolutions/design-doc-mermaid) - [Skilz-Marktplatz-Eintrag](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/) - [Mermaid Offizielle Dokumentation](https://mermaid.js.org/) --- **Version:** 2.0.0 **Aktualisiert:** 2025-01-13 **Wartung durch:** SpillwaveSolutions ## FAQ ### Welche Arten von Mermaid-Diagrammen kann dieser Skill generieren? Dieser Skill kann Aktivitätsdiagramme, Bereitstellungsdiagramme, Architekturdiagramme und Sequenzdiagramme generieren. Er unterstützt die Visualisierung von Workflows, Cloud-Infrastrukturen, Systemkomponenten und API-Interaktionen. ### Wie funktioniert die Code-zu-Diagramm-Konvertierung? Der Skill analysiert Ihren Code oder Ihre Konfigurationsdateien (z. B. Spring Boot application.yml) und verwendet vordefinierte Muster und Anleitungen, um automatisch entsprechende Mermaid-Diagramme wie Bereitstellungs- oder Sequenzdiagramme zu generieren. ### Kann ich mit diesem Skill vollständige Designdokumente erstellen? Ja, der Skill enthält Vorlagen für verschiedene Designdokumente (Architektur, API, Feature, Datenbank, System). Er kann auf der Grundlage Ihrer Eingabe und der ausgewählten Vorlage vollständige Dokumente mit eingebetteten Mermaid-Diagrammen generieren. ### Welche Vorteile bietet das hierarchische System zur Generierung von Mermaid-Diagrammen? Das hierarchische System analysiert effizient Ihre Absicht und lädt nur die erforderlichen Anleitungen und Vorlagen (normalerweise 2–5 KB) anstelle der gesamten Skill-Dokumentation. Dies reduziert den Token-Verbrauch erheblich und beschleunigt die Antwortzeiten. ### Sind Python-Dienstprogramme in diesem Skill enthalten? Ja, der Skill bietet Python-Skripte, um Mermaid-Diagramme aus Markdown-Dateien zu extrahieren, ihre Syntax zu validieren und sie in die Bildformate PNG oder SVG zu konvertieren. Diese Dienstprogramme unterstützen auch die Stapelverarbeitung. ### Welche Anforderungen gelten für die Nutzung der Validierungs- und Bildkonvertierungsfunktionen? Für die Diagrammvalidierung und Bildkonvertierung müssen Sie \`mermaid-cli\` global über npm installiert haben (\`npm install -g @mermaid-js/mermaid-cli\`). Die Python-Skripte benötigen Python 3.7+.