Octopus
8986217a73
The fallback condition for PNG detection in the MCP export handler was too broad: it would match any string longer than 100 chars that didn't start with '<', which includes SVG data URLs (data:image/svg+xml;base64,...). This caused a race condition where an autosave SVG export response could arrive while a PNG export was pending, resulting in SVG data being sent to the MCP server as the PNG export result. The server would then try to write it as binary PNG, producing a corrupt file (broken image). Fix: exclude strings starting with 'data:' from the fallback condition, so only raw base64 strings (without a data URL prefix) match as PNG, while SVG data URLs are correctly rejected.
Next AI Draw.io MCP Server
MCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with real-time browser preview.
Self-contained - includes an embedded HTTP server, no external dependencies required.
Quick Start
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Installation
Claude Desktop
Add to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
VS Code
Add to your VS Code settings (.vscode/mcp.json in workspace or user settings):
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Cursor
Add to Cursor MCP config (~/.cursor/mcp.json):
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Cline (VS Code Extension)
- Click the MCP Servers icon in Cline's top menu bar
- Select the Configure tab
- Click Configure MCP Servers to edit
cline_mcp_settings.json - Add the drawio server:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"]
}
}
}
Claude Code CLI
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
Other MCP Clients
Use the standard MCP configuration with:
- Command:
npx - Args:
["@next-ai-drawio/mcp-server@latest"]
Usage
- Restart your MCP client after updating config
- Ask the AI to create a diagram:
"Create a flowchart showing user authentication with login, MFA, and session management"
- The diagram appears in your browser in real-time!
Features
- Real-time Preview: Diagrams appear and update in your browser as the AI creates them
- Version History: Restore previous diagram versions with visual thumbnails - click the clock button (bottom-right) to browse and restore earlier states
- Natural Language: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
- Edit Support: Modify existing diagrams with natural language instructions
- Export: Save diagrams as
.drawiofiles - Self-contained: Embedded server, works offline (except draw.io UI which loads from
embed.diagrams.netby default, configurable viaDRAWIO_BASE_URL)
Available Tools
| Tool | Description |
|---|---|
start_session |
Opens browser with real-time diagram preview |
create_new_diagram |
Create a new diagram from XML (requires xml argument) |
edit_diagram |
Edit diagram by ID-based operations (update/add/delete cells) |
get_diagram |
Get the current diagram XML |
export_diagram |
Save diagram to a .drawio file |
How It Works
┌─────────────────┐ stdio ┌─────────────────┐
│ Claude Desktop │ <───────────> │ MCP Server │
│ (AI Agent) │ │ (this package) │
└─────────────────┘ └────────┬────────┘
│
┌────────▼────────┐
│ Embedded HTTP │
│ Server (:6002) │
└────────┬────────┘
│
┌────────▼────────┐
│ User's Browser │
│ (draw.io embed) │
└─────────────────┘
- MCP Server receives tool calls from Claude via stdio
- Embedded HTTP Server serves the draw.io UI and handles state
- Browser shows real-time diagram updates via polling
Configuration
| Variable | Default | Description |
|---|---|---|
PORT |
6002 |
Port for the embedded HTTP server |
DRAWIO_BASE_URL |
https://embed.diagrams.net |
Base URL for the draw.io embed. Set this to use a self-hosted draw.io instance for private deployments. |
Private Deployment (Self-hosted draw.io)
For security-sensitive environments that require private deployment of draw.io:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"],
"env": {
"DRAWIO_BASE_URL": "https://drawio.your-company.com"
}
}
}
}
You can deploy your own draw.io instance using the official Docker image:
docker run -d -p 8080:8080 jgraph/drawio
Then set DRAWIO_BASE_URL=http://localhost:8080 (or your server's URL).
Troubleshooting
Port already in use
If port 6002 is in use, the server will automatically try the next available port (up to 6020).
Or set a custom port:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@next-ai-drawio/mcp-server@latest"],
"env": { "PORT": "6003" }
}
}
}
"No active session"
Call start_session first to open the browser window.
Browser not updating
Check that the browser URL has the ?mcp= query parameter. The MCP session ID connects the browser to the server.
License
Apache-2.0