When a coding agent draws a diagram, the result is usually the same: rounded boxes, arbitrary colours, no hierarchy. A project called diagram-design, by developer cathrynlavery, attacks that with an editorial design system — and has become a trending repository on GitHub for it.
The skill ships 39 diagram types, from architecture, sequence and state machines to quadrants, swimlanes and Wardley maps, plus newer layout grammars such as Sankey, treemap, fishbone, kanban and database schemas. Every type comes in three static variants — minimal light, minimal dark and full editorial — and renders as self-contained HTML with inline SVG: no build step, no JavaScript, no external image dependencies. It installs as a plugin for Claude Code, Codex, Factory Droid, Pi and other Agent Skills-compatible hosts.
The sharper argument is branding. Running "onboard diagram-design to https://yoursite.com" fetches the homepage, extracts the dominant palette and font stack, and maps them onto semantic roles — paper, ink, accent, muted, link. The user confirms a proposed diff, and the tokens are written into the skill's style guide. Brand matching also emits a "fidelity receipt": sampled URLs, exact colour roles, font families and weights, font source URLs and any fallback. A first-run gate stops the skill from quietly shipping default-skinned diagrams into a branded project.
What the project encodes about design discipline is equally interesting. One accent colour, one or two focal elements per diagram, 1px hairline borders, no shadows, a maximum corner radius of 10px — and every coordinate, width and gap divisible by 4. Three font roles are fixed: a serif for titles, a sans for node names, a mono for technical sub-labels. The stated reason is not taste but avoiding the look that gives AI-generated graphics away.
The quality assurance is unusually sober. The project's own CI renders every template in headless Chromium and measures clipping by pixel difference rather than geometry, on the argument that getBoundingClientRect() ignores stroke width, markers and clip-path. Area-driven chart types get their own gates: treemaps fail when a cell's share of the drawn area does not match the value printed inside it, waterfall charts fail when start, deltas and end do not reconcile, Sankeys fail when quantities are not conserved. Import paths accept draw.io, Mermaid and Excalidraw files — and prefer to redraw them at a chosen format, size, detail level and audience rather than inherit the source geometry.
Whether this stays a niche project or changes how agents illustrate documentation is an open question. But it shows how far the skill economy now reaches: not single prompts any more, but maintained design and testing standards, installed as a package across half a dozen tools.
