**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.