Tell Claude to Draw: Diagrams with /drawio in Claude Code
- Smars
- Agent Skills , Developer Tools
- 07 May, 2026
You’re describing an architecture to Claude Code. The response includes detailed ASCII art that almost works, but not quite. You think: “I wish I could just tell it to draw this.”
Turns out, you can.
The draw.io skill for Claude Code adds a /drawio slash command that turns natural language into native .drawio diagram files. Describe what you want, and Claude generates the XML, writes the file, and optionally exports to PNG, SVG, or PDF. No MCP server, no API key, no running a separate service.
What the Skill Does Differently
The skill is a single SKILL.md file you drop into your Claude Code skills directory. When you type /drawio, Claude reads the skill instructions, generates mxGraphModel XML for your requested diagram, and writes it to a .drawio file in your project. If you ask for PNG/SVG/PDF, it also runs the draw.io desktop CLI with —embed-diagram to produce a shareable file that stays editable.
It sits alongside three other approaches in the drawio-mcp project — MCP App Server (inline diagrams in chat), MCP Tool Server (open in browser), and Project Instructions (no install needed):
- MCP App Server renders interactive diagrams inline for Claude.ai and VS Code via a hosted endpoint at mcp.draw.io
- MCP Tool Server opens diagrams in your browser via an npm package, supports XML, CSV, and Mermaid
- Skill + CLI generates local .drawio files, ideal for Claude Code development workflows
- Project Instructions teach Claude to generate draw.io URLs via Python, zero install
The skill route is the simplest for local development. No server process, no port management, no MCP configuration. Just a file and a slash command.
When to Use It
Architecture documentation — Ask Claude to diagram your service architecture mid-conversation. It generates the .drawio file from the same context it’s been building.
Database schema visualization — After Claude helps you design a schema, ask it to generate the ER diagram. The diagram is based on the actual schema it just helped you write.
API flow diagrams — Map out endpoint interactions during design review. Claude already knows the code, so the diagram reflects reality.
PR documentation — Generate a before/after architecture diagram for your pull request. Drop the exported PNG directly into the PR description.
The Sharp Edges
Export requires draw.io Desktop. The skill can always write .drawio files, but PNG/SVG/PDF export depends on the draw.io desktop CLI being installed. Without it, you get a .drawio file you can open in the app — fine for editing, less convenient for sharing.
XML quality depends on the reference. Claude follows the shared XML reference from the drawio-mcp repo. Complex layouts with many overlapping edges may need manual cleanup. The npx @drawio/postprocess tool helps with edge routing but is optional.
Not all diagrams need this. A quick flowchart for a brainstorming session is faster with pen and paper. The skill shines when the diagram needs to be accurate, version-controlled, and derived from code.
Installation
Copy the skill file to your Claude Code skills directory. That’s it.
Global install (all projects):
mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.mdPer-project install:
mkdir -p .claude/skills/drawio
cp drawio/SKILL.md .claude/skills/drawio/SKILL.mdFor PNG/SVG/PDF export, also install draw.io Desktop from https://www.drawio.com.
That’s the entire setup. No npm install, no MCP config, no running a server.
Usage
In Claude Code, use the /drawio slash command:
/drawio create a flowchart for user loginTo export to an image format, mention it in the request:
/drawio png flowchart for user login/drawio svg: ER diagram for e-commerce/drawio pdf architecture overviewClaude generates the XML, writes the file, and opens it. The file naming follows a convention:
- /drawio create a flowchart for user login -> login-flow.drawio
- /drawio png flowchart for user login -> login-flow.drawio.png
- /drawio svg: ER diagram for e-commerce -> er-diagram.drawio.svg
For export formats, the intermediate .drawio file is deleted after export since the PNG/SVG/PDF already contains the embedded diagram XML.
The skill also supports more complex requests:
/drawio sequence diagram for API auth/drawio png class diagram for the models in src/How It Works Under the Hood
When you type /drawio, Claude does three things:
First, it reads the skill instructions which include the shared XML reference from the drawio-mcp repo — covering cell types, style properties, edge routing, containers, layers, and dark mode.
Second, it generates the mxGraphModel XML in the standard .drawio format:
<mxGraphModel adaptiveColors="auto">
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
...
</root>
</mxGraphModel>Third, it writes the file. If you requested an export, it calls the draw.io desktop CLI:
drawio -x -f png -e -b 10 -o diagram.drawio.png diagram.drawioThe whole pipeline — from natural language to diagram file — happens in a single Claude Code interaction.
End-to-End Example: Architecture Diagram Mid-Session
You’re building a microservices app and discussing the architecture with Claude Code:
You: /drawio png architecture for my microservices app with
api-gateway, user-service, payment-service, and a shared databaseClaude generates a .drawio file with all services as boxes, labeled and arranged on a grid. It draws edges from api-gateway to each service, then from each service to the database. After generation, it runs the export CLI and produces architecture.drawio.png — ready to drop into your docs.
The whole thing takes seconds. You didn’t open draw.io once.
The draw.io skill turns Claude Code into a diagramming tool that speaks your architecture. Describe the system, get the file.
If you’re already using Claude Code for development, adding /drawio is copying one file. The question is why you haven’t done it yet.
GitHub: https://github.com/jgraph/drawio-mcp Skill docs: https://github.com/jgraph/drawio-mcp/blob/main/skill-cli/README.md draw.io Desktop: https://www.drawio.com
