Draw.io MCP Server for Claude Code: Setup & Config

What you can do with Draw.io in Claude Code

Keep assistant-driven diagram edits tied to explicit files and pages, with a bundled browser editor.

• Bring Mermaid material into a Draw.io editing session.
• Exchange image exports that retain the diagram's editable XML.
• Use discovered cloud or network stencils when building visual documentation.

Before you start: Draw.io in Claude Code

• Node.js version 22 or above
• MCP host to launch the server
• Browser to open the included editor

This is the README's included-editor configuration. Restart the MCP host, then browse to http://localhost:3000/ for the editor UI; that address is not the MCP transport endpoint. An extension-based session can omit --editor. Do not assume the blocked desktop path works like either browser option.

Draw.io Claude Code configuration

1. Choose Claude Code configuration scope

   For Draw.io MCP Server, open Project scope: .mcp.json at the repository root. Project JSON: merge into mcpServers; user scope: use the CLI.

2. Add Draw.io MCP Server to Claude Code

   Use the drawio-mcp-server entry below in mcpServers. Keep Draw.io MCP Server's documented stdio connection fields and your other Claude Code entries.

3. Check Draw.io MCP Server in Claude Code

   Draw.io MCP Server: Inspect claude mcp list and /mcp status.

{
  "mcpServers": {
    "drawio-mcp-server": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "drawio-mcp-server",
        "--editor"
      ],
      "env": {}
    }
  }
}

claude mcp add-json --scope project 'drawio-mcp-server' '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"],"env":{}}'

Draw.io tools available to Claude Code

Draw.io's stored tool list documents 6 tools; compare it with Claude Code's connected tool list, because the stored list is not a live check.

list-documents

For Draw.io's list-documents, review the permission request and arguments in Claude Code before approval.

Find connected diagram instances before choosing the document to edit.

get-current-page

For Draw.io's get-current-page, review the permission request and arguments in Claude Code before approval.

Identify the active page in a diagram.

list-pages

For Draw.io's list-pages, review the permission request and arguments in Claude Code before approval.

copy-page

For Draw.io's copy-page, review the permission request and arguments in Claude Code before approval.

rename-page

For Draw.io's rename-page, review the permission request and arguments in Claude Code before approval.

Update the label used for a diagram page.

create-page

For Draw.io's create-page, review the permission request and arguments in Claude Code before approval.

Draw.io: full stored tool descriptions

Troubleshooting Draw.io in Claude Code

• If Draw.io MCP Server fails to start, check npx drawio-mcp-server (Node.js/npm), the working directory, and Claude Code's selected scope; inspect claude mcp list and /mcp.
• Draw.io MCP Server uses stdio here: Claude Code must keep the configured process running; protocol output belongs on stdout and diagnostics on stderr.
• Known limitation: Runtime requirements start at Node.js 22.
• Known limitation: Firefox needs a TLS-enabled connection.
• Known limitation: The experimental desktop integration is presently blocked by upstream CSP behavior.
• General Claude Code troubleshooting lives in the /clients/claude-code guide.

Frequently asked questions