architecture-diagram

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, v1/v2 (any keys; colors follow button order) 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, moved nodes 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 (below ~1140px wide the panel gives way to a one-line step summary); 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 exits non-zero on JavaScript errors (1) or lint warnings (2)

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

• System architecture — map services, databases, queues, and external APIs; watch requests flow between them step by step
• Data pipelines & ETL — show how data moves from ingestion through transformation to storage, with payload previews at each stage
• Agentic / RAG flows — visualize LLM chains, tool calls, retrieval-augmented generation, and multi-agent orchestration
• Microservices communication — trace requests through API gateways, service mesh, event buses, and worker queues
• CI/CD pipelines — walk through build, test, deploy, and rollback stages with environment toggles (staging/prod)
• Auth & security flows — OAuth2, SAML, mTLS handshakes, token refresh cycles with the full redirect dance
• Onboarding diagrams — give new team members a clickable walkthrough of "how does X actually work here"
• Design reviews — present a proposed architecture before building it; iterate on the diagram with stakeholders
• Workshop materials — let attendees click through a system at their own pace instead of watching static slides

---

Install

Claude Code — Plugin Marketplace (recommended)

/plugin marketplace add konraddzbik/architecture-diagram-skill
/plugin install architecture-diagram

That's it. The skill activates automatically whenever you ask for an architecture diagram, system flow, RAG pipeline, etc.

Claude Code — manual clone

The skill lives in skills/architecture-diagram/ inside this repo, so clone to a temp dir and copy that subfolder into place (Claude Code discovers SKILL.md exactly one level under skills/ — cloning the whole repo would nest it too deep).

Personal install (available in all your projects):

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram ~/.claude/skills/architecture-diagram

Project install (committed to a repo, shared with your team):

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram .claude/skills/architecture-diagram

Gemini CLI (recommended: one command)

gemini skills install https://github.com/konraddzbik/architecture-diagram-skill

This installs to ~/.gemini/skills/ (user-level, all projects). To install for just the current project:

gemini skills install https://github.com/konraddzbik/architecture-diagram-skill --scope workspace

Verify it loaded:

gemini skills list

If you're already in a session, reload without restarting:

/skills reload

Manual install (Gemini CLI)

Personal install — available in all your projects:

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram ~/.gemini/skills/architecture-diagram

Project install — committed to a repo, shared with your team:

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram .gemini/skills/architecture-diagram

Or use the cross-tool .agents/skills/ path (works in Gemini CLI, OpenCode, and other compatible tools):

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram .agents/skills/architecture-diagram

GitHub Copilot CLI

Requires GitHub CLI ≥ 2.90.0:

gh skill install konraddzbik/architecture-diagram-skill architecture-diagram

The skill is installed to .github/skills/ in your current project by default. To install it globally for all projects:

gh skill install konraddzbik/architecture-diagram-skill architecture-diagram --scope user

If you're already in a copilot session, reload without restarting:

/skills reload

Manual install (Copilot CLI)

Personal install — available in all your projects:

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram ~/.copilot/skills/architecture-diagram

Project install — committed to a repo, shared with your team:

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram .github/skills/architecture-diagram

OpenCode

Project install — committed to a repo, shared with your team:

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram .opencode/skills/architecture-diagram

Personal install — available in all your projects:

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram ~/.config/opencode/skills/architecture-diagram

Or use the Claude-compatible path (OpenCode reads .claude/skills/ too):

git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
cp -r /tmp/arch-skill/skills/architecture-diagram ~/.claude/skills/architecture-diagram

The skill activates automatically when you ask for an architecture diagram, system flow, RAG pipeline, etc.

Claude.ai (web / desktop / mobile)

1. Build a ZIP with the skill folder at its root (SKILL.md must sit directly inside architecture-diagram/, so GitHub's Download ZIP of the whole repo won't work):

   git clone https://github.com/konraddzbik/architecture-diagram-skill /tmp/arch-skill
   cd /tmp/arch-skill/skills && zip -r ~/architecture-diagram.zip architecture-diagram
   

2. In Claude, go to Settings → Capabilities → Skills → Upload skill
3. Upload architecture-diagram.zip
4. Toggle the skill on in your skills list

---

Try it

Once installed, just describe what you want. If you don't know where to start, just type:

Prepare an architecture view of this repository.

Claude will generate an architecture.html and architecture.md in your working directory. Open the HTML in a browser to see the interactive diagram — or ask Claude to show the results right in the terminal.

The skill triggers on phrases like architecture diagram, system flow, RAG flow, agentic flow, service map, or the Polish equivalents (diagram architektury, klikany diagram).

Example prompts

OAuth2 login flow

Build an interactive architecture diagram for an OAuth2 login flow with PKCE. Show the redirect dance between client, authorization server, and resource API step by step. Include a dev/prod mode toggle.

RAG pipeline design

I'm designing a RAG pipeline with embedding retrieval, a reranker, and an LLM. Show me a click-through diagram I can use in a design review. Toggle between offline (Docker, local Qdrant) and online (Cloud Run, BigQuery) modes.

Event-driven microservices

Visualize an event-driven order system: API gateway → Kafka → three consumers (inventory, billing, notifications). Toggle between synchronous (REST fallback) and asynchronous (Kafka) modes.

CI/CD pipeline

Show our CI/CD pipeline: GitHub push → GitHub Actions → build → test → deploy to staging → approval gate → deploy to prod. Toggle between staging and production environments.

Data ingestion pipeline

Visualize a data pipeline: webhook events → SQS → Lambda → transform → write to Postgres + push to Elasticsearch. Show the happy path and the dead-letter-queue retry flow.

Multi-agent system

Draw an agentic AI system: user query → orchestrator agent → tool-calling agent (search, calculator, code exec) → synthesis agent → response. Show how context flows between agents.

Microservices with service mesh

Map our microservices: mobile app → API gateway → user service, product service, order service. Each talks to its own DB. Show the checkout flow and the search flow with an Istio service mesh.