io.github.yohasacura/drawio-mcp

Install

Config snippet generator goes here (5 client tabs)

README

# 🎨 Draw.io MCP Server

[![CI](https://github.com/yohasacura/drawio-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/yohasacura/drawio-mcp/actions/workflows/ci.yml)
[![PyPI](https://img.shields.io/pypi/v/drawio-mcp)](https://pypi.org/project/drawio-mcp/)
[![Python](https://img.shields.io/pypi/pyversions/drawio-mcp)](https://pypi.org/project/drawio-mcp/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

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

An [MCP](https://modelcontextprotocol.io/) server that generates [draw.io](https://www.drawio.com/) / [diagrams.net](https://app.diagrams.net/) XML files programmatically. Works with **GitHub Copilot (agent mode)**, **Claude Desktop**, **Cursor**, and any MCP-compatible client.

<!-- mcp-name: io.github.yohasacura/drawio-mcp -->

---

## ✨ 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**](https://docs.astral.sh/uv/) (recommended) or pip

### Install from PyPI

```bash
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`:

```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`:

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

### Cursor

Add to your Cursor MCP settings:

```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

<details>
<summary><b>310+ Vertex Presets</b> (click to expand)</summary>

**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_PRO