The Draw.io MCP Server lets AI agents create, edit, and export diagrams programmatically through the Model Context Protocol. Instead of manually drawing flowcharts, architecture diagrams, and sequence diagrams, your agent generates them from code descriptions, system specifications, or natural language prompts. The output is standard Draw.io XML that opens in diagrams.net, VS Code, Confluence, and any other tool that supports the format.
This guide covers installation, configuration for Claude Code, supported diagram types, practical code examples, and how to integrate diagram generation into documentation workflows monitored by Delx.
Draw.io MCP Server is a Model Context Protocol server that wraps the Draw.io (diagrams.net) XML format and rendering engine into MCP tools. Agents can create diagrams by describing components and connections, and the server produces valid Draw.io XML files. These files can be opened directly in the diagrams.net web editor, the VS Code Draw.io extension, or embedded in Confluence, Notion, and other documentation platforms.
The server supports multiple diagram paradigms: flowcharts, sequence diagrams, entity-relationship diagrams, network topology maps, class diagrams, state machines, and freeform architecture diagrams. Each paradigm has optimized layout algorithms that produce clean, readable output without manual positioning.
Beyond creation, the server can read existing Draw.io files, modify specific elements (add nodes, change connections, update labels), and export to PNG, SVG, or PDF. This makes it useful for both generating new documentation and maintaining existing diagram libraries as systems evolve.
Install the Draw.io MCP Server via npm. Requires Node.js 18 or later. No external account or API key is needed since diagram generation runs locally.
npm install -g @anthropic/drawio-mcp-server # Verify installation drawio-mcp --version
For export to PNG/PDF, the server requires Chromium. It will download a compatible version on first use, or you can point it to an existing installation:
npx @anthropic/drawio-mcp-server --chrome-path /usr/bin/chromium
Add the Draw.io MCP Server to your Claude Code settings. Edit ~/.claude/settings.json:
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": ["@anthropic/drawio-mcp-server"],
"env": {
"DRAWIO_OUTPUT_DIR": "./docs/diagrams",
"DRAWIO_DEFAULT_THEME": "dark",
"DRAWIO_AUTO_LAYOUT": "true"
}
}
}
}The DRAWIO_OUTPUT_DIR sets where generated diagram files are saved. DRAWIO_DEFAULT_THEME accepts dark, light, or minimal. When DRAWIO_AUTO_LAYOUT is enabled, the server automatically positions elements using force-directed or hierarchical layout algorithms.
Standard flowcharts with decision nodes, process steps, start/end terminals, and directional connections. The server supports both top-down and left-right orientations. Agents describe the flow logic and the server handles node placement, connection routing, and styling.
{
"tool": "drawio_create",
"arguments": {
"type": "flowchart",
"title": "User Authentication Flow",
"nodes": [
{ "id": "start", "label": "User visits /login", "type": "start" },
{ "id": "input", "label": "Enter credentials", "type": "process" },
{ "id": "check", "label": "Valid?", "type": "decision" },
{ "id": "success", "label": "Redirect to dashboard", "type": "process" },
{ "id": "fail", "label": "Show error message", "type": "process" },
{ "id": "end", "label": "Session created", "type": "end" }
],
"edges": [
{ "from": "start", "to": "input" },
{ "from": "input", "to": "check" },
{ "from": "check", "to": "success", "label": "Yes" },
{ "from": "check", "to": "fail", "label": "No" },
{ "from": "success", "to": "end" },
{ "from": "fail", "to": "input" }
],
"output": "auth-flow.drawio"
}
}Model interactions between components over time. Define participants (services, users, databases) and the messages exchanged between them. The server renders lifelines, activation bars, and return messages in standard UML sequence diagram format.
{
"tool": "drawio_create",
"arguments": {
"type": "sequence",
"title": "API Request Lifecycle",
"participants": ["Client", "API Gateway", "Auth Service", "Backend", "Database"],
"messages": [
{ "from": "Client", "to": "API Gateway", "label": "POST /api/data" },
{ "from": "API Gateway", "to": "Auth Service", "label": "Validate token" },
{ "from": "Auth Service", "to": "API Gateway", "label": "Token valid" },
{ "from": "API Gateway", "to": "Backend", "label": "Forward request" },
{ "from": "Backend", "to": "Database", "label": "SELECT query" },
{ "from": "Database", "to": "Backend", "label": "Result set" },
{ "from": "Backend", "to": "Client", "label": "200 OK + JSON" }
],
"output": "api-sequence.drawio"
}
}Freeform architecture diagrams with grouped components, cloud provider icons (AWS, GCP, Azure), and labeled connections. Define layers (frontend, backend, data, infrastructure) and the server arranges components within each layer. Supports custom icons and color coding for different service types.
{
"tool": "drawio_create",
"arguments": {
"type": "architecture",
"title": "Production Infrastructure",
"layers": [
{
"name": "Frontend",
"components": [
{ "id": "cdn", "label": "CloudFront CDN", "icon": "aws-cloudfront" },
{ "id": "web", "label": "Next.js App", "icon": "aws-ecs" }
]
},
{
"name": "Backend",
"components": [
{ "id": "api", "label": "API Service", "icon": "aws-ecs" },
{ "id": "worker", "label": "Worker Queue", "icon": "aws-sqs" }
]
},
{
"name": "Data",
"components": [
{ "id": "db", "label": "PostgreSQL", "icon": "aws-rds" },
{ "id": "cache", "label": "Redis", "icon": "aws-elasticache" }
]
}
],
"connections": [
{ "from": "cdn", "to": "web" },
{ "from": "web", "to": "api" },
{ "from": "api", "to": "db" },
{ "from": "api", "to": "cache" },
{ "from": "api", "to": "worker" },
{ "from": "worker", "to": "db" }
],
"output": "prod-architecture.drawio"
}
}The Draw.io MCP Server fits naturally into code-driven documentation workflows. Agents can generate diagrams as part of pull request reviews, sprint documentation, or architecture decision records. Since the output is standard Draw.io XML, diagrams integrate with existing toolchains.
A common pattern is to store .drawio files alongside code in your repository. When the agent detects architectural changes (new services, modified API contracts, database schema updates), it automatically regenerates the relevant diagrams. The VS Code Draw.io extension renders these files inline, so developers see updated diagrams without leaving their editor.
For teams using Confluence or Notion, the server can export diagrams to PNG or SVG and upload them via their respective APIs. This keeps documentation visuals in sync with the actual system architecture without manual screenshot workflows.
When diagram generation runs as part of automated documentation pipelines, Delx monitors the agent's execution health. Track how many diagrams are generated per day, detect failures in export pipelines, and ensure documentation stays in sync with code changes.
// Delx monitors documentation agent health
{
"tool": "delx_heartbeat",
"arguments": {
"agent_id": "docs-diagram-agent",
"status": "healthy",
"metrics": {
"diagrams_generated": 24,
"export_failures": 0,
"avg_render_ms": 850,
"repos_covered": 6
}
}
}Delx alerts you when diagram generation fails, when render times spike (indicating complex diagrams that may need simplification), or when documentation coverage drops because new services lack corresponding diagrams.
No. Draw.io (diagrams.net) is free and open source. The MCP server generates standard Draw.io XML files locally. No account, API key, or cloud service required.
Yes. The output is standard Draw.io XML. Open it in diagrams.net, VS Code with the Draw.io extension, or any compatible editor. Manual edits are preserved if you later use the MCP server to update specific elements rather than regenerating the entire diagram.
The server exports to Draw.io XML (native), PNG, SVG, and PDF. PNG and PDF export require Chromium for rendering. SVG export is lightweight and works without a browser engine.
Yes. The drawio_read tool parses existing Draw.io files and returns the diagram structure as JSON. Agents can analyze existing diagrams, compare them against current code, and suggest updates.
The server uses hierarchical layout for flowcharts and sequence diagrams, and force-directed layout for architecture diagrams. You can override the algorithm per diagram or disable auto-layout entirely and provide explicit coordinates for each element.