Draw.io MCP Server

Name: Draw.io MCP Server
Author: Ladislav Gazo

Builds, edits and exports draw.io diagrams live in a browser tab under an assistant's direction

By Ladislav Gazo (individual) TypeScript Local · stdio Design

GitHub npm Website

64 popularity score ★ 1.5k ↓ 3.7k/wk

Connect your client

Local (npm)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio Add to Goose

Opens the app, which asks before it adds the server.

Or add it by command or config

Claude CodeTerminal

claude mcp add draw-io -- npx -y drawio-mcp-server --editor

Claude Desktopclaude_desktop_config.json

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

Cursor~/.cursor/mcp.json

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

VS Code.vscode/mcp.json

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

Codex~/.codex/config.toml

[mcp_servers.draw-io]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]

Gemini CLITerminal

gemini mcp add --scope user draw-io npx -- -y drawio-mcp-server --editor

Settings 12

Set together: tls
`DRAWIO_MCP_EDITOR`	Optional: true is the same as --editor: host the built-in draw.io editor (otherwise the browser extension is needed). Default `false`.
`DRAWIO_MCP_HTTP_PORT`	Optional: Port for the HTTP transport and built-in editor. Default `3000`.
`DRAWIO_MCP_EXTENSION_PORT`	Optional: WebSocket port the editor or extension connects to. Default `3333`.
`DRAWIO_MCP_TRANSPORT`	Optional: stdio, http, or stdio,http. Default `stdio`.
`DRAWIO_MCP_HOST`	Optional: Bind address for HTTP and WebSocket; unset lets the OS choose.
`DRAWIO_MCP_ASSET_PATH`	Optional: Folder for the downloaded draw.io editor files instead of the user cache. For --editor.
`DRAWIO_MCP_WEBSOCKET_URL`	Optional: WebSocket URL advertised to the editor, for example behind a reverse proxy.
`DRAWIO_MCP_LOGGER`	Optional: console (stderr) or mcp-server log notifications. Default `console`.
`DRAWIO_MCP_TLS`	Optional: true turns on HTTPS and WSS, needed for Firefox. Give a cert and key, or DRAWIO_MCP_TLS_AUTO. Default `false`.
`DRAWIO_MCP_TLS_AUTO`	Optional: true creates a self-signed certificate from a local CA (needs DRAWIO_MCP_TLS). Default `false`.
`DRAWIO_MCP_TLS_CERT`	Optional: Path to your own certificate PEM, used with DRAWIO_MCP_TLS_KEY.
`DRAWIO_MCP_TLS_KEY`	Optional: Path to the private key PEM for DRAWIO_MCP_TLS_CERT.

What it does

This server links an MCP client to a draw.io editor open in your browser, so you can watch the diagram change while the assistant works on it. It places shapes and connectors, changes how they look and where they sit, nests one inside another, and manages pages and layers. Shapes come from the stencil libraries draw.io ships with, and the AWS, GCP, Azure, Cisco19 and CiscoSafe icons are looked up at runtime from the editor's sidebar. Whole diagrams can be imported or exported as XML or as images with the XML embedded. Mermaid source can become native draw.io cells or an editable embedded image.

You connect in one of two ways. Start it with --editor and it serves its own copy of draw.io at http://localhost:3000/, which you open in a browser. Without that flag you open app.diagrams.net yourself, and a Chrome or Firefox extension joins the tab to the server over a WebSocket on port 3333. Several documents can be open at once, and calls aimed at the same document wait in a queue, so more than one agent can work side by side.

The released package registers 30 tools, listed in src/tools/index.ts. The README on main also describes a show-diagram tool that opens the diagram inside MCP Apps hosts, but that tool is not in the published release yet. With --editor the editor is not shipped in the npm package. On first start the server downloads the latest draw.war release from jgraph/drawio on GitHub and unpacks it into your user cache unless --asset-path names another folder (src/assets/downloader.ts). There is also an installer subcommand, npx drawio-mcp-server install <host>, that writes the client config for you. It knows claude-code, claude-desktop, codex, zed and opencode.

What it needs

Runtime	Node.js 22+
Runs on	macOS, Windows, Linux
Also	A web browser with draw.io open: the built-in editor (--editor) or app.diagrams.net with the Draw.io MCP extension

Node.js 22 or newer. A web browser with draw.io open: either the built-in editor started with --editor (internet access on first start to download draw.io from GitHub), or app.diagrams.net plus the Draw.io MCP browser extension for Chrome or Firefox. Firefox needs TLS mode (--tls with your own certificate, or --tls --tls-auto and trusting the generated local CA).

Limits

Limit Does nothing until a draw.io tab is connected. With several documents connected, each call must name one with target_document
Limit get-selected-cell, set-active-layer, get-active-layer, import-diagram and selection exports act through the visible page and may switch it
Not covered save-document only triggers draw.io's Save. Sign-in, conflict or Save As prompts still need you in the tab
Limit export-diagram writes a file only to an absolute output_path whose folder already exists
Early release The draw.io desktop app is experimental: its connect-src CSP blocks the plugin's WebSocket link to the server
Not covered The show-diagram tool for MCP Apps hosts is described in the README on main but is not in the released package

It does nothing until a draw.io tab is open and connected; every live tool works on a connected tab, and when several documents are connected each call must name one with target_document. Some tools (get-selected-cell, set-active-layer, get-active-layer, import-diagram, selection exports) act through the visible page and may switch it. save-document only triggers draw.io's own Save; sign-in, conflict or Save As prompts still need you in the tab. export-diagram writes a file only to an absolute output_path whose folder already exists. Support for the draw.io desktop app is marked experimental and is blocked by draw.io's connect-src CSP, so the WebSocket link fails there.

Who it suits

Suits developers and architects who want an assistant to draw and rearrange real, editable draw.io diagrams on their own machine, including cloud architecture with vendor icons, multi-page diagrams or Mermaid conversion. It needs a browser tab kept open, so it fits desktop work rather than headless pipelines. It is a community project, not from draw.io's makers: jgraph publishes its own draw.io MCP server (which we also list), whose hosted endpoint at mcp.draw.io renders diagrams inside the chat without an install, and whose tool server opens diagrams in a new browser tab rather than editing a live one cell by cell.

Tools 30

10 only read, 17 change things, 3 can delete or overwrite. A ? marks an optional parameter.

list-documents: List the connected draw.io tabs with id, title, mode and page count
set-document-title changes: Rename the selected document through its storage providertitle: string
save-document changes: Trigger draw.io's File > Save on the selected document
get-selected-cell: Return the cell currently selected in the editortarget_page: object
get-shape-categories: List shape library categories, including vendor palettes
get-shapes-in-category: List the shapes in one library categorycategory_id: string
get-shape-by-name: Look up one shape and its style by nameshape_name: string
list-paged-model: Page through the cells of a page, with optional filterstarget_page: objectpage: objectpage_size?: numberfilter?: object
add-rectangle changes: Add a rectangle with position, size, text and styletarget_page: objectx?: numbery?: numberwidth?: numberheight?: numbertext?: stringstyle?: stringparent_id?: string
add-edge changes: Connect two cells with an edge, optional label and waypointstarget_page: objectsource_id: stringtarget_id: stringtext?: stringstyle?: stringpoints?: arrayparent_id?: string
delete-cell-by-id deletes: Remove a cell by its idtarget_page: objectcell_id: string
add-cell-of-shape changes: Add a cell using a named library shapetarget_page: objectshape_name: stringx?: numbery?: numberwidth?: numberheight?: numbertext?: stringstyle?: stringparent_id?: string
set-cell-shape changes: Change an existing cell to a library shapetarget_page: objectcell_id: stringshape_name: string
set-cell-data changes: Set a custom attribute on a celltarget_page: objectcell_id: stringkey: stringvalue: any
edit-cell changes: Update a cell's text, position, size or styletarget_page: objectcell_id: stringtext?: stringx?: numbery?: numberwidth?: numberheight?: numberstyle?: string
edit-edge changes: Update an edge's label, ends, style or waypointstarget_page: objectcell_id: stringtext?: stringsource_id?: stringtarget_id?: stringstyle?: stringpoints?: array
set-cell-parent changes: Nest a cell inside another cell or grouptarget_page: objectcell_id: stringparent_id: string
list-pages: List the pages of a document
get-current-page: Return the page shown in the editor
create-page changes: Add a new named pagename: string
copy-page changes: Duplicate a page, optionally under a new namepage: objectname?: string
rename-page changes: Give a page a new namepage: objectname: string
list-layers: List the layers on a pagetarget_page: object
set-active-layer changes: Choose the layer new cells go totarget_page: objectlayer_id: string
move-cell-to-layer changes: Move a cell onto another layertarget_page: objectcell_id: stringtarget_layer_id: string
get-active-layer: Return the layer currently activetarget_page: object
create-layer changes: Add a new named layertarget_page: objectname: string
export-diagram changes: Export as SVG, PNG or XML, returned inline or saved to an absolute pathtarget_page: objectformat: enumscale?: numberborder?: numberbackground?: stringshadow?: booleancrop?: booleanselection_only?: booleantransparent?: booleandpi?: numberembed_xml?: booleansize?: enumoutput_path?: string
import-diagram deletes: Load XML, or SVG/PNG with embedded XML, replacing, adding or as a new pagetarget_page: objectdata: stringformat: enummode?: enumfilename?: string
import-mermaid deletes: Convert Mermaid source to draw.io cells or embed it as an imagetarget_page: objectmermaid_source: stringmode?: enuminsert_mode?: enum

Popularity

64 popularity score, on our list (the bar is 36)

★ 1.5k ↓ 3.7k/wk

GitHub stars, whole repository	1,500	28.5 points
Stars in 30 days	+21	6.7 points
npm downloads, last week	3,697	28.5 points

It lives in the folder packages/drawio-mcp-server of lgazo/drawio-mcp-server, which holds more than this server. Its stars are the whole repository's, so in the score they never count for more than its own downloads.

Measured 2026-11-08. How the score works.

Where it is published

Code	lgazo/drawio-mcp-server/packages/drawio-mcp-server ★ 1.5k, the whole repository
npm	drawio-mcp-server 2.4.0, 2026-10-31

What it can reach

Runs	On your machine
Reaches	Drives a browser, Files on your machine, The internet
Changes things	Yes: it can write, send, create or delete
Sign-in	None
Licence	MIT (npm)
Last code change	2026-11-01

Runs locally over stdio with no account or key. It does open local listeners. There is a WebSocket on port 3333 for the editor or extension, and with --editor or --transport http an HTTP server on port 3000. The OS picks the bind address unless --host is set, and the docs describe no authentication on these ports. Tools change the diagram in the connected tab and can delete cells or replace a whole diagram on import. save-document triggers draw.io's own save to wherever the document is stored. export-diagram can write a file to any absolute path the server process may write to. With --editor it downloads the draw.io web app from GitHub releases on first start. The --install-desktop-plugin flag copies mcp-plugin.js into the plugins folder of the draw.io desktop app before starting.

Over time

GitHub stars, whole repository 1.5k +21 (+1 %)

1.5k1.5k

8 Oct 20268 Nov 2026

npm downloads a week 3.7k +3.4k (+1311 %)

3.7k262

20 Oct 20258 Nov 2026

Before the site measured it, read from npm's daily download counts.

Popularity score 64 +2 (+3 %)

6442

8 Oct 20268 Nov 2026

What is rising across the directory

Sources

Page checked 2026-11-08.

Badge for your README

Shows this server's rank in its category, and stars for a server that runs on your machine. It updates every hour.

MarkdownREADME.md

[![Draw.io MCP Server on EveryMCPServer](https://everymcpserver.com/badge/drawio-mcp-server.svg)](https://everymcpserver.com/servers/drawio-mcp-server)

Connect your client

Add in one click

Or add it by command or config

Settings 12

What it does

What it needs

Limits

Who it suits

Tools 30

Similar servers

Draw.io MCP Server

Next AI Draw.io MCP Server

ARC-DRAW

MCP Server Chart

Excalidraw MCP Server

Excalidraw MCP