Drawio Mcp

🎨 Draw.io MCP Server

[](https://github.com/yohasacura/drawio-mcp/actions/workflows/ci.yml) [](https://pypi.org/project/drawio-mcp/) [](https://pypi.org/project/drawio-mcp/) [](https://opensource.org/licenses/MIT)

> 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

pip install drawio-mcp

Or with uv:

uvx drawio-mcp

Install from source

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:

{
  "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:

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

Cursor

Add to your Cursor MCP settings:

{
  "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

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

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](CONTRIBUTING.md) for guidelines on bug reports, feature requests, and pull requests.

📄 License

[MIT](LICENSE) © yohasacura

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: yohasacura
• Source: yohasacura/drawio-mcp
• License: MIT

Install and usage instructions live in the source repository linked above.