Draw.io MCP Server for Windsurf: Setup & Config

What you can do with Draw.io in Windsurf

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

• Assign diagram work to explicit pages while keeping a multi-file session organized.
• Refine connectors, labels, and grouped shapes in an existing architecture drawing.
• Use discovered cloud or network stencils when building visual documentation.

Before you start: Draw.io in Windsurf

• 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 Windsurf configuration

1. Choose Windsurf configuration scope

   For Draw.io MCP Server, open macOS/Linux: ~/.codeium/windsurf/mcp_config.json Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json. Merge into mcpServers; remote endpoints use serverUrl.

2. Add Draw.io MCP Server to Windsurf

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

3. Check Draw.io MCP Server in Windsurf

   Draw.io MCP Server: Refresh MCP in Windsurf settings and inspect Cascade’s tools.

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

Draw.io tools available to Windsurf

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

list-documents

After refreshing Draw.io in Windsurf settings, check Cascade's tool list for list-documents.

get-current-page

After refreshing Draw.io in Windsurf settings, check Cascade's tool list for get-current-page.

list-pages

After refreshing Draw.io in Windsurf settings, check Cascade's tool list for list-pages.

Discover the pages belonging to a document.

copy-page

After refreshing Draw.io in Windsurf settings, check Cascade's tool list for copy-page.

rename-page

After refreshing Draw.io in Windsurf settings, check Cascade's tool list for rename-page.

Update the label used for a diagram page.

create-page

After refreshing Draw.io in Windsurf settings, check Cascade's tool list for create-page.

Introduce an additional page in the diagram.

Draw.io: full stored tool descriptions

Troubleshooting Draw.io in Windsurf

• Check npx drawio-mcp-server (Node.js/npm) on the machine running Windsurf's MCP integration for Draw.io MCP Server; refresh MCP and inspect Cascade's tools.
• Draw.io MCP Server uses stdio here: Windsurf 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 Windsurf troubleshooting lives in the /clients/windsurf guide.

Frequently asked questions