diagram-design
An agent skill that draws editorial diagrams as one self-contained HTML + SVG file.
- Stars
- 64.2k
- Forks
- 4.2k
- Licence
- MIT
- Language
- HTML
- Last update
- 5 days ago
- Type
- AI model / agent
What it is
Diagram Design is a skill you add to a coding agent such as Claude Code, Codex, Cursor, or GitHub Copilot. You describe the diagram you want in plain words, and the agent produces a single HTML file containing SVG that you can open in a browser. The README says it supports 45 diagram types and can match your site's palette and fonts after you run an onboarding step.
- Ask an agent for an architecture diagram of an app with frontend, backend, database, and cache components
- Create a quadrant chart comparing projects by impact and effort
- Draw a sequence diagram of an API call with token refresh
- Redraw a plain first-pass diagram in a consistent editorial style
- Export a diagram to PNG or SVG using the export command
Great for
- Developers who already use a supported coding agent and want architecture or flow diagrams without learning a diagram language
- Teams that want diagrams to follow their own brand colors and fonts
- People who want diagrams they can open by double-clicking, with no server needed
- Anyone who wants to import existing Mermaid, draw.io, or Excalidraw files and redraw them
Not ideal for
- People without a supported AI coding agent, since the project is delivered as an agent skill and the README does not describe a standalone app
- Anyone who needs live, collaborative diagram editing, which the README does not mention
- Teams that need a fully manual drag-and-drop editor, because the agent chooses the diagram type and writes the file
How to get it
- 1
Install with a package manager
You'll need: A supported agent host such as Claude Code, Codex, Cursor, or GitHub Copilot · Node.js (needed for the npx command; version not stated in the README excerpt)
Install the skill with the cross-agent skills CLI
npx skills add cathrynlavery/diagram-designAdd the Claude Code plugin marketplace
/plugin marketplace add cathrynlavery/diagram-designInstall the Claude Code plugin
/plugin install diagram-design@diagram-design - 2
Run it
- Install the skill using one of the commands above for your host
- In Claude Code, run /reload-plugins if prompted, or start a new session
- Ask your agent in plain words for a diagram, for example an architecture diagram of your app
- Open the generated .html file by double-clicking it
- 3
Get the most out of it
- Run the onboarding request with your website URL so diagrams match your palette and fonts
- Use the import commands to redraw existing Mermaid, draw.io, or Excalidraw diagrams
- Use the export command to produce PNG or SVG files from a diagram
- Enable auto-update in Claude Code so the plugin refreshes in the background
- Use /doctor to check your setup if something is not working
Downloads
Strengths
- Output is one self-contained HTML and SVG file that opens without extra tooling
- Works across many agent hosts, with installation steps documented for each
- Licensed under MIT
Trade-offs
- The README does not state a release version, so update behavior depends on each host's install path
- Quality and type choice depend on the agent that runs the skill, which the README does not evaluate
- Some install paths (such as the Cowork organization marketplace) require extra setup like mirroring the repository
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| diagram-design (this) | 64.2k | AI model / agent | beginner | 5 days ago | Developers who already use a supported coding agent and want architecture or flow diagrams without learning a diagram language |
| mermaid | 91k | Dev tool | beginner | 4 days ago | Developers who want diagrams stored as text alongside their code and docs |
| excalidraw | 135k | App | beginner | 4 days ago | Teams sketching diagrams or wireframes together in a shared canvas |
| Kami | 12.2k | AI model / agent | beginner | 5 days ago | People who use Claude Code, Codex, or Cursor and want polished documents without manual layout work |
| taste-skill | 108k | AI model / agent | beginner | 6 days ago | Developers using Claude Code or Codex who want less generic frontend output |
| humanizer | 63.8k | AI model / agent | beginner | 9 days ago | Writers who draft with an AI and want the final text to sound more natural |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.