diagram-design

A Claude Code agent skill that draws diagrams — 27 types, each emitted as a self-contained HTML+SVG file with no build step and no runtime dependency, styled to the user’s brand rather than to a library default (cathryn-lavery, MIT, ~3k★ / 220+ forks at snapshot, 22 commits). Installed by symlinking the repo into Claude Code’s skills directory or through the plugin marketplace.

What it does

The 27 types cover the usual engineering and business set — architecture, flowchart, sequence, state machine, ER, timeline, swimlane, quadrant, tree, org chart, Venn, pyramid, radar, Gantt, scatter, data pipeline — and each renders in three variants: minimal light, minimal dark, and full editorial. A /diagram-design:export command (or a plain-language request) exports PNG and SVG through Playwright.

Two parts of the design carry the weight.

Brand onboarding. The skill reads the user’s website once, pulls the dominant colors and the fonts, and reuses them across every later diagram — the README’s line is that the site’s paper color becomes the diagram background and the CTA color becomes the focal accent. It is a one-time context-capture step (~60s, per the README) whose product is durable styling state, the same move claude-md and agents-md make for project instructions, applied to visual identity.

A stated aesthetic, encoded as rules. One accent color highlighting one or two elements; three font families (Instrument Serif, Geist sans, Geist Mono); 1px hairlines; everything on a 4px grid; no shadows; an explicit goal of not looking AI-generated. The governing line is subtractive — “the highest-quality move is usually deletion. Every node earns its place.” The README also says when not to invoke it (simple lists, one-element “diagrams”).

Structurally it is a progressive-disclosure pack: 34 reference documents, of which only the ones for the requested diagram type load, plus a rendered gallery and lint tools that check output against the rules above.

Where it fits

This is an output-shape skill in reasoning-scaffolds’ sense, and the clearest one yet: it constrains the artifact — grid, hairline, font set, one accent — and leaves reasoning and capability alone. It extends that category past prose (i-have-adhd, renwei-writing) and past code (ponytail) into a visual artifact, which is where the category’s cheap-to-check property gets sharper still: the lint tools mean the form claim is checked by a program, not by a reader’s eye. Every other output-shape skill in the corpus states its rules and trusts the model to hold them; this one ships a checker. That is a small but real step along the same axis education-agent-skills moved (assert → audit), taken by a different route.

It also lengthens the skills-generalize-to-verticals list into diagramming, next door to beautify-github-readme (README presentation) and designpowers (a 10-agent design pipeline) — and the neighbourhood is instructive. Designpowers is an orchestration story; this is a single skill with a reference library behind it. Same vertical, opposite structural bet.

Then there is the self-contained-HTML output. No build, no JS, no CDN — the file opens in a browser and keeps working. That is the text-first-agent-design instinct pointed at the deliverable instead of the input: pick the representation that survives without a toolchain. It also rhymes with beautify-github-readme‘s Markdown-for-text / SVG-for-identity split — both authors reached for SVG as the durable visual carrier.

Cross-spoke context: the design-system substance here (tokens, type scale, grid) is adjacent to ui-frameworks-wiki’s design-system page, which owns design systems as a building concern. This page stays in the tooling spoke because the subject is the skill, not the system it emits.

Tier

T1 — the official project repository (first-party doc, per QUALITY.md). Trust is a separate axis: every quality claim is the author’s own, there is no measurement of whether the output reads better than a generic diagram, and the “matches your brand” claim rests on color/font extraction that nobody has evaluated. freshness: volatile — a 22-commit repo growing fast in stars; the type list and commands may change.

Related

agent-skills · agentskills-spec · reasoning-scaffolds · i-have-adhd · ponytail · beautify-github-readme · designpowers · renwei-writing · cathryn-lavery · claude-code