Draw.io MCP Tool Server

The official draw.io MCP server that opens diagrams directly in the draw.io editor. Supports XML, CSV, and Mermaid.js formats with lightbox and dark mode options.

This package is part of the drawio-mcp repository, which also includes:

• MCP App Server — Renders diagrams inline in AI chat interfaces. Hosted at https://mcp.draw.io/mcp — no install required.
• Skill + CLI — Claude Code skill that generates native .drawio files with optional PNG/SVG/PDF export.
• Project Instructions — Zero-install approach using Claude Project instructions.

Features

• Open XML diagrams: Load native draw.io/mxGraph XML format
• Import CSV data: Convert tabular data to diagrams (org charts, flowcharts, etc.)
• Render Mermaid.js: Transform Mermaid syntax into editable draw.io diagrams
• Customizable display: Lightbox mode, dark mode, and more

Installation

Using npx (recommended)

npx @drawio/mcp

Global installation

npm install -g @drawio/mcp
drawio-mcp

From source

git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp/mcp-tool-server
npm install
npm start

Configuration

Claude Desktop

Add to your Claude Desktop configuration file:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@drawio/mcp"]
    }
  }
}

Other MCP Clients

Configure your MCP client to run the server via stdio:

npx @drawio/mcp

Tools

open_drawio_xml

Opens the draw.io editor with XML content.

Parameter	Type	Required	Description
content	string	Yes	Draw.io XML content
lightbox	boolean	No	Read-only view mode (default: false)
dark	string	No	"auto", "true", or "false" (default: "auto")

open_drawio_csv

Opens the draw.io editor with CSV data converted to a diagram.

Parameter	Type	Required	Description
content	string	Yes	CSV content
lightbox	boolean	No	Read-only view mode (default: false)
dark	string	No	"auto", "true", or "false" (default: "auto")

open_drawio_mermaid

Opens the draw.io editor with a Mermaid.js diagram.

Parameter	Type	Required	Description
content	string	Yes	Mermaid.js syntax
lightbox	boolean	No	Read-only view mode (default: false)
dark	string	No	"auto", "true", or "false" (default: "auto")

list_ui_templates

Returns a list of available UI templates with descriptions.

get_ui_template

Returns the parsed JSON content of a specific UI template.

Parameter	Type	Required	Description
templateId	string	Yes	The ID of the template to retrieve (e.g., 'saas-dashboard')

open_live_session

Opens a live draw.io session with two-way sync. Returns the viewer URL.

update_live_diagram

Broadcasts new XML to all connected live session clients.

Parameter	Type	Required	Description
xml	string	Yes	The new draw.io XML content

Example Prompts

• "Use open_drawio_mermaid to create a sequence diagram showing OAuth2 authentication flow"
• "Use open_drawio_csv to create an org chart: CEO → CTO, CFO; CTO → 3 Engineers"
• "Use open_drawio_xml to create a detailed AWS architecture diagram with VPC, subnets, and security groups"

Tip: Claude Desktop may have multiple ways to create diagrams. To ensure it uses the draw.io MCP, mention the tool name explicitly or add a system instruction: "Always use the draw.io MCP tools to create diagrams."

How It Works

1. The MCP server receives diagram content (XML, CSV, or Mermaid)
2. Content is compressed using pako deflateRaw and encoded as base64
3. A draw.io URL is generated with the #create hash parameter
4. The URL is returned to the LLM, which can present it to the user
5. Opening the URL loads draw.io with the diagram ready to view/edit

Related Resources

• draw.io - Free online diagram editor
• draw.io Desktop - Desktop application
• drawio-mcp on GitHub - Full repository with all four approaches
• MCP Specification