# draw.io MCP server

> Create draw.io diagrams from XML or Mermaid and render them inline in chat, with search across 10,000+ shapes.

- Listing: https://mcp.tc/i/drawio
- Connect: use the server's own URL `https://mcp.draw.io/mcp` (no sign-in); clients connect to it directly. The listing link is a page, not an MCP endpoint.
- Type: remote (Streamable HTTP)
- Auth: none
- Category: [Design, Websites & CMS](https://mcp.tc/c/design)
- Vendor: draw.io (JGraph)
- Homepage: <https://github.com/jgraph/drawio-mcp>
- Repository: <https://github.com/jgraph/drawio-mcp>
- Package: npm `@drawio/mcp`

## About

The official draw.io server lets an assistant create diagrams and show them as interactive draw.io views inside the conversation. create\_diagram accepts draw.io XML or Mermaid syntax. search\_shapes looks up exact style strings in about 10,000 built-in stencils (cloud, network, Kubernetes, BPMN, electrical) and the draw.io icon service.

It runs as a hosted endpoint at https://mcp.draw.io/mcp over streamable HTTP and needs no sign-in. Inline rendering needs a host that supports MCP Apps. Other hosts get the XML as text. A local alternative is available through npx @drawio/mcp, which opens diagrams in the draw.io editor.

## What it can do

- Create interactive diagrams from draw.io XML
- Create diagrams from Mermaid syntax
- Search about 10,000 built-in shapes by keyword
- Find brand and concept icons through the icon service
- Apply optional ELK auto-layout and libavoid edge routing
- Open rendered diagrams in draw.io for editing

## Tools (2)

- `create_diagram`: Create and display an interactive draw.io diagram from draw.io XML or Mermaid syntax. (read-only)
- `search_shapes`: Search the draw.io shape library by keyword and return style strings, sizes and titles. (read-only)

## Example prompts

- "Draw a flowchart of our login and password reset process."
- "Create an AWS architecture diagram with a load balancer, EC2 and RDS."
- "Make a sequence diagram of an OAuth authorization code flow."
- "Find a Kubernetes pod shape and add it to my network diagram."

## Install

### Claude Code

1. Run this in a terminal, in your project folder:

```bash
claude mcp add --transport http drawio https://mcp.draw.io/mcp
```

2. Start Claude Code and type `/mcp`. **drawio** should show as connected.

Add `--scope user` to make it available in every project, not just this one.

### Claude Desktop

1. Open **Settings → Connectors** and click **Add custom connector**.

2. Name it **draw.io** and paste this URL:

```url
https://mcp.draw.io/mcp
```

3. Click **Add**. Its tools appear in the chat’s tools menu.

Claude Desktop’s JSON config file only starts local servers. Remote servers go through Connectors, and connectors you add on claude.ai show up here too.

### claude.ai

1. Open the connector form on claude.ai. This button fills in the name and URL for you:

[Add to claude.ai](<https://claude.ai/customize/connectors?modal=add-custom-connector&connectorName=draw.io&connectorUrl=https%3A%2F%2Fmcp.draw.io%2Fmcp>) (opens connector settings)

2. Check that the URL reads `https://mcp.draw.io/mcp` and click **Add**.

3. Turn it on in a chat from the tools menu.

Free plans allow one custom connector. On Team and Enterprise plans an owner adds it under **Organization settings → Connectors**.

### ChatGPT

1. On chatgpt.com, open **Settings → Security and login** and turn on **Developer mode**.

2. Go to `chatgpt.com/plugins` and click **+** to create an app for a remote MCP server.

3. Paste `https://mcp.draw.io/mcp` as the server URL and choose **No authentication**.

Developer mode is available on the web for Plus, Pro, Business, Enterprise and Education accounts.

### Cursor

[Add to Cursor](<https://cursor.com/install-mcp?name=drawio&config=eyJ1cmwiOiJodHRwczovL21jcC5kcmF3LmlvL21jcCJ9>) (opens Cursor)

Or add it by hand to `~/.cursor/mcp.json` (all projects) or `.cursor/mcp.json` (this project):

`mcp.json`:

```json
{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}
```

### VS Code

[Install in VS Code](<https://vscode.dev/redirect/mcp/install?name=drawio&config=%7B%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Fmcp.draw.io%2Fmcp%22%7D>) (opens VS Code)

Or from a terminal:

```bash
code --add-mcp '{"name":"drawio","type":"http","url":"https://mcp.draw.io/mcp"}'
```

Or commit it to the repo in `.vscode/mcp.json`:

`.vscode/mcp.json`:

```json
{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}
```

### Devin Desktop

1. Add it to `~/.config/devin/mcp_config.json` (macOS and Linux) or `%APPDATA%\devin\mcp_config.json` (Windows):

`mcp_config.json`:

```json
{
  "mcpServers": {
    "drawio": {
      "serverUrl": "https://mcp.draw.io/mcp"
    }
  }
}
```

2. Refresh the MCP server list in Cascade.

Devin Desktop is the new name for Windsurf. It reads `serverUrl` (or `url`) for remote servers.

### Codex

```bash
codex mcp add drawio --url https://mcp.draw.io/mcp
```

Or edit `~/.codex/config.toml` directly:

`config.toml`:

```toml
[mcp_servers.drawio]
url = "https://mcp.draw.io/mcp"
```

### Gemini CLI

```bash
gemini mcp add --transport http drawio https://mcp.draw.io/mcp
```

This adds it to the current project. Add `-s user` to use it everywhere.

### Any client

Most clients accept this shape. Some name the URL field differently: `serverUrl` in Devin Desktop, `httpUrl` in Gemini CLI’s settings file.

```json
{
  "mcpServers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}
```

Zed puts servers under `context_servers` in its settings. Cline needs `"type": "streamableHttp"`, or it assumes SSE.

Client only starts local servers? Bridge it with `npx -y mcp-remote https://mcp.draw.io/mcp`.

## Details

- Server version: 1.0.6
- MCP protocol version: 2025-11-25
- Last checked: 2026-10-03 (reachable)
- Listed: 2026-10-03
- Updated: 2026-10-04

---
Source: https://mcp.tc/i/drawio (mcp.tc is an independent directory, not affiliated with this server's publisher). Corrections: https://mcp.tc/report