git404hub

what is architecture-diagram-skill fr?

konraddzbik/architecture-diagram-skill — explained in plain English

Analysis updated 2026-05-18

11HTMLAudience · developerComplexity · 1/5Setup · easy

tl;dr

Agent Skill for Claude Code, Gemini, and Copilot CLIs that generates an interactive self-contained HTML architecture diagram with animated data flows.

vibe map

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

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Generate a clickable architecture diagram for an internal design review

VIBE 2

Show a RAG pipeline step by step in an onboarding doc

VIBE 3

Walk a workshop audience through an auth flow with animated packets

VIBE 4

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

what's the stack?

HTMLJavaScriptSKILL.md

how it stacks up fr

konraddzbik/architecture-diagram-skillbrunosimon/esin-e1-p2026eng-hasan-hajjar/smart-blood-donation-platform
Stars111111
LanguageHTMLHTMLHTML
Last pushed2022-05-15
MaintenanceDormant
Setup difficultyeasyeasymoderate
Complexity1/51/53/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 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.

prompts (copy fr)

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

Frequently asked questions

what is architecture-diagram-skill fr?

Agent Skill for Claude Code, Gemini, and Copilot CLIs that generates an interactive self-contained HTML architecture diagram with animated data flows.

What language is architecture-diagram-skill written in?

Mainly HTML. The stack also includes HTML, JavaScript, SKILL.md.

How hard is architecture-diagram-skill to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is architecture-diagram-skill for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.