Interactive Architecture Diagrams
Bygger ett klickbart, animerat HTML-arkitekturdiagram i en enda fil plus en medföljande .md.
Testet · Virker
Hvad det gør
Genererar ett fristående interaktivt HTML-diagram — flikflöden, animerade SVG-datapack, en sidopanel med stegvisa nyttolaster, lägesomkopplare (dev/prod, offline/online), dra-och-släpp-noder, mörkt/ljust tema — plus en medföljande architecture.md, från en vanlig beskrivning av ett systems tjänster och flöden. Aktiveras vid förfrågningar om att visualisera en tjänstekarta, RAG/agentiskt flöde, CI/CD-pipeline eller mikrotjänsttopologi för en workshop eller designgranskning; väljer uttryckligen bort statiska Mermaid-diagram, bilder eller PDF-filer.
Testrapport
Byggde ett verkligt 3-noders OAuth2-inloggningsdiagram från den levererade mallen och serverade det lokalt: stegnavigering, nyttolastens sidopanel och dev/prod-lägesomkopplaren fungerade alla live i webbläsaren utan några konsolfel — genuint mer kapabel än något jag skulle producera olett. Dokumentationskostnad drog ner poäng: README:s egen 'Claude Code — manual clone'-kommando klonar repots rot rakt in i färdighetsmappen, vilket begraver SKILL.md två kataloger för djupt och skulle tyst bryta installationen om det följdes bokstavligt.
Testet: 2026-07-14 · Claude Code 2.x (agent harness)
Installation
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 ett klickbart, animerat HTML-arkitekturdiagram i en enda fil plus en medföljande .md.
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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