Diagram Design is an agent skill that produces editorial-quality diagrams as self-contained HTML with inline SVG, built for Claude Code, Codex, Factory Droid, Pi and other hosts that support Agent Skills. It is aimed at developers and technical writers who regularly need an architecture sketch, a flowchart or a state machine for a post, a README or a deck, and who do not want the result to look like a default Mermaid render.
What it does
The skill ships a catalog of named diagram types and draws them to a fixed house style. The count has moved as the project has grown: the GitHub description and the channel's video still say 38 types, while the README in the repository says 39. Version 2.5.10 added ten layout grammars on its own — Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map and database schema — on top of the staples the video calls out: architecture, flowcharts, state machines and pyramids. Version 2.0 introduced the Loop, a flywheel layout with a shared-memory hub where dashed lines carry the write-backs.
The style rules are the point as much as the type list. No drop shadows, no generic rounded boxes, no Mermaid look. The README's pitch is blunt about what it is replacing: asking a model for a diagram and getting back something generic, or opening Figma and losing half an hour to picking colors.
It also works on diagrams you already have. Point it at a draw.io or Mermaid source and it will redraw that source at a format, size and detail level you choose, rather than making you start over.
How it works
Two design decisions do most of the work.
The first is that semantic patterns are kept separate from layout. A queue, a policy trace or a trust boundary is described as behavior, and the skill renders it using the nearest existing layout type instead of inventing a new one. That is how the project keeps the type count from sprawling while still covering ideas that do not have a dedicated diagram shape.
The second is the output format. Every diagram is a self-contained HTML file with SVG inside it. There is no renderer to install, no build step and no image pipeline — you open the file, and you can drop the markup into a page. Static HTML is the default; since version 2.3 there is an optional, accessible motion mode for explanations that need to be walked through in order.
Brand matching is the part the video leans on: the skill reads your website and picks up its design system, so the diagram comes out in your colors and type rather than in a generic palette.
Getting started
The repository is MIT-licensed and is mostly HTML — it is the skill itself, plus screenshots under docs/screenshots showing the architecture and Loop examples. You install it into an agent host that supports Agent Skills, then ask for the diagram in plain language: name the type you want, or hand over an existing draw.io or Mermaid file and say what format, size and level of detail to redraw it at. Give it your site so it has a design system to match.
When to use it / when not
It fits well when you are already working inside one of the supported coding agents and you need publishable diagrams for documentation, articles or slides, and when a consistent visual style across many diagrams matters more than fiddling with individual ones.
It is a poor fit in a few cases:
- You do not use Claude Code, Codex, Factory Droid, Pi or another Agent Skills host — the materials describe no standalone CLI or web app.
- You want diagrams-as-code checked into a repository and rendered by the platform itself, which is what Mermaid in Markdown already does on GitHub.
- You want a shared canvas that several people drag boxes around on; this generates finished files rather than editable documents.
Alternatives
The README names its own comparisons. Mermaid is the default answer inside Markdown and stays the easiest way to keep a diagram next to the code, but its look is fixed and generic. draw.io gives you a real editor and full manual control at the cost of your time. Figma is the design-team route and the one the README explicitly rules out for this task. And you can always ask a model directly for SVG — which is the baseline this project exists to beat.
With 31,000 stars and 2,000 forks since its April 2026 start, and pushes continuing through early September 2026, this is one of the more widely adopted Agent Skills in circulation. Take it seriously if you write technical content or documentation with an AI coding agent already open and you keep shipping diagrams that clash with everything around them; the value is not that it can draw a flowchart — models could already do that — but that the output has a consistent, deliberate style and lands as a file you can publish without a second pass.