Server facts
Draw.io MCP Server
Project
- Author
- lgazo
- Repository
- github.com/lgazo/drawio-mcp-server
- License
- MIT
- Category
- Design & Creative
Tech
- Runtime / language
- node
- Transports
- stdio
- Remote available
- No
- Authentication
- Not specified
Activity
- GitHub stars
- 1,486
- Last commit
- Data as of
Tags
- Diagram Editing
- Drawio
- Mermaid
- Multi Page
- Visual Documentation
Overview
A diagramming session can contain several files and several pages, so this server makes targeting part of its editing model. It discovers connected documents, routes requests through a document selector, and requires a page selector for operations scoped to one page. Live actions are queued in order for each document; different files can therefore receive work from different agents without sharing one document queue. Page operations cover discovery, creation, copying, and renaming, while layers provide another way to organize diagram content. Editing reaches individual labels, connectors, and shapes, including nesting and grouping. Connector geometry can use waypoints, with automatic routing for self-connections.
Users can enter through the included browser editor or connect an existing Draw.io browser session using an extension. The included editor is served locally and does not need that extension. Diagram interchange covers XML and editable XML embedded within PNG or SVG images. Mermaid content can be imported, embedded, or expanded. Vendor stencils are found in the running editor's sidebar, including cloud and network icon collections, rather than selected from a separately curated list. Setup needs an MCP host and at least Node.js 22. TLS is optional for the server generally, but required for the documented Firefox support. The desktop Electron path is different: its experimental integration currently cannot complete the connection because of an upstream CSP restriction.
Install & configure
Requirements
- Node.js version 22 or above
- MCP host to launch the server
- Browser to open the included editor
npx -y drawio-mcp-server --editorThis 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.
Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Config file · macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Use Settings → Developer → Edit Config when available. Do not assume a Linux configuration path; check the client documentation for your platform. Remote servers use the app’s connector flow when supported, not the local stdio file shown here. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"drawio-mcp-server": {
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
],
"env": {}
}
}
}Config file · Project: .cursor/mcp.json
User: ~/.cursor/mcp.json
The project path is relative to the workspace root. The tilde denotes your user home directory. Use Cursor’s MCP settings to confirm which configuration and scope your installed version is reading. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"drawio-mcp-server": {
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
],
"env": {}
}
}
}Config file · Workspace: .vscode/mcp.json
For user scope, use the “MCP: Open User Configuration” command if available. Do not guess a user configuration path across operating systems, profiles, containers, or remote workspaces; check the client documentation. Merge this example with existing settings; do not overwrite unrelated servers.
{
"servers": {
"drawio-mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
],
"env": {}
}
}
}Config file · macOS/Linux: ~/.codeium/windsurf/mcp_config.json
Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
Open the MCP configuration through Windsurf’s settings when possible to confirm the active file. Paths can differ in managed or future releases; check the client documentation if this location is not present. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"drawio-mcp-server": {
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
],
"env": {}
}
}
}Config file · Project scope: .mcp.json at the repository root
The project file uses mcpServers. For user scope, use claude mcp add --scope user rather than assuming .mcp.json in your home directory is the user configuration. Check the client documentation for managed settings and storage details. Merge this example with existing settings; do not overwrite unrelated servers.
{
"mcpServers": {
"drawio-mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
],
"env": {}
}
}
}Examples are translated from the published configuration. Supply your own credentials and verify requirements in the upstream README. Remote connectors are shown only where a supported configuration format is known.
Tools
Source: repository README. Tool descriptions are a documented snapshot, not a live capability check.
| Tool | What it does |
|---|---|
| list-documents | Find connected diagram instances before choosing the document to edit. |
| get-current-page | Identify the active page in a diagram. |
| list-pages | Discover the pages belonging to a document. |
| copy-page | Make another copy of an existing diagram page. |
| rename-page | Update the label used for a diagram page. |
| create-page | Introduce an additional page in the diagram. |
Names, permissions, and defaults can change. Check the current upstream documentation before granting access.
Use cases
- Assign diagram work to explicit pages while keeping a multi-file session organized.
- 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.
- Use discovered cloud or network stencils when building visual documentation.
Strengths
- The bundled browser editor eliminates an extension requirement for that connection path.
- Document queues and explicit page targets make the destination of edits unambiguous.
- Combines diagram interchange with live editing of pages, layers, and elements.
- Discovers vendor icons from the active editor instead of maintaining a separate icon catalog.
Limitations
- Runtime requirements start at Node.js 22.
- Firefox needs a TLS-enabled connection.
- The experimental desktop integration is presently blocked by upstream CSP behavior.
Frequently asked questions
Independent listing, not an affiliation or security review. Grant the least access needed and verify the upstream instructions before running code.
