Diagram Design is an MIT-licensed agent skill that makes coding agents draw editorial-quality diagrams as self-contained HTML and inline SVG — no Figma, no Mermaid renderer, no build step, no JavaScript, and no external image dependencies. Built by Cathryn Lavery, it topped GitHub Trending with roughly 2,850 stars in a single day, and now sits near 11,000 stars with 696 forks four months after its April 2026 first commit.

The library is 27 visual types — one type-*.md reference file each — covering architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, tree, org chart, Venn, layer stack, pyramid/funnel, radar, loop/flywheel, Gantt, bar, line, scatter, medallion, data flow, and several data-platform-specific layouts. Every type ships in three static variants — minimal light, minimal dark, and full-editorial — that open directly in a browser. Installation targets Claude Code (/plugin marketplace add), Codex (npx skills add), Pi (pi install), and Claude Cowork, all reading the same skills/diagram-design/ directory.

The part that separates it from a template pack is brand onboarding. Point the skill at a URL and it fetches the homepage, extracts the dominant palette and font stack, and maps detected values onto semantic tokens — paper, paper-2, ink, muted, accent, plus title/node-name/sublabel font roles — then shows a proposed diff before writing anything. It verifies WCAG AA contrast for ink over paper at diagram sizes (9-12px) first, proposing an adjusted value with an explanation when a brand color fails, and emits a fidelity receipt listing sampled URLs, exact color roles, font families and weights, and any fallback. A first-run gate refuses to silently ship default-skinned diagrams into a branded project.

It also redraws existing diagrams rather than converting them. It reads .drawio, .drawio.xml, .drawio.png, and .drawio.svg (including compressed payloads), plus .mmd, .mermaid, and fenced Mermaid blocks in Markdown — text parsing only, with no rendering, JavaScript, browser, or network access. Output is steered by four dials: format (html/svg/png/html+png), size (doc-inline through print-letter-landscape, which changes the viewBox and the type ramp so a projected slide gets 16px node names), detail (faithful ≤24 nodes, balanced ≤12, simplified ≤7, degraded by a fixed ladder), and audience (engineer/mixed/executive, which rewords rather than re-counts). Each import closes with a fidelity ledger naming what was merged, collapsed, or dropped.

Design discipline is enforced rather than suggested: target density is 4 out of 10, the accent color is reserved for the one or two things a reader should see first, and the style guide's own rule is that "the highest-quality move is usually deletion." Accessibility is built into the templates — role="img", a resolving aria-labelledby, first-child <title>/<desc> slots, and per-diagram ID prefixes so several inlined SVGs never collide. Optional motion (none, reveal, step, loop) defaults to off, always renders a complete static first frame, and rejects arbitrary inline scripts, remote assets, and CSS imports; reduced-motion output hides the playback controls entirely.

The main friction is install-related: managed installs can overwrite edits to references/style-guide.md on package update, so anyone customizing tokens by hand is directed to clone the repo and install the local path instead. PNG export also needs a one-time pip install playwright && playwright install chromium, and exports are diagram-only — the editorial cards and headers from -full variants do not come along.