Draw.io MCP server

Let's do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net).

Key Highlights

Enable Draw.io MCP in IFrames
AWS, GCP, Azure, Cisco19, and CiscoSafe stencils auto-discovered at runtime from drawio's sidebar
Multi-document targeting with list-documents and target_document selectors for multi-tab workflows
Multi-page targeting with required target_page selectors for page-scoped tools
Per-document FIFO serialization for live operations, so multiple agents can work on different files safely
Page management tools: list-pages, get-current-page, create-page, copy-page, rename-page
Import, embed, or expand Mermaid diagrams
Firefox support is back, TLS mode is necessary
Server supports TLS mode and optionally generates self-signed certificates
Import and export diagrams from/to XML, SVG (with embedded XML), or PNG (with embedded XML)
Edge geometry control with waypoints and automatic self-connector routing
Parent-child relationships for nested shapes and grouping
Unified Server and Extension in the same mono-repo
Built-in Draw.io editor - no browser extension required
MCP server that lets AI agents control Draw.io diagrams
Programmatic diagram creation, inspection, and modification via MCP tools
Layer management for complex diagrams
Works with any MCP client (Claude Desktop, Claude Code, Zed, Codex, etc.)

Introduction

The Draw.io MCP server brings Draw.io diagramming capabilities to AI agents. It provides MCP tools that can create, read, update, and delete diagram elements - letting AI assistants build architectural diagrams, flowcharts, and visual documentation automatically.

Two ways to use:

Built-in editor - Server hosts Draw.io directly, accessible in your browser
Browser extension - Connect to Draw.io running in your browser via extension

Experimental: integration with the draw.io desktop (Electron) app is in progress but currently blocked by an upstream CSP issue — see DESKTOP.md.

Requirements

Node.js (v22 or higher; tested against v22 LTS and v24 LTS) - Runtime environment for the MCP server
MCP client - Claude Desktop, Claude Code, Zed, Codex, OpenCode, or any MCP-compatible host

For Built-in Editor

No additional requirements - runs out of the box with --editor flag.

For Browser Extension

Browser extension - drawio-mcp-extension
Draw.io open in your browser

Optional

pnpm - Preferred package manager (npm works fine too)

Quick Start

1. Configure your MCP host

Add the server to your MCP client configuration:

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Claude Code

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

Zed

Add to ~/.config/zed/settings.json:

{
  "context_servers": {
    "drawio": {
      "command": "npx",
      "args": ["-y", "drawio-mcp-server", "--editor"],
      "env": {}
    }
  }
}

Codex

Edit ~/.codex/config.toml:

[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

OpenCode

Add to opencode.json in your project root or ~/.config/opencode/opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "local",
      "command": ["npx", "-y", "drawio-mcp-server", "--editor"],
      "enabled": true
    }
  }
}

For other MCP clients and detailed configuration (including pnpm options), see Configuration.

2. Open the editor

After restarting your MCP host, open: http://localhost:3000/

3. Start diagramming

Example prompts you can try:

"Create an event-driven architecture diagram showing a message queue with producers, consumers, and three backend services"

"Create a three-page event-driven architecture diagram. Use three agents in parallel for service topology, message flow, and retry/failure handling, with each agent assigned to a separate target page."

"Draw a CRUD API diagram with a database, API gateway, and four microservices with their endpoints"

"Add a new layer called 'Background' and move all decorative elements to it, then create a new layer for annotations"

Your AI assistant can now control the diagram using MCP tools.

Features

The server provides MCP tools for:

Document discovery - list connected Draw.io document instances and route later calls to a specific tab/file instance
Diagram inspection - read shapes, pages, layers, and cell properties
Diagram modification - add/edit/delete shapes, edges, and labels on a target page
Page management - list pages, inspect the current page, create pages, copy pages, and rename pages without forcing a visible page switch on supported runtimes
Layer management - create, switch, and organize layers
Vendor shape coverage - AWS, GCP, Azure, Cisco19, and CiscoSafe stencils auto-discovered at runtime from drawio's sidebar, so agents can place icons like mxgraph.gcp2.cloud_run or mxgraph.cisco19.router without hand-curated catalogs
Built-in TLS — opt-in HTTPS + WSS with manual cert/key or auto-generated self-signed material via a per-user local CA. See CONFIG.md → TLS.

See Tools Reference for the complete list of available tools.

Installation

The server runs as part of your MCP host. Detailed configuration for all supported clients (Claude Desktop, Claude Code, Zed, Codex, oterm) including npm and pnpm options is available in Configuration.

Alternative: Browser Extension

Instead of the built-in editor, you can use the browser extension to connect to Draw.io running in your browser. This works with or without the --editor flag.

Open Draw.io in your browser
Install the Draw.io MCP Browser Extension:
- Chrome Web Store
- Firefox Add-ons
Ensure the extension is connected (green signal overlay on icon)

Configuration without --editor:

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

See the extension documentation for more details.

Experimental: Draw.io Desktop

Integration with the draw.io desktop (Electron) app is experimental and currently blocked end-to-end by an upstream CSP issue. The plugin loads inside draw.io desktop, but its WebSocket connection back to the MCP server is rejected by draw.io's hard-coded connect-src 'self' policy.

See DESKTOP.md for the full setup steps and the current limitation.