The Draw.io MCP server enables AI agents to programmatically create, modify, inspect, and manage Draw.io diagrams through the Model Context Protocol.
Diagram Inspection: Retrieve currently selected cells, browse shape categories and specific shapes from the library, find shapes by name, and get paginated views of all diagram elements (vertices and edges) with advanced filtering by cell type and attributes.
Diagram Creation & Modification: Add rectangles and library-based shapes with customizable properties (position, size, text, style), create edges/connections between cells with labels and styling, edit existing cells and edges, delete cells by ID, apply library shape styles to existing cells, and store custom data attributes on cells.
Layer Management: List all layers with properties, get/set the active layer for new elements, move cells between layers, and create new layers.
Architecture & Integration: Supports multiple transport modes (stdio, HTTP, or both), communicates with Draw.io via browser extension through WebSocket (default port 3333), and is compatible with various MCP clients (Claude Desktop, oterm, Zed, Codex) for AI-assisted "Vibe Diagramming" workflows.
Enables programmatic control of Draw.io diagrams through MCP commands, allowing AI agents to create, modify, and analyze diagram content including architectural diagrams, flowcharts, process maps, and visual relationships.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Draw.io MCP Servercreate a simple flowchart for user login process"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Draw.io MCP server
Let's do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net).
Key Highlights
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
Requirements
Node.js (v20 or higher) - 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:
Edit ~/Library/Application Support/Claude/claude_desktop_config.json:
Add to ~/.config/zed/settings.json:
Edit ~/.codex/config.toml:
Add to opencode.json in your project root or ~/.config/opencode/opencode.json:
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:
Diagram inspection - read shapes, layers, and cell properties
Diagram modification - add/edit/delete shapes, edges, and labels
Layer management - create, switch, and organize layers
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.
Install the Draw.io MCP Browser Extension:
Ensure the extension is connected (green signal overlay on icon)
Configuration without --editor:
See the extension documentation for more details.
Related Resources
Configuration - CLI flags and advanced options
Tools Reference - Complete MCP tools documentation
Star History
Assessments
