What is Diagram Design?
Diagram Design is an agent skill by Cathryn Lavery, published under her company LittleMight, that turns a plain-language request into a diagram written as a single HTML file with inline SVG. It covers 45 diagram types, from architecture, flowcharts, sequence and state diagrams to quadrants, treemaps and exploded axonometric drawings, each in minimal light, minimal dark and full-editorial variants. The house style is fixed: 1px hairlines, no shadows, one accent colour for the one or two things that matter, and every coordinate on a 4px grid.
Ask it to onboard to a website and the agent fetches the homepage, extracts the palette and font stack, checks WCAG AA contrast, and writes the tokens to a style guide that every later diagram reads; named profiles keep several clients' brands apart. It also redraws existing draw.io, Mermaid and Excalidraw files, and exports SVG for Figma or PNG for slides.
It installs with `npx skills add cathrynlavery/diagram-design` into any Agent Skills host, or as a plugin for Claude Code, Codex, GitHub Copilot, Factory Droid, Qoder, Pi and Claude Cowork.
Is Diagram Design worth it?
Diagram Design is the diagram skill to beat for anything you plan to publish, and the reason is visible in its gallery rather than its feature list. The repository was created in April 2026 and has about 62,200 GitHub stars; skills.sh counts 21,200 installs through its CLI, which excludes the plugin marketplaces. It ships no tagged releases but is maintained daily: the plugin manifest reached version 2.6.136 on 27 October 2026.
The design rules do the work. Lavery's premise is that the model already understands the content and lacks only taste, so the skill writes that taste down: a target density of 4 out of 10, a reserved accent colour and a 4px grid, with CI checks for overlapping and clipped elements. Brand onboarding matters more than it sounds. Every diagram after it uses your site's background, call-to-action colour and fonts, and the contrast check proposes a darker value when a brand colour fails at 9 to 12px label sizes.
The import commands are the practical win for teams with old diagrams. A draw.io, Mermaid or Excalidraw file is redrawn at one of three detail levels (faithful up to 24 nodes, balanced up to 12, simplified up to 7), and every import ends with a ledger of what was merged or dropped. The README is candid about the cost: output depends on the model, the same prompt can lay out differently twice, and there is no editable source to review in a pull request. For architecture docs that change every sprint, Mermaid is still the better tool, as the README itself says.
Some friction is built in. A first-run gate pauses to ask about onboarding in each new project, which suits a person but blocks unattended runs (issue #262 proposes a way round it). PNG export needs Playwright and Chromium, and diagrams load fonts from Google Fonts by default, the only network request they make, unless you ask for system fonts. Next to fireworks-tech-graph, which targets technical architecture diagrams, Diagram Design covers far more types and brands them; anatomy goes deeper on a single isometric, interactive form.
Where it earns its place
A founder writing a weekly company blog
Add diagrams to posts that look like the rest of the site instead of generic rounded boxes
Run onboarding once against the blog's URL, then ask for a quadrant or pyramid per post and embed the HTML or exported SVG. Costs only model tokens, and replaces the 30-minute Figma sessions Lavery describes.
A solutions architect at a consultancy serving several clients
Turn each client's old draw.io diagrams into slides in that client's colours
Save a profile per client and put a `.diagram-design` marker in each project, then run `/diagram-design:import-drawio file.drawio --size=slide-16x9 --detail=simplified --audience=executive`. The fidelity ledger lists what was collapsed, which is worth checking before a client sees it.
A platform team lead documenting a system for an engineering handbook
Produce a polished architecture diagram for a published handbook page
Ask for an architecture or sequence diagram in plain words and export SVG with `/export-diagram --svg-only`. Keep the Mermaid source for diagrams the team edits each sprint; regenerating can change the layout, and there is nothing to diff.
Before you commit
- Setup
- `npx skills add cathrynlavery/diagram-design` for any Agent Skills host, or `/plugin marketplace add cathrynlavery/diagram-design` then `/plugin install diagram-design@diagram-design` in Claude Code for slash commands and updates. PNG export needs `pip install playwright && playwright install chromium`.
- Integrations
- Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, Pi, Gemini CLI, Cline, Windsurf, Amp, Kiro, OpenCode and Claude Cowork. Imports draw.io, Mermaid and Excalidraw; exports HTML, SVG and PNG at slide, document, social and print sizes.
- Data and privacy
- No server, accounts, analytics or telemetry, per the privacy policy. Generated files load Google Fonts by default, which sends the viewer's IP address to Google; the system-fonts option removes all network requests. Brand onboarding fetches only the site you name. MIT licence.
- Cost at scale
- Free for any team size. The cost is model tokens for each diagram and redraw; a team standardising on it pays nothing beyond the agent seats it already has.
- Limits
- About 45 open issues and pull requests, mostly new diagram types and fixes to the Mermaid importer and layout verifiers. Output quality depends on the model, and edits to the installed style guide can be replaced by updates unless you use saved profiles or an editable clone.
What's good
- 45 diagram types in a consistent editorial style
- Pulls palette and fonts from your website, with contrast checks
- Redraws draw.io, Mermaid and Excalidraw files
- Self-contained HTML with accessible SVG; MIT licence
What's not
- No editable source to diff or drag
- Same prompt can produce different layouts
- First-run style gate interrupts unattended runs
- PNG export needs Playwright and Chromium
Best for
Writers, founders and engineers who publish diagrams in posts, decks and docs and want them to match their brand.
Diagram Design alternatives
Diagram Design: common questions
- Is Diagram Design worth it?
- Diagram Design gives agents the taste they lack, and its diagrams look published rather than generated, at the price of an output you cannot diff or drag. We rate it 4.3 out of 5.
- How much does Diagram Design cost?
- Free and open source (MIT). You pay only for your agent's model usage.
- What are the downsides of Diagram Design?
- No editable source to diff or drag; same prompt can produce different layouts; first-run style gate interrupts unattended runs; pNG export needs Playwright and Chromium.
- Who is Diagram Design best for?
- Writers, founders and engineers who publish diagrams in posts, decks and docs and want them to match their brand.
- How much does Diagram Design cost for a team or in production?
- Free for any team size. The cost is model tokens for each diagram and redraw; a team standardising on it pays nothing beyond the agent seats it already has.
- Is Diagram Design safe for company data?
- No server, accounts, analytics or telemetry, per the privacy policy. Generated files load Google Fonts by default, which sends the viewer's IP address to Google; the system-fonts option removes all network requests. Brand onboarding fetches only the site you name. MIT licence.
- What are the best Diagram Design alternatives?
- The closest alternatives we have reviewed are fireworks-tech-graph, Anatomy and Anthropic Skills.
Answers checked Oct 28, 2026.
Make Diagram Design? Show this rating on your site
