AI‑Powered One‑Click Architecture Diagrams: Ditch Manual Dragging with drawio‑mcp

Developers, architects, and product teams often spend excessive time manually dragging, aligning, and styling diagrams such as flowcharts, system architectures, sequence diagrams, ER diagrams, and UML, which hampers efficiency.

draw.io Overview

draw.io (now diagrams.net) is a free, open‑source, watermark‑free diagramming tool with high compatibility, used by an estimated 99% of Fortune 500 companies and ranking first in the Atlassian plugin marketplace. It stores data locally or in cloud services, offers offline desktop clients for Windows/macOS/Linux, and integrates with VS Code, Notion, and many other platforms.

Despite its strengths, draw.io still requires manual placement of components, making complex diagrams time‑consuming.

drawio‑mcp and Model Context Protocol (MCP)

drawio‑mcp is the official MCP server released by the draw.io team under the Apache 2.0 license, allowing safe commercial use. MCP (Model Context Protocol), defined by Anthropic, gives AI models permission to operate draw.io, acting as a bridge that lets Claude‑series AI generate draw.io‑compatible XML directly.

Core Capabilities

Claude AI can produce standard draw.io XML structures without manual coding.

Automatic rendering in the browser or within chat interfaces, avoiding manual navigation.

Searchable official shape library ensures icons remain consistent and professional.

Export to image, vector, PDF, all with embedded source XML for later editing.

The implementation is native to the official project, containing modules such as mcp‑app‑server, mcp‑tool‑server, and shape‑search, which are regularly updated and compatible with future iterations.

Four Integration Paths

1. MCP App Server (in‑chat rendering)

Provides a hosted address (e.g., https://mcp.draw.io/mcp) that renders diagrams directly inside the chat window. At the time of writing the hosted address may return a parsing error; users can fall back to other methods or run the server locally via Node.js or Cloudflare Workers.

Key tools: create_diagram: Accepts XML and renders it interactively with zoom, pan, layer control, and an “Open in draw.io” button. search_shapes: Retrieves over 10,400 shapes from AWS, Azure, GCP, Kubernetes, UML, BPMN, etc., returning XML‑ready style strings.

Note: Inline rendering depends on MCP Apps extensions; if unsupported, the AI outputs raw XML that can be pasted into draw.io.

2. MCP Tool Server (browser editor)

Published on npm as @drawio/mcp. Start it with a single command: npx @drawio/mcp After launch, AI‑generated diagrams open in the draw.io editor, supporting XML, CSV, and Mermaid formats, with light/dark themes. For local debugging, run npm install and npm start inside the mcp-tool-server directory.

3. Claude Code Skill (local development)

Ideal for developers who want to draw while coding. Install the skill by copying SKILL.md to the appropriate Claude skill directory (global or project‑local). Example commands:

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

The skill creates a .drawio file, opens it locally, and can export to PNG, SVG, or PDF using draw.io’s CLI with the --embed-diagram flag.

4. Project Instructions (zero‑install)

For quick, one‑off diagram generation, paste a predefined instruction into Claude’s project feature. Claude then returns a draw.io URL generated from a single‑source XML prompt, allowing immediate use without any installation.

Export Formats

.drawio

: Native source file, fully editable. .drawio.png: Image with embedded XML; re‑importable. .drawio.svg: Vector format with embedded XML; scalable and editable. .drawio.pdf: Printable PDF with embedded XML; still editable after import.

All exported files retain the original XML, enabling full re‑editing without loss of structure.

Built‑In Shape Library

drawio‑mcp ships with more than 10,400 pre‑indexed shapes, covering major cloud providers (AWS, Azure, GCP), Kubernetes resources, UML, BPMN, network topologies, and many industry‑standard diagrams. The index is generated offline from the draw.io client source, avoiding network dependencies. Updating the index involves running npm install and a generation script, then rebuilding the MCP App Server worker.

Unified Technical Specification

All integration methods share a single XML reference file ( shared/xml-reference.md) that defines edge routing, containers, layers, metadata, dark mode, style attributes, and other core rules. Changing this file automatically propagates to every integration path, simplifying maintenance.

Practical Recommendations

Quick temporary diagrams – use Project Instructions for zero‑setup, paste‑and‑go.

Frequent Claude web usage – once the hosted MCP App Server is stable, configure it for in‑chat previews.

Local development – prefer Claude Code Skill for offline, high‑efficiency workflow.

Desktop‑centric editing – choose MCP Tool Server to launch the browser editor with a single command.

Overall, drawio‑mcp does not replace draw.io but upgrades the diagramming workflow from manual drag‑and‑drop to AI‑generated XML with minimal post‑processing, freeing developers to focus on design rather than layout.

https://github.com/jgraph/drawio-mcp