Diagram Design: Claude draws diagrams like a designer

The free skill from the reel. You describe a diagram in one sentence, your coding agent picks the right type (architecture, flowchart, timeline, funnel, org chart, Sankey and more) and writes one self-contained HTML file that opens in any browser. Point it at your website once and every diagram uses your colours and fonts.

CostFree and open source (MIT). You only pay for the AI tool you already use (Claude Code, Codex, Cursor...).

Does44 diagram types (the README gallery lists 45), each in minimal light, minimal dark and full-editorial looks. Output is one HTML + SVG file, no build step. It can also redraw Mermaid, draw.io and Excalidraw files.

NeedsA coding agent that supports skills or plugins: Claude Code, Codex, GitHub Copilot, Cursor, Cline, Gemini CLI, Windsurf and more. Python 3 for its helper scripts. PNG export needs Playwright.

Proof58,000+ stars and 3,700+ forks on GitHub (checked 19 Oct 2026). Created in April 2026.

Checked on 19 Oct 2026. Tools change fast, so the official page always wins if it says something different.

What you need first

1A coding agentClaude Code, Codex, Cursor, GitHub Copilot or another tool that reads Agent Skills. It doesn't work in a plain chat window.

2Your website (optional)So it can copy your brand colours and fonts. Without it, diagrams use a black + tangerine default.

Step by step

Install it (Claude Code)

In Claude Code type /plugin marketplace add cathrynlavery/diagram-design then /plugin install diagram-design@diagram-design. To get updates automatically: /plugin → Marketplaces → diagram-design → Enable auto-update.

Tip: Official builds come only from this GitHub repo.

Or install it anywhere else

Cursor, Cline, Gemini CLI, Windsurf and other skill hosts: run npx skills add cathrynlavery/diagram-design in your terminal. Codex: codex plugin marketplace add cathrynlavery/diagram-design then codex plugin add diagram-design@diagram-design.

Give it your brand

Tell your agent: onboard diagram-design to https://yoursite.com. It reads your homepage, picks out your colours and fonts, shows you the change, and saves it when you say yes.

Ask for a diagram

Plain words work: "Make me an architecture diagram of my app: frontend, backend, database, Redis cache." or "I need a quadrant showing Q2 projects by impact vs effort." It tells you the plan, then writes one .html file. Open it in any browser.

Change it

There's no drag-and-drop canvas. Ask the agent for changes ("make the database the accent", "add a cache box") or edit the SVG by hand.

Learn this with me

LIVE · THU 15 OCT

Live AI Masterclass

8 ways I make money with AI, built live step by step. Zero experience, no code, any age.

Thu 15 Oct · 6pm UK · 1pm ET
New date coming soon. See what you'll learn and the next date →
2 hours live + the replay
$150 one time · only 10 seats

Join the masterclass →

MEMBERS

The Unnerd AI Club

Not a course. A step-by-step system to make money with AI: pick one money path and follow every step.

52 live classes a year
Q&A 7 days a week + 1:1 calls with me
$100/month · cancel any time

Join the club →

The catch

You need a coding agent. It's a skill for tools like Claude Code, Codex or Cursor, not something you click in a website.
Results vary. Quality depends on the AI model, and the same prompt can give a different layout each time.
Not an editable canvas. You can't drag boxes around. For diagrams in docs that change every week, the README itself says Mermaid is a better fit.
Fonts load from Google Fonts by default, so it needs internet unless you switch to system fonts.

Official links

The skill on GitHub (official) ↗Project site with the full gallery ↗

Want to go further?

I show a new AI tool every week, and how to make money or save hours with it. No tech background needed.

Join the live masterclass Join the club

More free tools →

Unnerd AI · I'm not linked to this tool or its makers, I just think it's useful.