architecture-diagramlisted

Build interactive, click-through architecture diagrams for software systems — a self-contained single HTML file with animated step-by-step flows, mode toggles (dev/prod, offline/online, v1/v2), dark/light theme, and a side panel with payload details, plus a companion markdown description. Use when the user wants to visualize or design a system: architecture diagram, service map, data flow, RAG/agentic flow, microservices topology, integration diagram, CI/CD or data/ETL pipeline, multi-agent system, or onboarding diagram — or to design a new service's flows before building. Natural-language triggers: 'I'm building X, what should the flow look like', 'pokaż jak działa system', 'diagram architektury', 'wizualizacja systemu', 'klikany diagram'. Do NOT use for static diagrams that belong inline (Mermaid/PlantUML), slide decks, or printable/PDF handouts — this produces interactive HTML for browser consumption.
konraddzbik/architecture-diagram-skill · ★ 93 · Data & Documents · score 80

Install: claude install-skill konraddzbik/architecture-diagram-skill

# Interactive Architecture Diagrams Build single-file, drop-in HTML pages that let workshop attendees, clients, or new team members **click through how a system works** — step by step, with animated data packets flowing between nodes, payload details on a side panel, and toggleable modes (offline/online, dev/prod, v1/v2). The aesthetic is dark and didactic-first: bounded nodes, gentle quadratic wires, packets that glow only on the active step — no rainbow gradients. Rebrand via the CSS tokens in `assets/css-tokens.css`. --- ## When to reach for this skill | Situation | Use this skill? | |---|---| | "Show me how the auth flow works" (interactive, for a workshop) | **Yes** | | "Design the RAG pipeline before we build it" (planning new service) | **Yes** | | "Map our microservices and how they communicate" | **Yes** | | "Visualize the CI/CD pipeline for onboarding docs" | **Yes** | | "Show the data flow through our ETL pipeline" | **Yes** | | "Draw an agentic multi-agent system with tool calls" | **Yes** | | "Build me an architecture mockup we can iterate on with the team" | **Yes** | | "Draw a sequence diagram for the PR" (static, goes in markdown) | No — a Mermaid sequence diagram inline is simpler | | "Add a diagram to a slide deck or PDF" (static, not interactive) | No — this produces interactive HTML, not images or slides | | "I just need a static boxes-and-arrows topology" (no flows/steps) | No — a Mermaid flowchart is enough | The differentiator is **interactivity +