Diagram Design: the Free Claude Skill That Draws Any Diagram You Describe
An open-source skill for Claude Code that turns a plain-words request into a finished, designed diagram in one HTML file, matched to your own website's colors and fonts. How to install it, what to ask, and the catch
2min read
1prompts to copy
4numbered steps
4sections
Diagram Design is an agent skill by Cathryn Lavery. You describe the diagram in plain words and Claude picks the type, states its plan, and writes one .html file you can open by double-clicking. It is past 54,000 stars on GitHub.
What it does (from the README)
- 45 diagram types: architecture, flowchart, sequence, state machine, timeline, org chart, quadrant, swimlane, Gantt, Venn, pyramid, Sankey, Kanban, user journey and more.
- Each comes in minimal light, minimal dark and full-editorial styles: hairline lines, one accent colour, no shadows.
- Match your brand: point it at your website once and every diagram after that uses your palette and fonts.
- Import: it redraws your existing Mermaid, draw.io and Excalidraw diagrams in the same clean style.
- Export to SVG or PNG.
Keep reading
Free, for an email.
Unlocks 3 more sections, 1 copy-paste prompt, the document version, and every other guide on the site, for free. Enter your email once to keep reading.
45,000+ follow where these guides come from.No spam. Unsubscribe in one click.