konraddzbik/architecture-diagram-skill

This repository is an Agent Skill, which is a folder of instructions that an AI coding assistant can load on demand. Once installed, when you ask the assistant to draw a system architecture diagram, this skill takes over and produces a single self-contained HTML file plus a markdown description. The HTML has no build step and no dependencies, so you can email it, host it, or open it locally in a browser. It is meant to work with Claude Code, Gemini CLI, GitHub Copilot CLI, OpenCode, and Cursor. The generated diagram is not a static picture. You can pick a scenario tab such as RAG Query, Login, or Ingest, and animated data packets travel along curved wires between the service boxes step by step. A side panel shows the current step's payload, description, and small chips for things like latency, auth headers, and ports. You can drag nodes around (they snap to a grid and the layout is saved in browser localStorage), toggle between modes like offline/online or dev/prod to swap labels and ports, and use play, pause, and step controls with keyboard shortcuts. There is also a dark/light theme toggle and a fullscreen mode for presentations. The README is explicit about when to reach for this skill and when not to. It suits interactive walk-throughs of architectures, data pipelines, RAG flows, microservice communication, CI/CD stages, auth flows, and onboarding documents. For a static box-and-arrow diagram or an inline sequence diagram in a pull request, the author suggests using a plain Mermaid diagram instead. Installation instructions are given for each supported assistant, covering both personal (all projects) and project (committed to the repo) scopes, with one-line commands as well as manual git clone steps.