diagram-design vs drawio-skill
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
An agent skill that draws editorial diagrams as one self-contained HTML + SVG file.
Open source · MIT
An agent skill that turns text and code/infra sources into editable draw.io architecture diagrams.
The short answer
Choose diagram-design if you need…
- 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
Choose drawio-skill if you need…
- Developers who want architecture diagrams generated from existing infrastructure or schema files
- Teams that keep diagrams in version control and want CI checks on architecture rules
- People already working inside Claude Code, Cursor, or another Agent Skills-compatible agent
- Anyone who wants to turn a whiteboard photo or legacy PNG into an editable diagram
Side-by-side
| diagram-design | drawio-skill | |
|---|---|---|
| Type | AI model / agent | AI model / agent |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 64.2k | 10.5k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | HTML | Python |
| Last code update | 5 days ago | 5 days ago |
What each one is
diagram-design
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.
drawio-skill
drawio-skill is an add-on for AI coding agents such as Claude Code and Cursor. You describe a system in plain language, or point it at sources like Terraform, Kubernetes, SQL, or OpenAPI files, and it produces an editable draw.io diagram. It can also re-sync diagrams when the source changes while keeping manual layout tweaks, and export to HTML, PowerPoint, or Mermaid.
Best for
diagram-design
- 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
drawio-skill
- Developers who want architecture diagrams generated from existing infrastructure or schema files
- Teams that keep diagrams in version control and want CI checks on architecture rules
- People already working inside Claude Code, Cursor, or another Agent Skills-compatible agent
- Anyone who wants to turn a whiteboard photo or legacy PNG into an editable diagram
Strengths
diagram-design
- 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
drawio-skill
- Diagrams stay editable .drawio files rather than locked images
- Incremental sync is designed to preserve manual layout changes
- Supports many import sources and export formats, with core workflows described as stdlib-only and offline
Not ideal for
diagram-design
- 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
drawio-skill
- Users who do not have the draw.io desktop CLI and do not want to install it, since the README treats it as a core requirement
- People who want a standalone GUI diagram editor rather than an agent skill
- Users who need guaranteed-perfect layouts without manual touch-up, since the README describes automated layout with self-checks but not perfection
Trade-offs
diagram-design
- 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
drawio-skill
- Needs the draw.io desktop CLI installed, and some features require version 30 or later
- The README is long and feature-dense, so the set of capabilities is broad and not all parts are clearly verified here
Getting started
diagram-design
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-designdrawio-skill
Install the skill with the skills CLI (any agent)
npx skills add Agents365-ai/drawio-skill -gInstall draw.io desktop CLI on macOS
brew install --cask drawioFrequently asked questions
What is the difference between diagram-design and drawio-skill?
diagram-design: An agent skill that draws editorial diagrams as one self-contained HTML + SVG file. drawio-skill: An agent skill that turns text and code/infra sources into editable draw.io architecture diagrams. diagram-design suits developers who already use a supported coding agent and want architecture or flow diagrams without learning a diagram language, while drawio-skill suits developers who want architecture diagrams generated from existing infrastructure or schema files.
Are diagram-design and drawio-skill free?
diagram-design: Free and open source. drawio-skill: Free and open source.
Which is easier to set up, diagram-design or drawio-skill?
diagram-design is easier to get started with (rated beginner); drawio-skill is rated intermediate and usually needs more setup.
Is diagram-design or drawio-skill more popular?
diagram-design has more GitHub stars (64.2k) than drawio-skill (10.5k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to diagram-design and drawio-skill?
Other options people compare them with include Mermaid, Excalidraw, fireworks-tech-graph, Kami, Taste Skill.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.