diagram-design: an agent skill at 51k stars

diagram-design is an open-source agent skill maintained by designer Cathryn Lavery through her company LittleMight. It installs a set of editorial-design rules into coding agents such as Claude Code and Codex: you describe the diagram in one sentence, the agent picks a type, states a plan, and writes a single self-contained HTML+SVG file you can open by double-clicking. On October 12, 2026, it ranked No. 4 on GitHub’s daily Trending page, gaining 1,083 stars in a day for a total of 51,384 stars and 3,246 forks (GitHub API, checked that day). The repo’s description is a slogan: 44 diagram types, no shadows, no “Mermaid slop”.

Key points

No. 4 on GitHub’s daily Trending page on Oct 12, up 1,083 stars that day; the API read 51,384 stars and 3,246 forks.
The repository was created on April 16, 2026, is MIT-licensed, and is written mostly in HTML; the latest plugin version is 2.6.74, last pushed Oct 10, 2026.
The “44 types” count only holds since v2.6 (from Aug 20, 2026); the official site badge still reads “17k+ stars” — more than three times behind the repo, so quote stars from the GitHub API.

Background

The skill started with the author’s own blog. In the README, Lavery recalls that diagrams for littlemight.com came back from Claude as “a generic rounded-box thing” that matched nothing else on the site, so she would either fight Figma for half an hour or skip the diagram. Her fix was to write the taste down as rules: one accent color for the one or two nodes that matter, 1px hairlines, no shadows, every coordinate on a 4px grid. The README quotes her own principle — “The highest-quality move is usually deletion.”

The star trajectory is a story in itself. On Aug 20, 2026, a Chinese blog post on cnblogs still carried “23K Stars” in its title (title and date verified through search snapshots); by Oct 12 the GitHub API read 51,384 — more than double in about eight weeks. The skill is riding the same agent-skill ecosystem our earlier entries on the Pi framework and OpenClaw keep coming back to: the README documents install paths for more than ten hosts, from Claude Code, Codex and Cursor to Gemini CLI and Pi.

The facts

What it makes and how it compares, per the README’s own table (adapted from “How it compares”, read Oct 12, 2026):

	Mermaid / PlantUML	draw.io / Excalidraw	Diagram Design
You make it by	Writing text	Dragging shapes	Describing it to your agent
Layout	Automatic	Manual	Placed by the agent on a grid, with CI checks for overlaps and clipping
Look	The renderer’s theme	Whatever you draw	One editorial style, matched to your brand
Output	Text that renders on GitHub	An editable source file	One HTML file with inline SVG, exportable to SVG / PNG

Checkable specifics: install with npx skills add cathrynlavery/diagram-design; in Claude Code it comes through the plugin marketplace, which disables auto-updates by default until you toggle them on. Each of the 44 types ships three variants — minimal light, minimal dark, full-editorial. The finished file makes exactly one network request by default, three Google Fonts; ask for system fonts and it runs fully offline.

Redrawing existing diagrams is the other leg, completed during 2.6: three import pipelines for draw.io (including .drawio.png with an embedded diagram), Mermaid (.mmd and fenced Markdown blocks) and Excalidraw (.excalidraw scene files), plus four dials — format, size, detail and audience. Detail caps at 24 nodes on faithful, 12 on balanced, 7 on simplified; audience rewords labels without changing the count. Every import ends with a fidelity ledger listing what was merged, collapsed or dropped. That puts it on the opposite road from tools like Excalidraw Architect MCP, which generate editable source files rather than restyled output.

The CHANGELOG shows 2.6 (covering 2.6.0–2.6.70, Aug 20 to Oct 9, 2026) added waterfall, heatmap, architecture delta and exploded axonometric types, a GitHub Copilot install path, an upload package for OpenAI’s plugin directory, and CJK font support; the Unreleased section holds a WCAG contrast gate in CI and an offline font option. License: MIT.

How the taste works

The mechanism is semantic tokens, not templates. The default skin is jet-black with a tangerine accent; say “onboard diagram-design to https://yoursite.com” and the skill fetches that site’s body background, text color, CTA color and fonts, maps them into five roles — paper, ink, muted, accent, link — runs a WCAG AA contrast check first (diagram text is validated at 9–12px), and only then writes the tokens to style-guide.md. Every later diagram reads that file. A first-run gate stops you in a new project if the style guide is still default; multi-client setups isolate brands with named profiles and a .diagram-design marker file.

What others say

Chinese coverage arrived before the stars did. A Aug 20 post by iTech on cnblogs framed it as encoding a design system into an agent skill, so that “design systems no longer serve only designers, but every developer generating content with AI” (the blog blocks deep pagination; title, date and quote come from search snapshots). On Hacker News, a submission titled “An open-source diagram skill for designer” has sat at 2 points with zero comments since Sep 14 — the energy is on GitHub Trending and in Chinese communities, not on HN. The official site’s badge still says “17k+ stars”, out of step with the repo’s actual 51k. The sharpest positioning, though, is the README’s own caveat: for docs that live in Git and change every sprint, Mermaid is still the better fit — Diagram Design is for the diagram you are going to publish.

Our take

diagram-design is evidence for a claim worth keeping: the weak link in AI output often sits one layer above the model, in taste. The skill trains no model — it writes layout and typography rules the agent must follow, and doubling its stars in eight weeks says that layer is real. “De-AI-ing” output turns out to be a systems problem you can solve at the prompt level, without waiting for the next model release. For engineers publishing blog posts, docs or exec decks, it buys back the half hour lost in Figma.

The costs are stated, not hidden: run the same prompt twice and the layout can differ; the output has no diffable text source and no canvas to drag boxes on — the README concedes both. And mind the type count when reading older coverage: the CHANGELOG’s 2.5 gallery (Aug 18, 2026) held 38 types, and 44 only holds after 2.6 — same project, different times.

How to try it

Two steps to a Claude Code diagram skill. First, install:

npx skills add cathrynlavery/diagram-design

Then describe what you need — “Make me an architecture diagram of my app: frontend, backend, database, Redis cache” — or redraw an existing file with /diagram-design:import-mermaid README.md --diagram=all. To browse before installing, the gallery at cathrynlavery.github.io/diagram-design shows all 44 types in light, dark and full-editorial variants.