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:
skilz install SpillwaveSolutions_design-doc-mermaid/design-doc-mermaid
Manuel installation
Klon direkte ind i din Claude Code-færdighedsmappe:
# 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:
# 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:
- Indlæse
references/guides/diagrams/activity-diagrams.md - Bruge registreringsmønster-skabelonen
- Tilføje Unicode-symboler (🔐 for sikkerhed, 📧 for e-mail, ✅ for succes)
- Anvende høj kontrast-styling
- Udlæse komplet Mermaid-diagram
Generer fra kode
Bruger: "Her er min Spring Boot application.yml - generer et implementeringsdiagram"
Færdigheden vil:
- Analysere konfiguration (datasource, cache, sikkerhed)
- Indlæse
references/guides/diagrams/deployment-diagrams.md - Indlæse
examples/spring-boot/README.md - Kortlægge konfiguration til cloud-ressourcer
- Generere implementeringsdiagram med ressourcespecifikationer
Opret designdokument
Bruger: "Opret et API-designdokument for kontakter-API'en"
Færdigheden vil:
- Indlæse
assets/api-design-template.md - Indlæse relevante diagramguider (sekvens, ER, arkitektur)
- Generere komplet dokument med indlejrede diagrammer
- 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:
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
# 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
# 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
# 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?
- Start med aktivitetsdiagrammer - Læs
references/guides/diagrams/activity-diagrams.md - Lær Unicode-symboler - Læs
references/guides/unicode-symbols/guide.md - Prøv et eksempel - Brug mønstre fra
examples/spring-boot/ - Valider dit arbejde - Kør
python scripts/extract_mermaid.py --validate
Behov for at dokumentere eksisterende kode?
- Identificer framework - Spring Boot, FastAPI, React, osv.
- Indlæs eksempelguide - Læs
examples/{dit-framework}/README.md - Match mønstre - Find lignende kodemønstre i eksempler
- Generer diagrammer - Brug skabeloner fra guider
- Valider - Brug valideringsscripts
Opretter designdokumenter?
- Vælg skabelontype - Arkitektur, API, Funktion, Database eller System
- Indlæs skabelon - Læs fra
assets/{type}-design-template.md - Udfyld sektioner - Erstat pladsholdere med faktisk indhold
- Tilføj diagrammer - Indlæs diagramguider efter behov for hver sektion
- Brug symboler - Forbedre med Unicode-symboler overalt
- 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)
- Bruger fremsætter anmodning → AI analyserer intention
- Beslutningstræ aktiveres → Bestemmer nødvendige guider
- Indlæs kun hvad der er nødvendigt → Læser specifik guide (~2-5KB)
- Generer output → Bruger målrettede skabeloner
- 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:
- Opret guide i
references/guides/diagrams/{type}-diagrams.md - Inkluder:
- Hvornår skal man bruge
- Grundlæggende syntaks
- Almindelige mønstre (3-5 skabeloner)
- Unicode-symboleksempler
- Bedste praksis
- Opdater
SKILL.mdbeslutningstræ - Tilføj eksempler med kodekortlægninger
For at tilføje et nyt sprogeksempel:
- Opret mappe i
examples/{framework}/ - Tilføj
README.mdmed:- Framework-oversigt
- Arkitekturdiagram fra struktur
- Implementeringsdiagram fra konfiguration
- Sekvensdiagram fra kode
- Aktivitetsdiagram fra logik
- Opdater
SKILL.mdkode-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
- Skilz Marketplace-opslag
- Mermaid officiel dokumentation
Version: 2.0.0 Opdateret: 2025-01-13 Vedligeholdes af: SpillwaveSolutions