Architecture Diagram Skill

Interactive Architecture Diagrams

Agent Skill for Claude Code · Gemini CLI · GitHub Copilot CLI · OpenCode · Cursor Build click-through, animated system architecture diagrams as a single HTML file. No build step. No dependencies. One file you can email, host, or open locally.

Install · Try It · Examples · Skill Spec

Build click-through, animated system architecture diagrams as a single HTML file. Drop it into a workshop, design review, or onboarding doc and let people watch the data flow instead of reading static boxes-and-arrows.

This is an Agent Skill — a folder of instructions any compatible AI coding agent loads on demand. When you ask for an architecture diagram, this skill takes over and produces a self-contained architecture.html plus a companion architecture.md description. Works with Claude Code, Gemini CLI, GitHub Copilot CLI, OpenCode, Cursor, and any tool supporting the SKILL.md standard.

---

What you get

Each generated diagram includes:

• Named flows — pick a scenario tab (RAG Query, Login, Ingest, …) and watch it play out step by step
• Animated data packets glowing along quadratic-curve wires between services
• Side panel showing the current step's payload, description, and metadata chips (latency, auth headers, ports)
• Mode toggles — switch between offline/online, dev/prod, or v1/v2 to swap node labels, ports, and payloads in place
• Drag-and-drop nodes — reposition any tile by dragging (or Shift+Arrows on a focused node); snaps to grid, wires redraw live, layout saved to localStorage
• Player controls — play/pause/step, keyboard shortcuts, visual progress bar, screen-reader announcements
• Dark/light theme toggle — follows your OS preference, switch with one click or press T (saved in localStorage)
• Fullscreen mode — press F to expand the canvas for presentations with the controls, flow tabs and step panel still at hand; Escape to exit
• Self-linting — the page warns in the console about unknown node ids, flows without tabs, and leftover placeholders; references/screenshot.js prints the same list and fails on JavaScript errors

No build step. No dependencies. One HTML file you can email, host, or open locally.

Battle-tested on a public RAG workshop (Eskadra Bielik) and several internal design reviews.

---

When to use this skill

Situation	Use this?
"Show me how the auth flow works" (interactive, for a workshop)	Yes
"Design the RAG pipeline before we build it" (planning a new service)	Yes
"Build an architecture mockup we can iterate on with the team"	Yes
"Visualize our microservices and how they communicate"	Yes
"Map out the CI/CD pipeline for onboarding docs"	Yes
"Show the data flow through our ETL pipeline"	Yes
"Draw a sequence diagram for this PR" (static, lives in markdown)	No — a Mermaid sequence diagram inline is simpler
"I just need a static boxes-and-arrows topology" (no flows/steps)	No — a Mermaid flowchart is enough

The differentiator is interactivity + sequenced data flow. If the value is "click through it and watch what happens," this skill applies.

Use cases