Interactive Architecture Diagrams
Bouwt een click-through, geanimeerd enkelbestand HTML architectuurdiagram plus een begeleidende .md.
Getest · Werkt
Wat het doet
Genereert een zelfstandig interactief HTML diagram — flow tabs, geanimeerde SVG datapakketten, een zijpaneel met per-stap payloads, modus schakelaars (dev/prod, offline/online), drag-and-drop nodes, donker/licht thema — plus een begeleidende architecture.md, vanuit een eenvoudig taalgebruik beschrijving van de services en flows van een systeem. Activeert op verzoeken om een servicemap, RAG/agentic flow, CI/CD pipeline, of microservices topologie te visualiseren voor een workshop of design review; kiest expliciet niet voor statische Mermaid diagrammen, slides of PDF's.
Testrapport
Bouwde een echt 3-node OAuth2 login diagram vanuit de meegeleverde template en serveerde het lokaal: stapnavigatie, het payload zijpaneel en de dev/prod modus schakelaar werkten allemaal live in de browser zonder consolefouten — werkelijk capabeler dan wat ik ongeleid zou produceren. Documentatie kostte punten: het eigen 'Claude Code — manual clone' commando van de README kloont de repo root rechtstreeks in de skills map, wat SKILL.md twee directories te diep begraaft en de installatie stilzwijgend zou breken indien letterlijk gevolgd.
Getest op: 2026-07-14 · Claude Code 2.x (agent harness)
Installatie
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
Commando's en voorbeeldprompts
/architecture-diagramBouwt een click-through, geanimeerd enkelbestand HTML architectuurdiagram plus een begeleidende .md.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
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