Interactive Architecture Diagrams
Bygger et klikkbart, animert enkeltfil HTML arkitekturdiagram pluss en ledsagende .md.
Bestått
Hva den gjør
Genererer et selvstendig interaktivt HTML-diagram — flyt-faner, animerte SVG-datapakketer, et sidepanel med trinnvise nyttelaster, modus-brytere (dev/prod, offline/online), dra-og-slipp-noder, mørk/lys tema — pluss en ledsagende architecture.md, fra en ren-språklig beskrivelse av et systems tjenester og flyter. Utløses ved forespørsler om å visualisere et tjenestekart, RAG/agentisk flyt, CI/CD-pipeline, eller mikrotjenestetopologi for en workshop eller designgjennomgang; velger eksplisitt bort statiske Mermaid-diagrammer, lysbilder eller PDF-er.
Testrapport
Bygde et ekte 3-node OAuth2-påloggingsdiagram fra den leverte malen og serverte det lokalt: trinnnavigasjon, nyttelast-sidepanelet, og dev/prod-modusbryteren fungerte alle live i nettleseren uten konsollfeil — genuint mer kapabel enn noe jeg ville produsert uguidert. Dokumentasjonskostnad trekker poeng: READMEs egen 'Claude Code — manual clone'-kommando kloner repo-roten rett inn i ferdighetsmappen, noe som begraver SKILL.md to kataloger for dypt og ville stille brutt installasjonen hvis den ble fulgt bokstavelig.
Testet på: 2026-07-14 · Claude Code 2.x (agent harness)
Installer
git clone https://github.com/konraddzbik/architecture-diagram-skill cd architecture-diagram-skill mkdir -p ~/.claude/skills cp -r skills/architecture-diagram ~/.claude/skills/architecture-diagram
Kommandoer og eksempelprompter
/architecture-diagramBygger et klikkbart, animert enkeltfil HTML arkitekturdiagram pluss en ledsagende .md.
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):
Build a clickable diagram showing browser to auth gateway flowMake an animated architecture diagram for our OAuth loginCreate a step-through HTML diagram of our system's request path