Draw.io MCP Server gives AI agents programmatic control over Draw.io (Diagrams.net) diagrams. It provides MCP tools that enable automatic creation, reading, updating, and deletion of diagram elements, allowing AI assistants to generate architectural diagrams, flowcharts, and visual documentation from code or natural language prompts. Key features include: - Complete diagram manipulation including shapes, connectors, text, and styling - Built-in Draw.io editor that runs in the browser without requiring browser extensions - Support for hierarchical structures with nested shapes, grouping, and parent-child relationships - Layer management for organizing complex multi-layer diagrams - Works with any MCP-compatible client including Claude Desktop, Claude Code, Zed, and Codex - Optional browser extension mode for integration with existing Draw.io web instances

Draw.io MCP server

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

[](https://discord.gg/dM4PWdf42q) [](https://github.com/lgazo/drawio-mcp-server/actions/workflows/ci.yml) [](https://mseep.ai/app/5fc2b7fe-8ceb-4683-97bd-6d31e07b5888) [](https://npmjs.com/package/drawio-mcp-server)

Key Highlights

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: 1. Built-in editor - Server hosts Draw.io directly, accessible in your browser 2. Browser extension - Connect to Draw.io running in your browser via extension

Requirements

For Built-in Editor

For Browser Extension

Optional

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"

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

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.

1. Open Draw.io in your browser 2. Install the Dr