Architecture Diagram Skill plugin
Builds interactive architecture diagrams in one HTML file: animated data flows, environment toggles and a step detail panel
- 160 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill creates local HTML and Markdown files and sends nothing over the network
- The diagram stores node positions and theme in browser localStorage
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/architecture-diagram-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill creates local HTML and Markdown files and sends nothing over the network
- The diagram stores node positions and theme in browser localStorage
This is third-party code. Review the repository files before installing.
What it does
Architecture Diagram Skill creates system architecture diagrams as a single self-contained `architecture.html` file with a companion `architecture.md` description. You can email the diagram, host it or open it locally: there is no build step and no dependencies. Every diagram has named scenarios (tabs like "RAG query", "Login", "Ingest") through which animated data packets travel step by step along curves between services. The side panel shows the step payload, a description and chips for latency, auth headers and ports. Mode toggles (offline and online, dev and prod, v1 and v2) swap node labels, ports and payloads in place. Nodes can be dragged with the mouse or Shift plus arrows, and their position is saved in localStorage. There are play, step and pause controls, keyboard shortcuts, a fullscreen mode on `F`, a theme toggle on `T` and screen reader announcements. It fits RAG and agentic flows, microservices, CI/CD, ETL and multi-agent systems.
Who it is for. Architects, team leads and speakers who need a clear system diagram for a workshop, design review or onboarding.
Good fit when
- Before launching a new service you need to walk the team through a RAG pipeline and show how data moves step by step
- Onboarding docs lack a live CI/CD diagram with a staging and prod toggle
- You need an ETL diagram showing data at every stage
- At a workshop attendees need a diagram they can click through and play scenarios
Not a fit when
- You need a static diagram for print or Confluence: the file is interactive and a print version needs separate work
- You need a UML or ER diagram in standard notation: the skill draws data flows and scenarios
- You need a cloud topology diagram from Terraform: the skill does not read infrastructure code by itself
Example request
Draw an interactive diagram of a RAG service: document ingest, user query and answer, with a dev and prod toggleLimitations
The result is a single HTML file and a browser is needed to view it. Node positions and theme live in `localStorage` and are tied to the browser and page address. The diagram describes the scenarios you provided and does not check how the system actually works.
Compare names and payloads in the diagram with real service contracts. Claude Code uses the plugin marketplace route, while other agents need a manual copy of `skills/architecture-diagram/`. The skill version in the manifest is updated with `CHANGELOG.md`.
How to disable. In Claude Code run `/plugin uninstall architecture-diagram`. For a manual install delete the `architecture-diagram` folder from the agent skills directory. Generated HTML files can simply be deleted.
FAQ
How do I install the skill in Claude Code?
Run `/plugin marketplace add konraddzbik/architecture-diagram-skill` and `/plugin install architecture-diagram`. The skill activates when you ask for an architecture or data flow diagram.
Which agents does it work with?
The author names Claude Code, Gemini CLI, GitHub Copilot CLI, OpenCode and Cursor, plus any tool that supports the SKILL.md standard.
Do I need libraries or a build?
No, the result is a single HTML file with no build and no dependencies. Open it locally or host it.
Which keys does the diagram have?
`F` toggles fullscreen and `T` switches the theme. Playback and steps can be driven from the keyboard, and nodes move with Shift plus arrows.
Are diagram edits saved?
Node positions are saved in browser localStorage. The file itself stays as the agent created it, so edit the HTML for permanent changes.
Discussion
No questions or reviews yet.
Related
Pluginsstack-diagram is an architecture-diagram skill that embeds logos and fonts in HTML, so the finished file opens offline.
A skill that renders a system architecture as one HTML page with pan, zoom, node focus and a light or dark theme.
A skill that draws an interactive isometric map of a repository: buildings sized by real code, flows traced along real calls.
A skill that turns code into interactive diagrams: eleven types, source-line evidence and a single offline HTML file.
Fireworks Tech Graph
fireworks-tech-graph
A skill that builds technical SVG diagrams from a text description: architecture, UML, agent and cloud schemes, with PNG and GIF export
A skill that turns an architecture discussion into an interactive isometric map of the system and a SYSTEM.md text twin from one data file
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Architecture Diagram Skill (this card) | no | 160 | |
| arch-diagram | no | 126 | draws architecture diagrams without animated flows or a payload side panel |
| Diagram Design | no | 66,822 | a general diagram skill, with no ready scenarios with an interactive player |
README in short
The repository packages the `architecture-diagram` skill as a Claude Code plugin and as a plain Agent Skill. From a request like "describe the RAG pipeline" it assembles a diagram file with flows, modes and a detail panel. The author provides examples and interface checks in `tests/` and `scripts/check.js`.
README badge
Original SKILL.md
--- name: architecture-diagram version: 1.5.0 description: "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." license: MIT --- # 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 + seq