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

What you can do with Draw.io in VS Code

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

• Refine connectors, labels, and grouped shapes in an existing architecture drawing.
• Bring Mermaid material into a Draw.io editing session.
• Exchange image exports that retain the diagram's editable XML.

Before you start: Draw.io in VS 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 VS Code configuration

1. Choose VS Code configuration scope

   For Draw.io MCP Server, open Workspace: .vscode/mcp.json. Merge into servers; preserve existing inputs.

2. Add Draw.io MCP Server to VS Code

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

3. Check Draw.io MCP Server in VS Code

   Draw.io MCP Server: Start in VS Code’s MCP controls; inspect output and trust prompts.

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

Draw.io tools available to VS Code

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

list-documents

Look for list-documents among VS Code's agent-mode tools after starting Draw.io through the MCP controls.

Find connected diagram instances before choosing the document to edit.

get-current-page

Look for get-current-page among VS Code's agent-mode tools after starting Draw.io through the MCP controls.

Identify the active page in a diagram.

list-pages

Look for list-pages among VS Code's agent-mode tools after starting Draw.io through the MCP controls.

copy-page

Look for copy-page among VS Code's agent-mode tools after starting Draw.io through the MCP controls.

Make another copy of an existing diagram page.

rename-page

Look for rename-page among VS Code's agent-mode tools after starting Draw.io through the MCP controls.

create-page

Look for create-page among VS Code's agent-mode tools after starting Draw.io through the MCP controls.

Draw.io: full stored tool descriptions

Troubleshooting Draw.io in VS Code

• Make npx drawio-mcp-server (Node.js/npm) available in the workspace, container, or remote environment hosting Draw.io MCP Server. Start through VS Code's MCP controls; inspect output and trust prompts.
• Draw.io MCP Server uses stdio here: VS 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 VS Code troubleshooting lives in the /clients/vscode guide.

Frequently asked questions