# Zeemeermin Architect: Diagram & Documentatievaardigheid > Genereer uitgebreide Zeemeermin-diagrammen en ontwerpdocumenten met intelligente orkestratie, code-naar-diagram-conversie en Python-hulpprogramma's. Begin binnen enkele seconden met het maken van gedetailleerde technische documentatie. - Canonical: https://nanoskill.ai/nl/skills/mermaid-agent-skill - Markdown: https://nanoskill.ai/nl/skills/mermaid-agent-skill.md - Author: SpillwaveSolutions - Published: 2026-05-26T01:25:42.765Z - Updated: 2026-07-19T03:48:37.206Z - Language: nl - 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 De Zeemeermin Architect-vaardigheid stelt ontwikkelaars, architecten en technische schrijvers in staat om efficiënt uitgebreide Zeemeermin-diagrammen en ontwerpdocumenten te maken en te beheren. Door gebruik te maken van intelligente orkestratie en on-demand laden van handleidingen, stroomlijnt deze vaardigheid de visualisatie van complexe systemen, workflows en codestructuren. Het helpt gebruikers om nauwkeurige en visueel aantrekkelijke diagrammen te genereren, wat zorgt voor duidelijke communicatie en up-to-date documentatie. Deze krachtige Claude Code-vaardigheid biedt geavanceerde functies zoals code-naar-diagram-generatie, waarmee u architectonische inzichten rechtstreeks uit uw Lentelaars- of SnelAPI-toepassingen kunt extraheren. Het bevat ook een uitgebreide set Python-hulpprogramma's voor het extraheren, valideren en converteren van Zeemeermin-diagrammen naar afbeeldingsformaten, waardoor het eenvoudig te integreren is met bestaande documentatieworkflows en tools zoals Confluentie. Het hiërarchische systeem zorgt voor efficiënt tokengebruik en snelle responstijden, wat een naadloze ervaring biedt. Of u nu een API moet documenteren, een systeemarchitectuur moet visualiseren of een bedrijfsproces moet illustreren, Zeemeermin Architect biedt de tools en sjablonen om de klus te klaren. Met ondersteuning voor verschillende diagramtypen, Unicode semantische symbolen en hoog contrast stijlen, zullen uw diagrammen zowel informatief als toegankelijk zijn. De vaardigheid biedt ook een gestructureerd leertraject en voorbeelden om gebruikers te helpen snel bekwaam te worden in het maken van gedetailleerde technische documentatie. ## Key features - **Intelligente diagramgeneratie**: Maak verschillende Mermaid-diagrammen, waaronder activiteiten-, deployment-, architectuur- en sequentiediagrammen, voor workflows, infrastructuur, systeemcomponenten en API-stromen. - **Code-naar-diagram conversie**: Genereer automatisch diagrammen uit bestaande codebases (bijv. Spring Boot, FastAPI) of configuratiebestanden om architectuur, deployments en sequentiestromen te visualiseren. - **Uitgebreide ontwerpdocumentcreatie**: Produceer complete ontwerpdocumenten met ingebedde Mermaid-diagrammen met behulp van vooraf gedefinieerde sjablonen voor architectuur-, API-, functie-, database- en systeemontwerpen. - **Unicode-semantische symbolen & hoogcontraststijl**: Verbeter de duidelijkheid en toegankelijkheid van diagrammen met meer dan 100 betekenisvolle Unicode-symbolen en hoogcontrastkleurenschema's voor verbeterde leesbaarheid. - **Python-hulpprogramma's voor diagrambeheer**: Gebruik Python-scripts om Mermaid-diagrammen te extraheren, te valideren en te converteren naar PNG/SVG-afbeeldingen, met ondersteuning voor batchverwerking en integratie met tools zoals Confluence. ## Use cases - **Softwarearchitectuur visualiseren**: Ontwikkelaars en architecten kunnen architectuur- en deploymentdiagrammen genereren uit code of configuratiebestanden om systeemcomponenten en infrastructuur te begrijpen. - **API-stromen en workflows documenteren**: Technisch schrijvers en ingenieurs kunnen gedetailleerde sequentie- en activiteitendiagrammen maken om API-interacties, bedrijfsprocessen en gebruikersreizen te illustreren. - **Automatiseer ontwerpdocumentcreatie**: Teams kunnen snel gestructureerde ontwerpdocumenten genereren voor verschillende doeleinden (API, systeem, functie) met automatisch ingebedde Mermaid-diagrammen, wat tijd bespaart en consistentie garandeert. - **Onderhoud actuele technische documentatie**: Zorg ervoor dat documentatie actueel blijft door diagrammen rechtstreeks uit code of configuratie te genereren en ze eenvoudig naar afbeeldingsformaten te converteren voor delen en samenwerking. ## Result preview Bekijk Zeemeermin-diagrammen over het systeem voor een platform voor voedselbezorging gegenereerd door deze Agent-vaardigheid. ![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 ### Stap 1：Installeer Voeg de vaardigheid toe aan uw agent. ![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg) ### Stap 2：Beschrijf een proces Voer een workflow, systeem of sequentie in die u wilt visualiseren. ![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg) ### Stap 3：Bekijk Resultaat Ontvang Zeemeermin-diagrammen gegenereerd op basis van uw procesbeschrijving. ![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg) ## Skill definition # Mermaid Architect - Uitgebreide diagram- & documentatievaardigheid **Versie 2.0** - Hiërarchische architectuur met intelligente orchestratie Een krachtige Claude Code-vaardigheid voor het maken van Mermaid-diagrammen en ontwerpdocumenten met behulp van on-demand gidslading, code-naar-diagramgeneratie en Python-hulpprogramma's. ## Installatie ### Eén-klik installatie via de Skilz Marketplace Installeer deze vaardigheid direct vanuit de [Skilz Marketplace](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/): ```bash skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid ``` ### Handmatige installatie Kloon direct naar je Claude Code-vaardighedenmap: ```bash # Navigeer naar je vaardighedenmap cd ~/.claude/skills # Kloon de repository git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ``` ### Verifieer de installatie Controleer na de installatie of de vaardigheid beschikbaar is: ```bash # Lijst geïnstalleerde vaardigheden ls ~/.claude/skills/design-doc-mermaid # Of vraag aan Claude Code # "List mijn geïnstalleerde vaardigheden" ``` ## Wat deze vaardigheid doet **Intelligente diagramgeneratie:** - Activiteitendiagrammen (workflows, processen, bedrijfslogica) - Implementatiediagrammen (cloudinfrastructuur, K8s, serverless) - Architectuurdiagrammen (systeemcomponenten, microservices) - Sequentiediagrammen (API-stromen, service-interacties) - Complete ontwerpdocumenten met ingesloten diagrammen **Code-naar-diagramconversie:** - Extraheer architectuur uit Spring Boot-applicaties - Genereer implementatiediagrammen vanuit configuratiebestanden - Maak sequentiediagrammen vanuit methodeaanroepen - Documenteer ETL-pipelines en gegevensstromen **Diagrambeheer:** - Extraheer Mermaid-diagrammen uit Markdown-bestanden - Valideer diagramsyntaxis met mermaid-cli - Converteer diagrammen naar PNG-/SVG-afbeeldingen - Batchverwerking van volledige mappen ## Snelle start ### Maak een activiteitendiagram ``` Gebruiker: "Maak een activiteitendiagram voor gebruikersregistratie met e-mailverificatie" ``` De vaardigheid zal: 1. `references/guides/diagrams/activity-diagrams.md` laden 2. De registratiepatroonsjabloon gebruiken 3. Unicode-symbolen toevoegen (🔐 voor beveiliging, 📧 voor e-mail, ✅ voor succes) 4. Styling met hoog contrast toepassen 5. Compleet Mermaid-diagram uitvoeren ### Genereer vanuit code ``` Gebruiker: "Hier is mijn Spring Boot application.yml - genereer een implementatiediagram" ``` De vaardigheid zal: 1. Configuratie analyseren (datasource, cache, beveiliging) 2. `references/guides/diagrams/deployment-diagrams.md` laden 3. `examples/spring-boot/README.md` laden 4. Configuratie toewijzen aan cloudbronnen 5. Implementatiediagram genereren met resourcespecificaties ### Maak ontwerpdocument ``` Gebruiker: "Maak een API-ontwerpdocument voor de contacten-API" ``` De vaardigheid zal: 1. `assets/api-design-template.md` laden 2. Relevante diagramhulpgidsen laden (sequentie, ER, architectuur) 3. Compleet document genereren met ingesloten diagrammen 4. Opslaan in `docs/design/api-contacts-v1-2025-01-13.md` ## Structuur ### Hiërarchische organisatie ``` mermaid-architect/ ├── SKILL.md # Hoofdorchestrator met beslisboom ├── README.md # Dit bestand ├── CLAUDE.md # Claude Code-instructies │ ├── references/ # Referentiemateriaal │ ├── mermaid-diagram-guide.md # Oude algemene gids │ └── guides/ # Gespecialiseerde gidsen (laden op aanvraag) │ ├── diagrams/ │ │ ├── activity-diagrams.md # ✅ Compleet │ │ ├── deployment-diagrams.md # ✅ Compleet │ │ ├── architecture-diagrams.md # ✅ Compleet │ │ └── sequence-diagrams.md # ✅ Compleet │ ├── code-to-diagram/ │ │ └── README.md # ✅ Compleet (hoofdgids) │ ├── unicode-symbols/ │ │ └── guide.md # ✅ Compleet (100+ symbolen) │ └── troubleshooting.md # ✅ Compleet (28 veelvoorkomende fouten) │ ├── scripts/ # Python-hulpprogramma's │ ├── extract_mermaid.py # ✅ Diagrammen extraheren en valideren │ └── mermaid_to_image.py # ✅ Converteren naar PNG/SVG │ ├── examples/ # Taalspecifieke patronen │ ├── spring-boot/ # ✅ Compleet │ ├── fastapi/ # ✅ Compleet │ ├── react/ # ✅ Compleet │ ├── python-etl/ # ✅ Compleet │ ├── node-webapp/ # ✅ Compleet │ └── java-webapp/ # ✅ Compleet │ └── assets/ # Sjablonen voor ontwerpdocumenten ├── architecture-design-template.md ├── api-design-template.md ├── feature-design-template.md ├── database-design-template.md └── system-design-template.md ``` ## Belangrijkste kenmerken ### 1. Unicode semantische symbolen Elk diagram gebruikt betekenisvolle Unicode-symbolen: ```mermaid graph TB Gebruiker[👤 Klant] --> Gateway[🌐 API Gateway] Gateway --> Auth[🔐 Auth-service] Gateway --> API[⚙️ API-service] API --> DB[(💾 Database)] API --> Cache[(⚡ Redis)] API --> Queue[📬 Berichtenwachtrij] Queue --> Worker[⚙️ Achtergrondwerker] ``` **Symboolcategorieën:** - Infrastructuur: ☁️ 🌐 🔌 📡 🗄️ - Compute: ⚙️ ⚡ 🔄 🚀 💨 - Gegevens: 💾 📦 📊 📈 🗃️ - Berichten: 📨 📬 📤 📥 🐰 - Beveiliging: 🔐 🔑 🛡️ 🚪 👤 - Monitoring: 📝 📊 🚨 ⚠️ ✅ ❌ ### 2. Styling met hoog contrast Alle diagrammen gebruiken toegankelijke kleuren met hoog contrast - zie SKILL.md voor volledige details. ### 3. Python-hulpprogramma's #### Diagrammen extraheren ```bash # Lijst alle diagrammen in een bestand python scripts/extract_mermaid.py document.md --list-only # Extraheer naar afzonderlijke .mmd-bestanden python scripts/extract_mermaid.py document.md --output-dir diagrams/ # Valideer alle diagrammen python scripts/extract_mermaid.py document.md --validate # Vervang diagrammen door afbeeldingsverwijzingen (voor Confluence) python scripts/extract_mermaid.py document.md --replace-with-images \ --image-format png --output-markdown output.md ``` #### Naar afbeeldingen converteren ```bash # Eén bestand python scripts/mermaid_to_image.py diagram.mmd output.png # Aangepast thema en grootte python scripts/mermaid_to_image.py diagram.mmd output.svg \ --theme dark --background white --width 1200 # Batchconversie van map python scripts/mermaid_to_image.py diagrams/ output/ \ --format png --recursive # Van stdin echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png ``` ## Vereisten ### Voor diagramgeneratie - Claude Code-vaardighedensysteem (automatisch) - Gidsen en sjablonen (inbegrepen in deze vaardigheid) ### Voor validatie & afbeeldingsconversie ```bash # Installeer mermaid-cli globaal npm install -g @mermaid-js/mermaid-cli # Verifieer de installatie mmdc --version ``` ### Voor Python-scripts - Python 3.7+ - Geen extra pakketten vereist (gebruikt alleen stdlib) ## Leerpad ### Nieuw met Mermaid-diagrammen? 1. **Begin met activiteitendiagrammen** - Lees `references/guides/diagrams/activity-diagrams.md` 2. **Leer Unicode-symbolen** - Lees `references/guides/unicode-symbols/guide.md` 3. **Probeer een voorbeeld** - Gebruik patronen uit `examples/spring-boot/` 4. **Valideer je werk** - Voer `python scripts/extract_mermaid.py --validate` uit ### Bestaande code documenteren? 1. **Identificeer framework** - Spring Boot, FastAPI, React, enz. 2. **Laad voorbeeldgids** - Lees `examples/{your-framework}/README.md` 3. **Match patronen** - Vind vergelijkbare codepatronen in voorbeelden 4. **Genereer diagrammen** - Gebruik sjablonen uit gidsen 5. **Valideer** - Gebruik validatiescripts ### Ontwerpdocumenten maken? 1. **Kies sjabloontype** - Architectuur, API, Feature, Database of Systeem 2. **Laad sjabloon** - Lees uit `assets/{type}-design-template.md` 3. **Vul secties in** - Vervang placeholders door daadwerkelijke inhoud 4. **Voeg diagrammen toe** - Laad diagramgidsen indien nodig voor elke sectie 5. **Gebruik symbolen** - Verbeter met Unicode-symbolen door het hele document 6. **Opslaan** - Plaats in `docs/design/` met timestamp ## Hoe het hiërarchische systeem werkt ### Traditionele aanpak (inefficiënt) - Volledige vaardigheidsdocumentatie laden (~50KB) - AI verwerkt alle sjablonen en voorbeelden - Hoog tokenverbruik - Langzame responstijd ### Hiërarchische aanpak (efficiënt) 1. **Gebruiker doet verzoek** → AI analyseert intentie 2. **Beslisboom wordt actief** → Bepaalt benodigde gidsen 3. **Laad alleen wat nodig is** → Leest specifieke gids (~2-5KB) 4. **Genereer uitvoer** → Gebruikt doelgerichte sjablonen 5. **Token-efficiënt** → 10x minder context nodig ### Voorbeeldstroom **Gebruiker:** "Maak een implementatiediagram voor mijn Docker Compose-setup" **Beslisboom:** ``` 1. Analyseer: "implementatiediagram" + "Docker Compose" 2. Bepaal: deployment-diagrams.md nodig 3. Laad: references/guides/diagrams/deployment-diagrams.md (2KB) 4. Vind patroon: Docker Compose-sjabloon bestaat 5. Genereer: Met sjabloon + Unicode-symbolen 6. Uitvoer: Compleet diagram in <30 seconden ``` **Gebruikte tokens:** ~2.000 (vs ~10.000 met traditionele aanpak) ## Voltooiingsstatus ✅ **Voltooid:** - Hiërarchische beslisboom-orchestrator - Activiteitendiagramgids met sjablonen - Implementatiediagramgids (AWS, GCP, K8s, serverless, Docker) - Unicode-symbolengids (100+ symbolen) - Mermaid-extractiescript met validatie - Script voor Mermaid-naar-afbeelding conversie - Spring Boot code-naar-diagram voorbeelden - Sjablonen voor ontwerpdocumenten (5 types) - Stylingsysteem met hoog contrast 🚧 **In uitvoering:** - FastAPI-voorbeelden - React-componentarchitectuurvoorbeelden - Python ETL-pipelinevoorbeelden 📋 **Gepland:** - Architectuurdiagramgids - Sequentiediagramgids - Code-naar-diagram hoofdgids - Node.js/Express-voorbeelden - Java-webapp-voorbeelden ## Bijdragen Om een nieuw type diagramgids toe te voegen: 1. Maak een gids in `references/guides/diagrams/{type}-diagrams.md` 2. Voeg toe: - Wanneer te gebruiken - Basissyntax - Veelvoorkomende patronen (3-5 sjablonen) - Unicode-symboolvoorbeelden - Best practices 3. Update de beslisboom in `SKILL.md` 4. Voeg voorbeelden toe met codetoewijzingen Om een nieuw taalspecifiek voorbeeld toe te voegen: 1. Maak een map in `examples/{framework}/` 2. Voeg `README.md` toe met: - Frameworkoverzicht - Architectuurdiagram vanuit structuur - Implementatiediagram vanuit configuratie - Sequentiediagram vanuit code - Activiteitendiagram vanuit logica 3. Update de code-naar-diagramtabel in `SKILL.md` ## Licentie Onderdeel van Claude Code Skills - MIT-licentie ## Gerelateerde vaardigheden - **confluence** - Upload diagrammen naar Confluence - **plantuml** - Alternatief diagramformaat ## Links - [GitHub Repository](https://github.com/SpillwaveSolutions/design-doc-mermaid) - [Skilz Marketplace-vermelding](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/) - [Officiële Mermaid-documentatie](https://mermaid.js.org/) --- **Versie:** 2.0.0 **Bijgewerkt:** 2025-01-13 **Onderhouden door:** SpillwaveSolutions ## FAQ ### Welke soorten Mermaid-diagrammen kan deze vaardigheid genereren? Deze vaardigheid kan activiteitendiagrammen, deploymentdiagrammen, architectuurdiagrammen en sequentiediagrammen genereren. Het ondersteunt het visualiseren van workflows, cloudinfrastructuur, systeemcomponenten en API-interacties. ### Hoe werkt de conversie van code naar diagram? De vaardigheid analyseert uw code of configuratiebestanden (bijv. Spring Boot application.yml) en gebruikt vooraf gedefinieerde patronen en handleidingen om automatisch overeenkomstige Mermaid-diagrammen te genereren, zoals deployment- of sequentiediagrammen. ### Kan ik volledige ontwerpdocumenten maken met deze vaardigheid? Ja, de vaardigheid bevat sjablonen voor verschillende ontwerpdocumenten (architectuur, API, functie, database, systeem). Het kan complete documenten genereren met ingebedde Mermaid-diagrammen op basis van uw invoer en het geselecteerde sjabloon. ### Wat zijn de voordelen van het hiërarchische systeem voor het genereren van Mermaid-diagrammen? Het hiërarchische systeem analyseert efficiënt uw intentie en laadt alleen de benodigde handleidingen en sjablonen (doorgaans 2-5 KB) in plaats van de volledige vaardigheidsdocumentatie. Dit vermindert het tokenverbruik aanzienlijk en versnelt de responstijden. ### Zijn er Python-hulpprogramma's inbegrepen bij deze vaardigheid? Ja, de vaardigheid biedt Python-scripts om Mermaid-diagrammen uit Markdown-bestanden te extraheren, hun syntaxis te valideren en ze te converteren naar PNG- of SVG-afbeeldingsformaten. Deze hulpprogramma's ondersteunen ook batchverwerking. ### Wat zijn de vereisten voor het gebruik van de validatie- en beeldconversiefuncties? Voor diagramvalidatie en beeldconversie moet u \`mermaid-cli\` globaal geïnstalleerd hebben via npm (\`npm install -g @mermaid-js/mermaid-cli\`). De Python-scripts vereisen Python 3.7+.