Drawio MCP

MCP server for creating and editing draw.io / diagrams.net XML files programmatically.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "drawio-mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

🎨 Draw.io MCP Server

Let your AI assistant create beautiful draw.io diagrams — just describe what you want.

An MCP server that generates draw.io / diagrams.net XML files programmatically. Works with GitHub Copilot (agent mode), Claude Desktop, Cursor, and any MCP-compatible client.

✨ What Can It Do?

Capability	Details
🏗️ Diagram types	Flowcharts, UML, ER, C4, BPMN, mindmaps, architecture, network, Kubernetes, and more
🎨 Styling	310+ shape presets, 44 edge styles, 21 color themes
📐 Auto-layout	Sugiyama DAG, tree, horizontal, vertical, grid, flowchart engines
🔀 Smart routing	Obstacle-aware orthogonal edge routing with automatic port distribution
✏️ Full editing	Add, move, resize, delete, restyle any element after creation
📄 Multi-page	Multiple pages and layers for complex diagrams
📥 Import/Export	Load existing `.drawio` files, modify, and save back
🧹 One-click cleanup	Polish command that auto-fixes layout, overlaps, edges, and labels

🚀 Quick Start

Prerequisites

Python 3.11+
uv (recommended) or pip

Install from PyPI

Terminal

pip install drawio-mcp

Or with uv:

bash

uvx drawio-mcp

Install from source

bash

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync
uv run drawio-mcp

🔌 Setup with Your AI Client

VS Code (GitHub Copilot)

Add to your VS Code settings or .vscode/mcp.json:

config.json

{
  "servers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

Then use Copilot in Agent mode and ask it to create diagrams.

Claude Desktop

Add to your claude_desktop_config.json:

config.json

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

Cursor

Add to your Cursor MCP settings:

config.json

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

💬 Example Prompts

Once connected, try these in your AI chat:

Prompt	What you get
"Create a flowchart for a user login process"	Login flow with decision nodes and error paths
"Create a C4 context diagram for an e-commerce system"	System context with actors and external systems
"Make a UML class diagram with User, Order, and Product"	Class diagram with relationships
"Create an ER diagram for a blog database"	Entity-relationship diagram with tables
"Build an org chart for a startup"	Tree layout with roles and hierarchy
"Draw an AWS architecture with API Gateway, Lambda, DynamoDB"	Cloud architecture diagram
"Create a Kubernetes deployment diagram"	K8s diagram with pods, services, ingress
"Make a network topology with servers and firewalls"	Network diagram with device icons

💡 Tip: Always end with "...and save it as filename.drawio" to get a file you can open in draw.io.

🛠️ Tool Reference

The server exposes 5 tools, each with an action parameter:

`diagram` — Lifecycle

create · save · load · import_xml · list · get_xml · add_page · add_layer

`draw` — Content

add_vertices · add_edges · add_group · update_cells · delete_cells · add_title · add_legend · build_dag · build_full

`style` — Appearance

build · apply_theme · list_vertex_presets · list_edge_presets · list_themes

`layout` — Positioning

sugiyama · tree · horizontal · vertical · grid · flowchart · smart_connect · align · distribute · polish · relayout · compact · reroute_edges · resolve_overlaps · fix_labels · optimize_connections · resize_container

`inspect` — Read-only

cells · overlaps · ports · info

🎨 Style Reference

310+ Vertex Presets (click to expand)

Basic shapes: RECTANGLE ROUNDED_RECTANGLE ELLIPSE CIRCLE DIAMOND TRIANGLE HEXAGON CYLINDER CLOUD PARALLELOGRAM ACTOR PROCESS DOCUMENT DATA_STORE NOTE CARD CALLOUT TEXT CUBE STAR FOLDER and more

Themed boxes: BLUE_BOX GREEN_BOX ORANGE_BOX RED_BOX YELLOW_BOX PURPLE_BOX GRAY_BOX DARK_BOX TEAL_BOX WHITE_BOX

Flowchart: FLOWCHART_PROCESS FLOWCHART_DECISION FLOWCHART_TERMINATOR FLOWCHART_DATA FLOWCHART_DOCUMENT FLOWCHART_DATABASE FLOWCHART_START FLOWCHART_END and 25+ more

UML: UML_CLASS UML_INTERFACE UML_ACTOR UML_COMPONENT UML_PACKAGE UML_NODE UML_LIFELINE UML_FRAME

C4: C4_SYSTEM C4_CONTAINER C4_COMPONENT C4_PERSON C4_EXTERNAL C4_DATABASE C4_WEB_BROWSER

ER: ER_ENTITY ER_WEAK_ENTITY ER_ATTRIBUTE ER_KEY_ATTRIBUTE ER_RELATIONSHIP and more

BPMN: BPMN_TASK BPMN_START_EVENT BPMN_END_EVENT BPMN_GATEWAY BPMN_POOL BPMN_LANE and more

Architecture: ARCH_SERVICE ARCH_DATABASE ARCH_QUEUE ARCH_CLOUD ARCH_API ARCH_GATEWAY ARCH_CONTAINER ARCH_FIREWALL ARCH_SERVER ARCH_LOAD_BALANCER and 20+ more

Network: NETWORK_SERVER NETWORK_ROUTER NETWORK_SWITCH NETWORK_FIREWALL NETWORK_CLOUD NETWORK_STORAGE and 40+ more

Cloud/K8s: AWS_CLOUD AWS_LAMBDA AWS_S3 AWS_EC2 AWS_RDS AWS_SQS K8S_POD K8S_SERVICE K8S_DEPLOYMENT K8S_INGRESS and more

Containers: SWIMLANE GROUP GROUP_TRANSPARENT GROUP_DASHED

Plus: State machine, Sequence diagram, Mindmap, DFD, SysML, ArchiMate, Cisco, Mockup/Wireframe, Infographic, and more

44 Edge Presets (click to expand)

General: DEFAULT ORTHOGONAL STRAIGHT CURVED ENTITY_RELATION DASHED DOTTED BIDIRECTIONAL NO_ARROW

Styled: ROUNDED ROUNDED_DASHED THICK THICK_ROUNDED

Colored: COLORED_BLUE COLORED_GREEN COLORED_RED COLORED_ORANGE COLORED_PURPLE COLORED_YELLOW COLORED_GRAY

UML: UML_ASSOCIATION UML_INHERITANCE UML_IMPLEMENTATION UML_DEPENDENCY UML_AGGREGATION UML_COMPOSITION

ER: ER_ONE_TO_ONE ER_ONE_TO_MANY ER_MANY_TO_MANY ER_ZERO_TO_ONE ER_ZERO_TO_MANY

Flow: DATA_FLOW CONTROL_FLOW ASYNC SYNC BPMN_FLOW BPMN_MESSAGE_FLOW

21 Color Themes (click to expand)

BLUE GREEN YELLOW ORANGE RED PURPLE GRAY PINK TURQUOISE TEAL DARK_BLUE DARK_GREEN DARK_RED DARK_ORANGE DARK_PURPLE DARK WHITE C4_BLUE C4_LIGHT_BLUE C4_SKY C4_GRAY

Connection Ports (click to expand)

TOP BOTTOM LEFT RIGHT TOP_LEFT TOP_RIGHT BOTTOM_LEFT BOTTOM_RIGHT TOP_LEFT_THIRD TOP_RIGHT_THIRD BOTTOM_LEFT_THIRD BOTTOM_RIGHT_THIRD LEFT_TOP_THIRD LEFT_BOTTOM_THIRD RIGHT_TOP_THIRD RIGHT_BOTTOM_THIRD

🧑‍💻 Development

bash

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync

# Run tests
uv run pytest tests/ -v

# Run the server locally
uv run drawio-mcp

Project Structure

Code

src/drawio_mcp/
├── server.py           # MCP server — 5 tools with 40+ actions
├── models.py           # Core XML model (DrawioFile, Diagram, MxCell)
├── styles.py           # Style builder, presets, and themes
├── layout.py           # Layout helpers (tree, grid, port distribution)
├── layout_engine.py    # Advanced layout (Sugiyama, edge routing, polish)
└── validation.py       # Input validation

📝 Contributing

See CONTRIBUTING.md for guidelines on bug reports, feature requests, and pull requests.

📄 License

MIT © yohasacura

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Drawio MCP

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "drawio-mcp": { "command": "npx", "args": ["-y", "drawio-mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/drawio-mcp?style=directory)](https://allmcps.com/mcp/drawio-mcp)

HTML Embed

<a href="https://allmcps.com/mcp/drawio-mcp"><img src="https://allmcps.com/api/badge/drawio-mcp?style=directory" alt="Drawio MCP on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

27Quality signal: Emerging · 27/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership8/20

Documentation & tools11/30

Adoption & activity1/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge and attach your website — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Drawio MCP →Install in Claude Desktop Install in Cursor Install in VS Code

Drawio MCP

MCP server for creating and editing draw.io / diagrams.net XML files programmatically.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "drawio-mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

🎨 Draw.io MCP Server

Let your AI assistant create beautiful draw.io diagrams — just describe what you want.

An MCP server that generates draw.io / diagrams.net XML files programmatically. Works with GitHub Copilot (agent mode), Claude Desktop, Cursor, and any MCP-compatible client.

✨ What Can It Do?

Capability	Details
🏗️ Diagram types	Flowcharts, UML, ER, C4, BPMN, mindmaps, architecture, network, Kubernetes, and more
🎨 Styling	310+ shape presets, 44 edge styles, 21 color themes
📐 Auto-layout	Sugiyama DAG, tree, horizontal, vertical, grid, flowchart engines
🔀 Smart routing	Obstacle-aware orthogonal edge routing with automatic port distribution
✏️ Full editing	Add, move, resize, delete, restyle any element after creation
📄 Multi-page	Multiple pages and layers for complex diagrams
📥 Import/Export	Load existing `.drawio` files, modify, and save back
🧹 One-click cleanup	Polish command that auto-fixes layout, overlaps, edges, and labels

🚀 Quick Start

Prerequisites

Python 3.11+
uv (recommended) or pip

Install from PyPI

Terminal

pip install drawio-mcp

Or with uv:

bash

uvx drawio-mcp

Install from source

bash

git clone https://github.com/yohasacura/drawio-mcp.git
cd drawio-mcp
uv sync
uv run drawio-mcp

🔌 Setup with Your AI Client

VS Code (GitHub Copilot)

Add to your VS Code settings or .vscode/mcp.json:

config.json

{
  "servers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

Then use Copilot in Agent mode and ask it to create diagrams.

Claude Desktop

Add to your claude_desktop_config.json:

config.json

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

Cursor

Add to your Cursor MCP settings:

config.json

{
  "mcpServers": {
    "drawio-mcp": {
      "command": "uvx",
      "args": ["drawio-mcp"]
    }
  }
}

💬 Example Prompts

Once connected, try these in your AI chat:

Prompt	What you get
"Create a flowchart for a user login process"	Login flow with decision nodes and error paths
"Create a C4 context diagram for an e-commerce system"	System context with actors and external systems
"Make a UML class diagram with User, Order, and Product"	Class diagram with relationships
"Create an ER diagram for a blog database"	Entity-relationship diagram with tables
"Build an org chart for a startup"	Tree layout with roles and hierarchy
"Draw an AWS architecture with API Gateway, Lambda, DynamoDB"	Cloud architecture diagram
"Create a Kubernetes deployment diagram"	K8s diagram with pods, services, ingress
"Make a network topology with servers and firewalls"	Network diagram with device icons