konraddzbik/architecture-diagram-skill

★ 11HTMLAudience · developerComplexity · 1/5ActiveSetup · easy

Mindmap

mindmap
  root((architecture-diagram-skill))
    Inputs
      Architecture prompt
      Service list
      Flow scenarios
    Outputs
      Self-contained HTML
      Markdown description
      Animated diagrams
    Use Cases
      Workshop walkthroughs
      Design reviews
      Onboarding docs
      RAG flow visuals
    Tech Stack
      HTML
      JavaScript
      SKILL.md
      Claude Code

mindmap root((architecture-diagram-skill)) Inputs Architecture prompt Service list Flow scenarios Outputs Self-contained HTML Markdown description Animated diagrams Use Cases Workshop walkthroughs Design reviews Onboarding docs RAG flow visuals Tech Stack HTML JavaScript SKILL.md Claude Code

Things people build with this

USE CASE 1

Generate a clickable architecture diagram for an internal design review

USE CASE 2

Show a RAG pipeline step by step in an onboarding doc

USE CASE 3

Walk a workshop audience through an auth flow with animated packets

USE CASE 4

Drop a single HTML file into a repo so the team can iterate on a proposed system

Tech stack

HTMLJavaScriptSKILL.md

Getting it running

Difficulty · easy Time to first run · 5min

Requires one of the supported agent CLIs (Claude Code, Gemini, Copilot, OpenCode, or Cursor) installed.

In plain English

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.

Copy-paste prompts

Prompt 1

Install the architecture-diagram skill in Claude Code and generate an HTML diagram of a 3-service RAG pipeline

Prompt 2

Use the architecture-diagram skill to draw my microservices with login and ingest flows as separate scenario tabs

Prompt 3

Generate an architecture.html with dev and prod mode toggles for my Node and Postgres stack

Prompt 4

Add a new scenario tab to an existing architecture.html showing the token refresh path in OAuth2

Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.