# Havfrue Arkitekt: Diagram- og dokumentationsfærdighed > Generer omfattende havfrue-diagrammer og designdokumenter med intelligent orkestrering, kode-til-diagram konvertering og Python-hjælpeprogrammer. Begynd at skabe detaljeret teknisk dokumentation på få sekunder. - Canonical: https://nanoskill.ai/da/skills/mermaid-agent-skill - Markdown: https://nanoskill.ai/da/skills/mermaid-agent-skill.md - Author: SpillwaveSolutions - Published: 2026-05-26T01:25:42.765Z - Updated: 2026-07-19T03:48:37.206Z - Language: da - 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 Havfrue Arkitekt færdigheden sætter udviklere, arkitekter og tekniske skribenter i stand til effektivt at skabe og administrere omfattende havfrue-diagrammer og designdokumenter. Ved at udnytte intelligent orkestrering og on-demand guide-indlæsning strømliner denne færdighed visualiseringen af komplekse systemer, arbejdsgange og kodestrukturer. Det hjælper brugere med at generere nøjagtige og visuelt tiltalende diagrammer, hvilket sikrer klar kommunikation og opdateret dokumentation. Denne kraftfulde Claude Kode-færdighed tilbyder avancerede funktioner som kode-til-diagram generering, der giver dig mulighed for at udtrække arkitektoniske indsigter direkte fra dine Spring Boot- eller FastAPI-applikationer. Den inkluderer også et rigt sæt Python-hjælpeprogrammer til at udtrække, validere og konvertere havfrue-diagrammer til billedformater, hvilket gør det nemt at integrere med eksisterende dokumentationsarbejdsgange og værktøjer som Confluence. Det hierarkiske system sikrer effektiv token-forbrug og hurtige svartider, hvilket giver en problemfri oplevelse. Uanset om du har brug for at dokumentere en API, visualisere en systemarkitektur eller illustrere en forretningsproces, giver Havfrue Arkitekt de værktøjer og skabeloner, der skal til for at få arbejdet gjort. Med understøttelse af forskellige diagramtyper, Unicode-semantiske symboler og styling med høj kontrast vil dine diagrammer være både informative og tilgængelige. Færdigheden tilbyder også en struktureret læringssti og eksempler til at hjælpe brugere med hurtigt at blive dygtige til at skabe detaljeret teknisk dokumentation. ## Key features - **Intelligent diagramgenerering**: Opret forskellige Mermaid-diagrammer, herunder aktivitets-, implementerings-, arkitektur- og sekvensdiagrammer, til arbejdsgange, infrastruktur, systemkomponenter og API-strømme. - **Kode-til-diagram-konvertering**: Generer automatisk diagrammer fra eksisterende kodebaser (f.eks. Spring Boot, FastAPI) eller konfigurationsfiler for at visualisere arkitektur, implementeringer og sekvensstrømme. - **Omfattende oprettelse af designdokumenter**: Producer komplette designdokumenter med indlejrede Mermaid-diagrammer ved hjælp af foruddefinerede skabeloner til arkitektur-, API-, funktions-, database- og systemdesign. - **Unicode semantiske symboler og højkontraststyling**: Forbedr diagramklarhed og tilgængelighed med over 100 meningsfulde Unicode-symboler og højkontrastfarveskemaer for bedre læsbarhed. - **Python-hjælpeværktøjer til diagramhåndtering**: Brug Python-scripts til at ekstrahere, validere og konvertere Mermaid-diagrammer til PNG/SVG-billeder, med understøttelse af batch-behandling og integration med værktøjer som Confluence. ## Use cases - **Visualiser softwarearkitektur**: Udviklere og arkitekter kan generere arkitektur- og implementeringsdiagrammer fra kode eller konfigurationsfiler for at forstå systemkomponenter og infrastruktur. - **Dokumenter API-strømme og arbejdsgange**: Tekniske skribenter og ingeniører kan oprette detaljerede sekvens- og aktivitetsdiagrammer for at illustrere API-interaktioner, forretningsprocesser og brugerrejser. - **Automatiser oprettelse af designdokumenter**: Teams kan hurtigt generere strukturerede designdokumenter til forskellige formål (API, system, funktion) med automatisk indlejrede Mermaid-diagrammer, hvilket sparer tid og sikrer konsistens. - **Vedligehold opdateret teknisk dokumentation**: Sørg for at dokumentation forbliver aktuel ved at generere diagrammer direkte fra kode eller konfiguration, og konverter dem nemt til billedformater til deling og samarbejde. ## Result preview Se havfrue-diagrammer om systemet til en madleveringsplatform genereret af denne Agent-færdighed. ![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 ### Trin 1：Installér Tilføj færdigheden til din agent. ![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg) ### Trin 2：Beskriv en proces Indtast en arbejdsgang, et system eller en sekvens, du vil visualisere. ![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg) ### Trin 3：Gennemgå resultat Få genereret havfrue-diagrammer baseret på din procesbeskrivelse. ![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg) ## Skill definition # Mermaid Architect - Omfattende diagram- og dokumentationsfærdighed **Version 2.0** - Hierarkisk arkitektur med intelligent orkestrering En kraftfuld Claude Code-færdighed til at oprette Mermaid-diagrammer og designdokumenter ved hjælp af on-demand guide-indlæsning, kode-til-diagram-generering og Python-værktøjer. ## Installation ### Ét-klik installation via Skilz Marketplace Installer denne færdighed øjeblikkeligt fra [Skilz Marketplace](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/): ```bash skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid ``` ### Manuel installation Klon direkte ind i din Claude Code-færdighedsmappe: ```bash # Naviger til din færdighedsmappe cd ~/.claude/skills # Klon repository git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ``` ### Verificer installation Efter installation, verificer at færdigheden er tilgængelig: ```bash # List installerede færdigheder ls ~/.claude/skills/design-doc-mermaid # Eller spørg Claude Code # "Vis mine installerede færdigheder" ``` ## Hvad denne færdighed gør **Intelligent diagramgenerering:** - Aktivitetsdiagrammer (arbejdsgange, processer, forretningslogik) - Implementeringsdiagrammer (cloud-infrastruktur, K8s, serverløs) - Arkitekturdiagrammer (systemkomponenter, mikrotjenester) - Sekvensdiagrammer (API-flow, tjenesteinteraktioner) - Fuldstændige designdokumenter med indlejrede diagrammer **Kode-til-diagram-konvertering:** - Udtræk arkitektur fra Spring Boot-applikationer - Generer implementeringsdiagrammer fra konfigurationsfiler - Opret sekvensdiagrammer fra metodekald - Dokumenter ETL-pipelines og dataflows **Diagramhåndtering:** - Udtræk Mermaid-diagrammer fra Markdown-filer - Valider diagramson syntaks med mermaid-cli - Konverter diagrammer til PNG/SVG-billeder - Batch-behandl hele mapper ## Hurtig start ### Opret et aktivitetsdiagram ``` Bruger: "Opret et aktivitetsdiagram for brugerregistrering med e-mailbekræftelse" ``` Færdigheden vil: 1. Indlæse `references/guides/diagrams/activity-diagrams.md` 2. Bruge registreringsmønster-skabelonen 3. Tilføje Unicode-symboler (🔐 for sikkerhed, 📧 for e-mail, ✅ for succes) 4. Anvende høj kontrast-styling 5. Udlæse komplet Mermaid-diagram ### Generer fra kode ``` Bruger: "Her er min Spring Boot application.yml - generer et implementeringsdiagram" ``` Færdigheden vil: 1. Analysere konfiguration (datasource, cache, sikkerhed) 2. Indlæse `references/guides/diagrams/deployment-diagrams.md` 3. Indlæse `examples/spring-boot/README.md` 4. Kortlægge konfiguration til cloud-ressourcer 5. Generere implementeringsdiagram med ressourcespecifikationer ### Opret designdokument ``` Bruger: "Opret et API-designdokument for kontakter-API'en" ``` Færdigheden vil: 1. Indlæse `assets/api-design-template.md` 2. Indlæse relevante diagramguider (sekvens, ER, arkitektur) 3. Generere komplet dokument med indlejrede diagrammer 4. Gemme til `docs/design/api-contacts-v1-2025-01-13.md` ## Struktur ### Hierarkisk organisation ``` mermaid-architect/ ├── SKILL.md # Hoved-orkestrator med beslutningstræ ├── README.md # Denne fil ├── CLAUDE.md # Claude Code-instruktioner │ ├── references/ # Referencemateriale │ ├── mermaid-diagram-guide.md # Forældet generel guide │ └── guides/ # Specialiserede guider (indlæses on-demand) │ ├── diagrams/ │ │ ├── activity-diagrams.md # ✅ Færdig │ │ ├── deployment-diagrams.md # ✅ Færdig │ │ ├── architecture-diagrams.md # ✅ Færdig │ │ └── sequence-diagrams.md # ✅ Færdig │ ├── code-to-diagram/ │ │ └── README.md # ✅ Færdig (masterguide) │ ├── unicode-symbols/ │ │ └── guide.md # ✅ Færdig (100+ symboler) │ └── troubleshooting.md # ✅ Færdig (28 almindelige fejl) │ ├── scripts/ # Python-værktøjer │ ├── extract_mermaid.py # ✅ Udtræk & valider diagrammer │ └── mermaid_to_image.py # ✅ Konverter til PNG/SVG │ ├── examples/ # Sprogspecifikke mønstre │ ├── spring-boot/ # ✅ Færdig │ ├── fastapi/ # ✅ Færdig │ ├── react/ # ✅ Færdig │ ├── python-etl/ # ✅ Færdig │ ├── node-webapp/ # ✅ Færdig │ └── java-webapp/ # ✅ Færdig │ └── assets/ # Designdokument-skabeloner ├── architecture-design-template.md ├── api-design-template.md ├── feature-design-template.md ├── database-design-template.md └── system-design-template.md ``` ## Nøglefunktioner ### 1. Unicode semantiske symboler Hvert diagram bruger meningsfulde Unicode-symboler: ```mermaid graph TB User[👤 Klient] --> Gateway[🌐 API Gateway] Gateway --> Auth[🔐 Auth Service] Gateway --> API[⚙️ API Service] API --> DB[(💾 Database)] API --> Cache[(⚡ Redis)] API --> Queue[📬 Message Queue] Queue --> Worker[⚙️ Background Worker] ``` **Symbolkategorier:** - Infrastruktur: ☁️ 🌐 🔌 📡 🗄️ - Beregning: ⚙️ ⚡ 🔄 🚀 💨 - Data: 💾 📦 📊 📈 🗃️ - Beskeder: 📨 📬 📤 📥 🐰 - Sikkerhed: 🔐 🔑 🛡️ 🚪 👤 - Overvågning: 📝 📊 🚨 ⚠️ ✅ ❌ ### 2. Høj kontrast-styling Alle diagrammer bruger tilgængelig, høj-kontrast farver - se SKILL.md for fulde detaljer. ### 3. Python-værktøjer #### Udtræk diagrammer ```bash # List alle diagrammer i en fil python scripts/extract_mermaid.py document.md --list-only # Udtræk til separate .mmd filer python scripts/extract_mermaid.py document.md --output-dir diagrams/ # Valider alle diagrammer python scripts/extract_mermaid.py document.md --validate # Erstat diagrammer med billedreferencer (til Confluence) python scripts/extract_mermaid.py document.md --replace-with-images \ --image-format png --output-markdown output.md ``` #### Konverter til billeder ```bash # Enkelt fil python scripts/mermaid_to_image.py diagram.mmd output.png # Brugerdefineret tema og størrelse python scripts/mermaid_to_image.py diagram.mmd output.svg \ --theme dark --background white --width 1200 # Batch-konverter mappe python scripts/mermaid_to_image.py diagrams/ output/ \ --format png --recursive # Fra stdin echo "graph TD; A-->B" | python scripts/mermaid_to_image.py - output.png ``` ## Krav ### Til diagramgenerering - Claude Code færdighedssystem (automatisk) - Guider og skabeloner (inkluderet i denne færdighed) ### Til validering & billedkonvertering ```bash # Installer mermaid-cli globalt npm install -g @mermaid-js/mermaid-cli # Verificer installation mmdc --version ``` ### Til Python-scripts - Python 3.7+ - Ingen yderligere pakker påkrævet (bruger kun stdlib) ## Læringssti ### Ny til Mermaid-diagrammer? 1. **Start med aktivitetsdiagrammer** - Læs `references/guides/diagrams/activity-diagrams.md` 2. **Lær Unicode-symboler** - Læs `references/guides/unicode-symbols/guide.md` 3. **Prøv et eksempel** - Brug mønstre fra `examples/spring-boot/` 4. **Valider dit arbejde** - Kør `python scripts/extract_mermaid.py --validate` ### Behov for at dokumentere eksisterende kode? 1. **Identificer framework** - Spring Boot, FastAPI, React, osv. 2. **Indlæs eksempelguide** - Læs `examples/{dit-framework}/README.md` 3. **Match mønstre** - Find lignende kodemønstre i eksempler 4. **Generer diagrammer** - Brug skabeloner fra guider 5. **Valider** - Brug valideringsscripts ### Opretter designdokumenter? 1. **Vælg skabelontype** - Arkitektur, API, Funktion, Database eller System 2. **Indlæs skabelon** - Læs fra `assets/{type}-design-template.md` 3. **Udfyld sektioner** - Erstat pladsholdere med faktisk indhold 4. **Tilføj diagrammer** - Indlæs diagramguider efter behov for hver sektion 5. **Brug symboler** - Forbedre med Unicode-symboler overalt 6. **Gem** - Placer i `docs/design/` med tidsstempel ## Hvordan det hierarkiske system fungerer ### Traditionel tilgang (Ineffektiv) - Indlæs hele færdighedsdokumentation (~50KB) - AI behandler alle skabeloner og eksempler - Højt token-forbrug - Langsom responstid ### Hierarkisk tilgang (Effektiv) 1. **Bruger fremsætter anmodning** → AI analyserer intention 2. **Beslutningstræ aktiveres** → Bestemmer nødvendige guider 3. **Indlæs kun hvad der er nødvendigt** → Læser specifik guide (~2-5KB) 4. **Generer output** → Bruger målrettede skabeloner 5. **Token-effektiv** → 10x mindre kontekst nødvendig ### Eksempelflow **Bruger:** "Opret implementeringsdiagram for min Docker Compose-opsætning" **Beslutningstræ:** ``` 1. Analyser: "implementeringsdiagram" + "Docker Compose" 2. Bestem: deployment-diagrams.md nødvendig 3. Indlæs: references/guides/diagrams/deployment-diagrams.md (2KB) 4. Find mønster: Docker Compose skabelon findes 5. Generer: Brug skabelon + Unicode-symboler 6. Output: Komplet diagram på <30 sekunder ``` **Tokens brugt:** ~2.000 (mod ~10.000 med traditionel tilgang) ## Færdiggørelsesstatus ✅ **Færdig:** - Hierarkisk beslutningstræ-orkestrator - Aktivitetsdiagramguide med skabeloner - Implementeringsdiagramguide (AWS, GCP, K8s, serverløs, Docker) - Unicode-symbolguide (100+ symboler) - Udtræk Mermaid-script med validering - Mermaid til billede-konverteringsscript - Spring Boot kode-til-diagram-eksempler - Designdokument-skabeloner (5 typer) - Høj kontrast-stylingsystem 🚧 **I gang:** - FastAPI-eksempler - React komponentarkitektur-eksempler - Python ETL pipeline-eksempler 📋 **Planlagt:** - Arkitekturdiagrammer guide - Sekvensdiagrammer guide - Kode-til-diagram masterguide - Node.js/Express eksempler - Java web app eksempler ## Bidrag For at tilføje en ny diagramtypeguide: 1. Opret guide i `references/guides/diagrams/{type}-diagrams.md` 2. Inkluder: - Hvornår skal man bruge - Grundlæggende syntaks - Almindelige mønstre (3-5 skabeloner) - Unicode-symboleksempler - Bedste praksis 3. Opdater `SKILL.md` beslutningstræ 4. Tilføj eksempler med kodekortlægninger For at tilføje et nyt sprogeksempel: 1. Opret mappe i `examples/{framework}/` 2. Tilføj `README.md` med: - Framework-oversigt - Arkitekturdiagram fra struktur - Implementeringsdiagram fra konfiguration - Sekvensdiagram fra kode - Aktivitetsdiagram fra logik 3. Opdater `SKILL.md` kode-til-diagram-tabel ## Licens Del af Claude Code Skills - MIT License ## Relaterede færdigheder - **confluence** - Upload diagrammer til Confluence - **plantuml** - Alternativt diagramformat ## Links - [GitHub-repository](https://github.com/SpillwaveSolutions/design-doc-mermaid) - [Skilz Marketplace-opslag](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/) - [Mermaid officiel dokumentation](https://mermaid.js.org/) --- **Version:** 2.0.0 **Opdateret:** 2025-01-13 **Vedligeholdes af:** SpillwaveSolutions ## FAQ ### Hvilke typer Mermaid-diagrammer kan denne færdighed generere? Denne færdighed kan generere aktivitetsdiagrammer, implementeringsdiagrammer, arkitekturdiagrammer og sekvensdiagrammer. Den understøtter visualisering af arbejdsgange, cloud-infrastruktur, systemkomponenter og API-interaktioner. ### Hvordan fungerer kode-til-diagram-konvertering? Færdigheden analyserer din kode eller konfigurationsfiler (f.eks. Spring Boot application.yml) og bruger foruddefinerede mønstre og vejledninger til automatisk at generere tilsvarende Mermaid-diagrammer, såsom implementerings- eller sekvensdiagrammer. ### Kan jeg oprette fulde designdokumenter med denne færdighed? Ja, færdigheden inkluderer skabeloner til forskellige designdokumenter (arkitektur, API, funktion, database, system). Den kan generere komplette dokumenter med indlejrede Mermaid-diagrammer baseret på din input og valgte skabelon. ### Hvad er fordelene ved det hierarkiske system til generering af Mermaid-diagrammer? Det hierarkiske system analyserer effektivt din hensigt og indlæser kun de nødvendige vejledninger og skabeloner (typisk 2-5KB) i stedet for hele færdighedsdokumentationen. Dette reducerer token-forbrug markant og fremskynder svartider. ### Er der nogen Python-hjælpeværktøjer inkluderet i denne færdighed? Ja, færdigheden leverer Python-scripts til at ekstrahere Mermaid-diagrammer fra Markdown-filer, validere deres syntaks og konvertere dem til PNG- eller SVG-billedformater. Disse værktøjer understøtter også batch-behandling. ### Hvad er kravene for at bruge validerings- og billedkonverteringsfunktionerne? Til diagramvalidering og billedkonvertering skal du have \`mermaid-cli\` installeret globalt via npm (\`npm install -g @mermaid-js/mermaid-cli\`). Python-scripts kræver Python 3.7+.