How draw.io’s New Claude Code Integration Lets You Generate Diagrams Automatically

draw.io (also known as diagrams.net) is a free, open‑source diagramming tool whose native format is an editable XML file, making version control straightforward.

The drawio‑mcp project ( https://github.com/jgraph/drawio-mcp) provides an official Model Context Protocol (MCP) server that lets AI models generate draw.io diagrams programmatically. The repository has over 3200 stars.

Integration methods

Method 1 – MCP App Server (embed in chat)

Uses the MCP Apps protocol. The AI returns a diagram that can be rendered as an interactive window inside the chat UI. Hosted service address: https://mcp.draw.io/mcp.

create_diagram : accepts draw.io XML and returns a rendered diagram with zoom, pan, layer switching, and an “Open in draw.io” button. If the host does not support MCP Apps, the tool falls back to returning raw XML.

search_shapes : queries an index of more than 10 000 built‑in shapes (AWS, Azure, GCP, Kubernetes, UML, BPMN, etc.) and returns a style string that can be inserted directly into the XML.

Method 2 – MCP Tool Server (browser editor)

Published as the npm package @drawio/mcp. Start it with a single command: npx @drawio/mcp The generated diagram automatically opens in the draw.io editor. Supported input formats are XML, CSV, and Mermaid.js. Light‑mode and dark‑mode themes are available.

Method 3 – Claude Code Skill (local developers)

Designed for Claude Code; no separate MCP server is required—only a skill file.

Installation (global):

mkdir -p ~/.claude/skills/drawio
cp drawio/SKILL.md ~/.claude/skills/drawio/SKILL.md

Installation (per‑project):

mkdir -p .claude/skills/drawio
cp drawio/SKILL.md .claude/skills/drawio/SKILL.md

After installation, the /drawio command creates diagrams, e.g.:

/drawio create a flowchart for user login
/drawio sequence diagram for API auth
/drawio png class diagram for the models in src/

Claude Code writes the native draw.io XML to a .drawio file and opens it locally, without any network request.

Method 4 – Project Instructions (zero‑install)

When using Claude.ai’s project feature, a short instruction can be pasted that tells Claude how to generate a draw.io URL. Claude executes Python code to produce a clickable link, suitable for quick, temporary use.

Export formats (Claude Code Skill)

Specify the desired extension in the /drawio command:

/drawio png flowchart for user login   # → login-flow.drawio.png
/drawio svg: ER diagram for e‑commerce   # → er-diagram.drawio.svg
/drawio pdf architecture overview       # → architecture-overview.drawio.pdf

Default – .drawio: native XML, editable in draw.io.

PNG – .drawio.png: raster image that embeds the XML for re‑editing.

SVG – .drawio.svg: vector image with embedded XML.

PDF – .drawio.pdf: printable PDF with embedded XML.

All PNG, SVG, and PDF files embed the original XML, so dragging the file back into draw.io restores full editability.

Shape library

The search_shapes tool queries a pre‑built index of over 10 000 shapes extracted from the draw.io client source, covering cloud providers, container orchestration, UML, BPMN, electrical diagrams, Cisco network diagrams, and more. The returned style string can be inserted directly into the diagram XML, ensuring accurate symbols.

Technical design

The repository includes shared/xml-reference.md, a reference manual that defines routing rules, containers, layers, tags, metadata, dark‑mode settings, and style attributes. Both the MCP App Server and MCP Tool Server read this file at startup; the Claude Code Skill fetches it at runtime via a raw GitHub URL, guaranteeing consistent XML generation across all methods.

The shape‑search index is generated offline from the draw.io client source and bundled in the repository, so shape lookup does not require network access.

Summary

drawio‑mcp enables AI models to produce draw.io XML directly, removing manual drag‑and‑drop. Developers can obtain an editable .drawio file with a single command and continue editing it in draw.io. The four integration methods—chat embedding, browser editor, Claude Code skill, and zero‑install project instructions—cover a range of workflows.