Guide · Open source
How to use diagram-design: install and draw diagrams with your coding agent
Updated · written with AI from the project's own documentation and checked against our catalogue data
Diagram Design is an agent skill for coding agents such as Claude Code, Codex, Cursor and GitHub Copilot. You describe a diagram in plain words, and the agent writes a single HTML file containing SVG that opens in a browser. This guide shows how to install it, make a first diagram, match your site's look, and know when it fits your work.
diagram-designcathrynlavery/diagram-design · ★ 64.2k · MIT Install options & downloads Quick start
- 1Confirm your host. Make sure you use a supported agent such as Claude Code, Codex, Cursor or GitHub Copilot, and that Node.js is available.
- 2Install the skill. Run npx skills add cathrynlavery/diagram-design, or add the Claude Code plugin marketplace and install the plugin.
- 3Describe the diagram. Ask your agent in plain words for the diagram you need, such as an architecture or sequence diagram.
- 4Let the agent choose the type. The agent picks one of the 45 diagram types and states its plan before writing the file.
- 5Open the HTML file. Double-click the single self-contained .html file the agent produces to view the SVG in your browser.
- 6Optionally onboard your brand. Ask the agent to onboard diagram-design to your site so later diagrams use your palette and fonts.
Check what you need before installing
Diagram Design is delivered as a skill for a supported agent host, not as a standalone app. The README lists Claude Code, Codex, Cursor and GitHub Copilot as examples, along with other hosts that read Agent Skills.
The README also says Node.js is needed for the npx command. It does not state a required Node.js version, so check the project's documentation for that.
- A supported agent host, such as Claude Code, Codex, Cursor or GitHub Copilot
- Node.js, for the npx command
Install the skill
The simplest route in the README is the cross-agent skills CLI. Run this from your terminal.
In Claude Code, you can instead add the plugin marketplace and install the plugin, which gives you updates and slash commands. The README notes that official builds come only from the project's repository.
- Cross-agent CLI: use the npx command below
- Claude Code: add the marketplace, then install the plugin with the second block
npx skills add cathrynlavery/diagram-design
/plugin marketplace add cathrynlavery/diagram-design
/plugin install diagram-design@diagram-designMake your first diagram
Ask your agent for a diagram in plain language. You do not need to write a diagram language. The README gives examples such as an architecture diagram of a frontend, backend, database and Redis cache, or a quadrant of projects by impact versus effort.
The agent picks the diagram type, states its plan, and writes one .html file. Open that file by double-clicking it. No server is needed.
- Name the parts and relationships you want shown
- Let the agent choose the diagram type, since it decides this itself
- Open the resulting .html file in any browser
Match diagrams to your brand with onboarding
The README says you can run an onboarding step, for example by asking your agent to onboard diagram-design to your website address. The skill then pulls your palette and fonts so later diagrams match your site.
The README does not describe the details of how colours are extracted, so check the output yourself before sharing diagrams.
- Give the agent your site address in the onboarding request
- Review the first diagram to confirm colours and fonts look right
Onboard diagram-design to https://yoursite.comImport and export existing diagrams
The README says you can import existing Mermaid, draw.io or Excalidraw files and redraw them. The Claude Code and Pi listings also mention import and export commands such as /import-mermaid and /export-diagram.
The README excerpt includes a section on exporting to PNG and SVG, but the full details were cut off, so consult the project's README for exact steps.
- Import: redraw existing Mermaid, draw.io or Excalidraw files
- Export: the README links an export section for PNG and SVG output
What people use it for
- Architecture diagrams of an app's frontend, backend, database and cache
- Quadrant charts, such as projects plotted by impact versus effort
- Sequence diagrams, such as a bearer token call with refresh on a 401 response
- Redrawing existing Mermaid, draw.io or Excalidraw diagrams in a consistent editorial style
Frequently asked questions
Is diagram-design free to use?
The repository is licensed under MIT, as the README badge shows. The README excerpt does not list any pricing, so check the license file in the repository for the terms.
What do I need to install diagram-design?
You need a supported agent host such as Claude Code, Codex, Cursor or GitHub Copilot, plus Node.js for the npx command. The README does not state a Node.js version.
How do I install diagram-design in Claude Code?
Run /plugin marketplace add cathrynlavery/diagram-design, then /plugin install diagram-design@diagram-design. The README says the plugin marketplace gives you updates and slash commands.
Do I need a server to view the diagrams?
No. The agent produces one self-contained HTML + SVG file that you can open by double-clicking it in a browser.
Can I edit diagrams by dragging shapes?
The README does not describe a drag-and-drop editor. The agent chooses the diagram type and writes the file, and the README does not mention live collaborative editing.
How does diagram-design compare with Mermaid, Excalidraw or draw.io?
Diagram Design is an agent skill that writes HTML + SVG from plain-language prompts, with 45 diagram types. Mermaid, Excalidraw and draw.io are listed as comparable projects in the source, and the README does not give a detailed feature comparison.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Diagram Design suits developers who already use a supported coding agent and want clean architecture or flow diagrams without learning a diagram language, especially if they want brand colours and offline HTML files. It is a poor fit if you do not use a supported agent, or if you need a manual drag-and-drop or live collaborative editor.
Install options & downloads