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:
skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid
Manuell installasjon
Klon direkte inn i Claude Code-ferdighetskatalogen din:
# 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:
# 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:
- Laste
references/guides/diagrams/activity-diagrams.md - Bruke registreringsmønstermal
- Legge til Unicode-symboler (🔐 for sikkerhet, 📧 for e-post, ✅ for suksess)
- Bruke høy-kontrast-stil
- Gi ut fullstendig Mermaid-diagram
Generer fra kode
Bruker: "Her er min Spring Boot application.yml - generer et distribusjonsdiagram"
Ferdigheten vil:
- Analysere konfigurasjon (datakilde, cache, sikkerhet)
- Laste
references/guides/diagrams/deployment-diagrams.md - Laste
examples/spring-boot/README.md - Kartlegge konfig til skyressurser
- Generere distribusjonsdiagram med ressursspesifikasjoner
Lag designdokument
Bruker: "Lag et API-designdokument for kontakter-APIet"
Ferdigheten vil:
- Laste
assets/api-design-template.md - Laste relevante diagramveiledninger (sekvens, ER, arkitektur)
- Generere fullstendig dokument med innebygde diagrammer
- 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:
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
# 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
# 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
# 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?
- Start med aktivitetsdiagrammer - Les
references/guides/diagrams/activity-diagrams.md - Lær Unicode-symboler - Les
references/guides/unicode-symbols/guide.md - Prøv et eksempel - Bruk mønstre fra
examples/spring-boot/ - Valider arbeidet ditt - Kjør
python scripts/extract_mermaid.py --validate
Trenger du å dokumentere eksisterende kode?
- Identifiser rammeverk - Spring Boot, FastAPI, React, etc.
- Last inn eksempelveiledning - Les
examples/{your-framework}/README.md - Match mønstre - Finn lignende kodemønstre i eksemplene
- Generer diagrammer - Bruk maler fra veiledningene
- Valider - Bruk valideringsskript
Lager du designdokumenter?
- Velg maltype - Arkitektur, API, Funksjon, Database, eller System
- Last mal - Les fra
assets/{type}-design-template.md - Fyll inn seksjoner - Erstatt plassholdere med faktisk innhold
- Legg til diagrammer - Last diagramveiledninger etter behov for hver seksjon
- Bruk symboler - Forbedre med Unicode-symboler gjennomgående
- 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)
- Bruker sender forespørsel → AI analyserer intensjon
- Beslutningstreet aktiveres → Bestemmer nødvendige veiledninger
- Last bare det som trengs → Leser spesifikk veiledning (~2-5KB)
- Generer utdata → Bruker målrettede maler
- 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:
- Opprett veiledning i
references/guides/diagrams/{type}-diagrams.md - Inkluder:
- Når du skal bruke den
- Grunnleggende syntaks
- Vanlige mønstre (3-5 maler)
- Unicode-symboleksempler
- Beste praksis
- Oppdater
SKILL.mdbeslutningstre - Legg til eksempler med kodekartlegginger
For å legge til et nytt språkeksempel:
- Opprett katalog i
examples/{framework}/ - Legg til
README.mdmed:- Rammeverksoversikt
- Arkitekturdiagram fra struktur
- Distribusjonsdiagram fra konfig
- Sekvensdiagram fra kode
- Aktivitetsdiagram fra logikk
- Oppdater
SKILL.mdkode-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
- Skilz Marketplace-oppføring
- Mermaid offisiell dokumentasjon
Versjon: 2.0.0 Oppdatert: 2025-01-13 Vedlikeholdes av: SpillwaveSolutions