Interactive Architecture Diagrams
Bygger ett klickbart, animerat enfiligt HTML-arkitekturdiagram plus en medföljande .md.
Testad · Fungerar
Vad den 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örk/ljus 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-nodigt OAuth2-inloggningsdiagram från den levererade mallen och serverade det lokalt: stegnavigering, nyttolast-sidopanelen 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:ns 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.
Testad: 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
Kommandon och exempelprompter
/architecture-diagramBygger ett klickbart, animerat enfiligt HTML-arkitekturdiagram plus en medföljande .md.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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