# Havfrue-arkitekt: Diagram- og dokumentasjonsferdighet > Generer omfattende havfrue-diagrammer og designdokumenter med intelligent orkestrering, kode-til-diagram-konvertering og Python-verktøy. Begynn å lage detaljert teknisk dokumentasjon på sekunder. - Canonical: https://nanoskill.ai/nb/skills/mermaid-agent-skill - Markdown: https://nanoskill.ai/nb/skills/mermaid-agent-skill.md - Author: SpillwaveSolutions - Published: 2026-05-26T01:25:42.765Z - Updated: 2026-07-19T03:48:37.206Z - Language: nb - 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-ferdigheten gir utviklere, arkitekter og tekniske skribenter muligheten til å effektivt opprette og administrere omfattende havfrue-diagrammer og designdokumenter. Ved å utnytte intelligent orkestrering og behovsbasert veiledningslasting, effektiviserer denne ferdigheten visualiseringen av komplekse systemer, arbeidsflyter og kodestrukturer. Den hjelper brukere med å generere nøyaktige og visuelt tiltalende diagrammer, og sikrer tydelig kommunikasjon og oppdatert dokumentasjon. Denne kraftige Claude Code-ferdigheten tilbyr avanserte funksjoner som kode-til-diagram-generering, slik at du kan trekke ut arkitektonisk innsikt direkte fra Spring Boot- eller FastAPI-applikasjonene dine. Den inkluderer også et rikt sett med Python-verktøy for utpakking, validering og konvertering av havfrue-diagrammer til bildeformater, noe som gjør det enkelt å integrere med eksisterende dokumentasjonsarbeidsflyter og verktøy som Confluence. Det hierarkiske systemet sikrer effektiv token-bruk og raske responstider, og gir en sømløs opplevelse. Enten du trenger å dokumentere et API, visualisere en systemarkitektur, eller illustrere en forretningsprosess, gir Havfrue-arkitekt verktøyene og malene for å få jobben gjort. Med støtte for ulike diagramtyper, Unicode semantiske symboler og høykontraststyling, vil diagrammene dine være både informative og tilgjengelige. Ferdigheten tilbyr også en strukturert læringsvei og eksempler for å hjelpe brukere raskt å bli dyktige i å lage detaljert teknisk dokumentasjon. ## Key features - **Intelligent diagramgenerering**: Lag ulike Mermaid-diagrammer, inkludert aktivitets-, distribusjons-, arkitektur- og sekvensdiagrammer, for arbeidsflyter, infrastruktur, systemkomponenter og API-flyt. - **Kode-til-diagram-konvertering**: Generer automatisk diagrammer fra eksisterende kodebaser (f.eks. Spring Boot, FastAPI) eller konfigurasjonsfiler for å visualisere arkitektur, distribusjoner og sekvensflyt. - **Omfattende opprettelse av designdokumenter**: Produser komplette designdokumenter med innebygde Mermaid-diagrammer ved hjelp av forhåndsdefinerte maler for arkitektur-, API-, funksjons-, database- og systemdesign. - **Unicode semantiske symboler og høy kontrast-styling**: Forbedre diagramklarhet og tilgjengelighet med over 100 meningsfulle Unicode-symboler og høykontrastfargevalg for bedre lesbarhet. - **Python-verktøy for diagramadministrasjon**: Bruk Python-skript til å trekke ut, validere og konvertere Mermaid-diagrammer til PNG/SVG-bilder, med støtte for batchbehandling og integrasjon med verktøy som Confluence. ## Use cases - **Visualiser programvarearkitektur**: Utviklere og arkitekter kan generere arkitektur- og distribusjonsdiagrammer fra kode eller konfigurasjonsfiler for å forstå systemkomponenter og infrastruktur. - **Dokumenter API-flyt og arbeidsflyter**: Tekniske skribenter og ingeniører kan lage detaljerte sekvens- og aktivitetsdiagrammer for å illustrere API-interaksjoner, forretningsprosesser og brukerreiser. - **Automatiser opprettelse av designdokumenter**: Team kan raskt generere strukturerte designdokumenter for ulike formål (API, system, funksjon) med automatisk innebygde Mermaid-diagrammer, noe som sparer tid og sikrer konsistens. - **Vedlikehold oppdatert teknisk dokumentasjon**: Sørg for at dokumentasjonen forblir aktuell ved å generere diagrammer direkte fra kode eller konfigurasjon, og konverter dem enkelt til bildeformater for deling og samarbeid. ## Result preview Se havfrue-diagrammer om systemet for en matleveringsplattform generert av denne agentferdigheten. ![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 ### Trinn 1：Installer Legg til ferdigheten til agenten din. ![mermaid-architect-step-1](https://file.nanoskill.ai/mermaid-architect-step-1.jpg) ### Trinn 2：Beskriv en prosess Skriv inn en arbeidsflyt, et system eller en sekvens du vil visualisere. ![mermaid-architect-step-2](https://file.nanoskill.ai/mermaid-architect-step-2.jpg) ### Trinn 3：Gjennomgå resultat Få generert havfrue-diagrammer basert på prosessbeskrivelsen din. ![mermaid-architect-step-3](https://file.nanoskill.ai/mermaid-architect-step-3.jpg) ## Skill definition # Mermaid Architect - Omfattende diagram- og dokumentasjonsferdighet **Versjon 2.0** - Hierarkisk arkitektur med intelligent orkestrering En kraftig Claude Code-ferdighet for å lage Mermaid-diagrammer og designdokumenter ved hjelp av veiledningslasting etter behov, kode-til-diagram-generering og Python-verktøy. ## Installasjon ### Ettklikksinstallasjon via Skilz Marketplace Installer denne ferdigheten umiddelbart 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 ``` ### Manuell installasjon Klon direkte inn i Claude Code-ferdighetskatalogen din: ```bash # Navigate to your skills directory cd ~/.claude/skills # Clone the repository git clone https://github.com/SpillwaveSolutions/design-doc-mermaid.git ``` ### Bekreft installasjon Etter installasjon, bekreft at ferdigheten er tilgjengelig: ```bash # List installed skills ls ~/.claude/skills/design-doc-mermaid # Or ask Claude Code # "List my installed skills" ``` ## Hva denne ferdigheten gjør **Intelligent diagramgenerering:** - Aktivitetsdiagrammer (arbeidsflyter, prosesser, forretningslogikk) - Distribusjonsdiagrammer (skyinfrastruktur, K8s, serverløs) - Arkitekturdiagrammer (systemkomponenter, mikrotjenester) - Sekvensdiagrammer (API-flyt, tjenesteinteraksjoner) - Fullstendige designdokumenter med innebygde diagrammer **Kode-til-diagram-konvertering:** - Trekk ut arkitektur fra Spring Boot-applikasjoner - Generer distribusjonsdiagrammer fra konfigurasjonsfiler - Lag sekvensdiagrammer fra metodekall - Dokumenter ETL-pipelines og dataflyt **Diagramadministrasjon:** - Trekk ut Mermaid-diagrammer fra Markdown-filer - Valider diagramsyntaks med mermaid-cli - Konverter diagrammer til PNG/SVG-bilder - Behandle hele kataloger i serie ## Hurtigstart ### Lag et aktivitetsdiagram ``` Bruker: "Lag et aktivitetsdiagram for brukerregistrering med e-postbekreftelse" ``` Ferdigheten vil: 1. Laste `references/guides/diagrams/activity-diagrams.md` 2. Bruke registreringsmønstermal 3. Legge til Unicode-symboler (🔐 for sikkerhet, 📧 for e-post, ✅ for suksess) 4. Bruke høy-kontrast-stil 5. Gi ut fullstendig Mermaid-diagram ### Generer fra kode ``` Bruker: "Her er min Spring Boot application.yml - generer et distribusjonsdiagram" ``` Ferdigheten vil: 1. Analysere konfigurasjon (datakilde, cache, sikkerhet) 2. Laste `references/guides/diagrams/deployment-diagrams.md` 3. Laste `examples/spring-boot/README.md` 4. Kartlegge konfig til skyressurser 5. Generere distribusjonsdiagram med ressursspesifikasjoner ### Lag designdokument ``` Bruker: "Lag et API-designdokument for kontakter-APIet" ``` Ferdigheten vil: 1. Laste `assets/api-design-template.md` 2. Laste relevante diagramveiledninger (sekvens, ER, arkitektur) 3. Generere fullstendig dokument med innebygde diagrammer 4. Lagre til `docs/design/api-contacts-v1-2025-01-13.md` ## Struktur ### Hierarkisk organisering ``` mermaid-architect/ ├── SKILL.md # Hovedorkestrator med beslutningstre ├── README.md # Denne filen ├── CLAUDE.md # Claude Code-instruksjoner │ ├── references/ # Referansemateriell │ ├── mermaid-diagram-guide.md # Eldre generell veiledning │ └── guides/ # Spesialiserte veiledninger (lastes etter behov) │ ├── diagrams/ │ │ ├── activity-diagrams.md # ✅ Fullført │ │ ├── deployment-diagrams.md # ✅ Fullført │ │ ├── architecture-diagrams.md # ✅ Fullført │ │ └── sequence-diagrams.md # ✅ Fullført │ ├── code-to-diagram/ │ │ └── README.md # ✅ Fullført (hovedveiledning) │ ├── unicode-symbols/ │ │ └── guide.md # ✅ Fullført (100+ symboler) │ └── troubleshooting.md # ✅ Fullført (28 vanlige feil) │ ├── scripts/ # Python-verktøy │ ├── extract_mermaid.py # ✅ Trekk ut & valider diagrammer │ └── mermaid_to_image.py # ✅ Konverter til PNG/SVG │ ├── examples/ # Språkspesifikke mønstre │ ├── spring-boot/ # ✅ Fullført │ ├── fastapi/ # ✅ Fullført │ ├── react/ # ✅ Fullført │ ├── python-etl/ # ✅ Fullført │ ├── node-webapp/ # ✅ Fullført │ └── java-webapp/ # ✅ Fullført │ └── assets/ # Designdokument-maler ├── architecture-design-template.md ├── api-design-template.md ├── feature-design-template.md ├── database-design-template.md └── system-design-template.md ``` ## Nøkkelfunksjoner ### 1. Unicode semantiske symboler Hvert diagram bruker meningsfulle Unicode-symboler: ```mermaid graph TB User[👤 Klient] --> Gateway[🌐 API Gateway] Gateway --> Auth[🔐 Autentiseringstjeneste] Gateway --> API[⚙️ API-tjeneste] API --> DB[(💾 Database)] API --> Cache[(⚡ Redis)] API --> Queue[📬 Meldingkø] Queue --> Worker[⚙️ Bakgrunnsarbeider] ``` **Symbolkategorier:** - Infrastruktur: ☁️ 🌐 🔌 📡 🗄️ - Beregning: ⚙️ ⚡ 🔄 🚀 💨 - Data: 💾 📦 📊 📈 🗃️ - Meldinger: 📨 📬 📤 📥 🐰 - Sikkerhet: 🔐 🔑 🛡️ 🚪 👤 - Overvåking: 📝 📊 🚨 ⚠️ ✅ ❌ ### 2. Høy-kontrast-stil Alle diagrammer bruker tilgjengelige, høy-kontrast-farger - se SKILL.md for fullstendige detaljer. ### 3. Python-verktøy #### Trekk ut diagrammer ```bash # List alle diagrammer i en fil python scripts/extract_mermaid.py document.md --list-only # Trekk ut 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 # Erstatt diagrammer med bildehenvisninger (for Confluence) python scripts/extract_mermaid.py document.md --replace-with-images \ --image-format png --output-markdown output.md ``` #### Konverter til bilder ```bash # Enkelt fil python scripts/mermaid_to_image.py diagram.mmd output.png # Tilpasset tema og størrelse python scripts/mermaid_to_image.py diagram.mmd output.svg \ --theme dark --background white --width 1200 # Batch-konverter katalog 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 ### For diagramgenerering - Claude Code-ferdighetssystem (automatisk) - Veiledninger og maler (inkludert i denne ferdigheten) ### For validering og bildekonvertering ```bash # Installer mermaid-cli globalt npm install -g @mermaid-js/mermaid-cli # Bekreft installasjon mmdc --version ``` ### For Python-skript - Python 3.7+ - Ingen ekstra pakker kreves (bruker kun stdlib) ## Læringssti ### Ny på Mermaid-diagrammer? 1. **Start med aktivitetsdiagrammer** - Les `references/guides/diagrams/activity-diagrams.md` 2. **Lær Unicode-symboler** - Les `references/guides/unicode-symbols/guide.md` 3. **Prøv et eksempel** - Bruk mønstre fra `examples/spring-boot/` 4. **Valider arbeidet ditt** - Kjør `python scripts/extract_mermaid.py --validate` ### Trenger du å dokumentere eksisterende kode? 1. **Identifiser rammeverk** - Spring Boot, FastAPI, React, etc. 2. **Last inn eksempelveiledning** - Les `examples/{your-framework}/README.md` 3. **Match mønstre** - Finn lignende kodemønstre i eksemplene 4. **Generer diagrammer** - Bruk maler fra veiledningene 5. **Valider** - Bruk valideringsskript ### Lager du designdokumenter? 1. **Velg maltype** - Arkitektur, API, Funksjon, Database, eller System 2. **Last mal** - Les fra `assets/{type}-design-template.md` 3. **Fyll inn seksjoner** - Erstatt plassholdere med faktisk innhold 4. **Legg til diagrammer** - Last diagramveiledninger etter behov for hver seksjon 5. **Bruk symboler** - Forbedre med Unicode-symboler gjennomgående 6. **Lagre** - Plasser i `docs/design/` med tidsstempel ## Hvordan det hierarkiske systemet fungerer ### Tradisjonell tilnærming (ineffektiv) - Last hele ferdighetsdokumentasjonen (~50KB) - AI behandler alle maler og eksempler - Høy token-bruk - Langsom responstid ### Hierarkisk tilnærming (effektiv) 1. **Bruker sender forespørsel** → AI analyserer intensjon 2. **Beslutningstreet aktiveres** → Bestemmer nødvendige veiledninger 3. **Last bare det som trengs** → Leser spesifikk veiledning (~2-5KB) 4. **Generer utdata** → Bruker målrettede maler 5. **Token-effektiv** → 10x mindre kontekst nødvendig ### Eksempelflyt **Bruker:** "Lag distribusjonsdiagram for mitt Docker Compose-oppsett" **Beslutningstre:** ``` 1. Analyser: "distribusjonsdiagram" + "Docker Compose" 2. Bestem: deployment-diagrams.md nødvendig 3. Last: references/guides/diagrams/deployment-diagrams.md (2KB) 4. Finn mønster: Docker Compose-mal eksisterer 5. Generer: Bruker mal + Unicode-symboler 6. Utdata: Fullstendig diagram på <30 sekunder ``` **Tokens brukt:** ~2 000 (vs ~10 000 med tradisjonell tilnærming) ## Fullføringsstatus ✅ **Fullført:** - Hierarkisk beslutningstre-orkestrator - Aktivitetsdiagramveiledning med maler - Distribusjonsdiagramveiledning (AWS, GCP, K8s, serverløs, Docker) - Unicode-symbolveiledning (100+ symboler) - Trekk ut Mermaid-skript med validering - Mermaid til bilde-konverteringsskript - Spring Boot kode-til-diagram-eksempler - Designdokument-maler (5 typer) - Høy-kontrast-stilsystem 🚧 **Under arbeid:** - FastAPI-eksempler - React-komponentarkitektureksempler - Python ETL-pipeline-eksempler 📋 **Planlagt:** - Arkitekturdiagramveiledning - Sekvensdiagramveiledning - Kode-til-diagram-hovedveiledning - Node.js/Express-eksempler - Java-nettapp-eksempler ## Bidra For å legge til en ny diagramtypeveiledning: 1. Opprett veiledning i `references/guides/diagrams/{type}-diagrams.md` 2. Inkluder: - Når du skal bruke den - Grunnleggende syntaks - Vanlige mønstre (3-5 maler) - Unicode-symboleksempler - Beste praksis 3. Oppdater `SKILL.md` beslutningstre 4. Legg til eksempler med kodekartlegginger For å legge til et nytt språkeksempel: 1. Opprett katalog i `examples/{framework}/` 2. Legg til `README.md` med: - Rammeverksoversikt - Arkitekturdiagram fra struktur - Distribusjonsdiagram fra konfig - Sekvensdiagram fra kode - Aktivitetsdiagram fra logikk 3. Oppdater `SKILL.md` kode-til-diagram-tabell ## Lisens Del av Claude Code Skills - MIT-lisens ## Relaterte ferdigheter - **confluence** - Last opp diagrammer til Confluence - **plantuml** - Alternativt diagramformat ## Lenker - [GitHub-repositorium](https://github.com/SpillwaveSolutions/design-doc-mermaid) - [Skilz Marketplace-oppføring](https://skillzwave.ai/skill/SpillwaveSolutions__design-doc-mermaid__design-doc-mermaid__SKILL/) - [Mermaid offisiell dokumentasjon](https://mermaid.js.org/) --- **Versjon:** 2.0.0 **Oppdatert:** 2025-01-13 **Vedlikeholdes av:** SpillwaveSolutions ## FAQ ### Hvilke typer Mermaid-diagrammer kan denne ferdigheten generere? Denne ferdigheten kan generere aktivitetsdiagrammer, distribusjonsdiagrammer, arkitekturdiagrammer og sekvensdiagrammer. Den støtter visualisering av arbeidsflyter, skyinfrastruktur, systemkomponenter og API-interaksjoner. ### Hvordan fungerer kode-til-diagram-konverteringen? Ferdigheten analyserer koden din eller konfigurasjonsfiler (f.eks. Spring Boot application.yml) og bruker forhåndsdefinerte mønstre og veiledninger for automatisk å generere tilsvarende Mermaid-diagrammer, som distribusjons- eller sekvensdiagrammer. ### Kan jeg lage fullstendige designdokumenter med denne ferdigheten? Ja, ferdigheten inkluderer maler for ulike designdokumenter (arkitektur, API, funksjon, database, system). Den kan generere komplette dokumenter med innebygde Mermaid-diagrammer basert på dine inndata og valgt mal. ### Hva er fordelene med det hierarkiske systemet for å generere Mermaid-diagrammer? Det hierarkiske systemet analyserer intensjonen din effektivt og laster bare inn de nødvendige veiledningene og malene (vanligvis 2-5 KB) i stedet for hele ferdighetsdokumentasjonen. Dette reduserer tokenbruken betydelig og øker responstiden. ### Er det noen Python-verktøy inkludert med denne ferdigheten? Ja, ferdigheten tilbyr Python-skript for å trekke ut Mermaid-diagrammer fra Markdown-filer, validere syntaksen deres og konvertere dem til PNG- eller SVG-bildeformater. Disse verktøyene støtter også batchbehandling. ### Hva er kravene for å bruke validerings- og bildekonverteringsfunksjonene? For diagramvalidering og bildekonvertering må du ha \`mermaid-cli\` installert globalt via npm (\`npm install -g @mermaid-js/mermaid-cli\`). Python-skriptene krever Python 3.7+.