Draw.io MCP Server

Name: Draw.io MCP Server
Author: draw.io

Official draw.io server that turns XML, Mermaid or CSV into diagrams shown in chat or opened in the editor

Official · draw.io JavaScript Remote (hosted) · Streamable HTTP Local · stdio, Streamable HTTP Design Productivity

GitHub npm Website

93 popularity score ★ 5.8k ↓ 47k/wk

Connect your client

Remote (hosted)

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 (desktop and web)Add as a custom connector, or from the Claude.ai connector directory

https://mcp.draw.io/mcp

ChatGPTChatGPT Plugins, + then Add custom MCP server, authentication off

https://mcp.draw.io/mcp

VS Code.vscode/mcp.json

{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

Cursor~/.cursor/mcp.json or .cursor/mcp.json

{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

github copilot cliterminal

copilot mcp add --transport http drawio https://mcp.draw.io/mcp

opencodeopencode.json

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "drawio": {
      "type": "remote",
      "url": "https://mcp.draw.io/mcp",
      "enabled": true
    }
  }
}

Local (once it is running)

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 --transport http draw-io http://localhost:3001/mcp

Cursor~/.cursor/mcp.json

{
  "mcpServers": {
    "draw-io": {
      "url": "http://localhost:3001/mcp"
    }
  }
}

VS Code.vscode/mcp.json

{
  "servers": {
    "draw-io": {
      "type": "http",
      "url": "http://localhost:3001/mcp"
    }
  }
}

Codex~/.codex/config.toml

[mcp_servers.draw-io]
url = "http://localhost:3001/mcp"

Gemini CLITerminal

gemini mcp add --scope user --transport http draw-io http://localhost:3001/mcp

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

Claude Desktopclaude_desktop_config.json

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

Cursor~/.cursor/mcp.json

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

VS Code.vscode/mcp.json

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

Codex~/.codex/config.toml

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

Gemini CLITerminal

gemini mcp add --scope user draw-io npx -- -y @drawio/mcp

Local (from source)

Add in one click

Add to Cursor Add to VS Code Add to LM Studio

Opens the app, which asks before it adds the server. Then replace each <NAME> in its settings with your value.

Or add it by command or config

FirstTerminal

git clone https://github.com/jgraph/drawio-mcp.git
cd drawio-mcp/mcp-tool-server
npm install

Claude CodeTerminal

claude mcp add draw-io -- node '<ABSOLUTE_PATH_TO_CLONE>/mcp-tool-server/src/index.js'

Claude Desktopclaude_desktop_config.json

{
  "mcpServers": {
    "draw-io": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/mcp-tool-server/src/index.js"
      ]
    }
  }
}

Cursor~/.cursor/mcp.json

{
  "mcpServers": {
    "draw-io": {
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/mcp-tool-server/src/index.js"
      ]
    }
  }
}

VS Code.vscode/mcp.json

{
  "servers": {
    "draw-io": {
      "type": "stdio",
      "command": "node",
      "args": [
        "<ABSOLUTE_PATH_TO_CLONE>/mcp-tool-server/src/index.js"
      ]
    }
  }
}

Codex~/.codex/config.toml

[mcp_servers.draw-io]
command = "node"
args = ["<ABSOLUTE_PATH_TO_CLONE>/mcp-tool-server/src/index.js"]

Gemini CLITerminal

gemini mcp add --scope user draw-io node -- '<ABSOLUTE_PATH_TO_CLONE>/mcp-tool-server/src/index.js'

Settings 4

`DRAWIO_BASE_URL`	Optional: Tool server: draw.io instance the diagrams open in, for a self-hosted draw.io. Default `https://app.diagrams.net/`.
`DRAWIO_ICON_SERVICE_URL`	Optional: Icon service search_shapes queries; off, none, 0 or false stop it querying any. Default `https://icons.diagrams.net/api/icons`. For search_shapes.
`DRAWIO_ELK_URL`	Optional: Tool server: where the ELK layout bundle is downloaded from on first use. Default `https://viewer.diagrams.net/js/elk/drawio-elk.min.js`. For open_drawio_xml.
`DRAWIO_SHAPE_INDEX_URL`	Optional: Tool server: where the shape index is fetched from when no local copy is present. Default `https://cdn.jsdelivr.net/gh/jgraph/drawio-mcp@main/shape-search/search-index.json`. For search_shapes.

What it does

The draw.io team's own MCP server, from the jgraph/drawio-mcp repository. An assistant uses it to produce draw.io diagrams (flowcharts, architecture and network drawings, org charts, sequence and UML diagrams) and can look up the right shape among about 10,000 in draw.io's libraries (AWS, Azure, GCP, Cisco, Kubernetes, P&ID, electrical, BPMN) to get its exact style string.

There are two servers. The MCP App Server is hosted at https://mcp.draw.io/mcp and needs no install or sign-in. Its create_diagram tool takes draw.io XML or Mermaid (28 diagram types) and shows the result as an interactive viewer inside the chat in hosts that support the MCP Apps extension (Claude.ai, ChatGPT, VS Code 1.109+, Cursor 2.6+); other hosts, such as Claude Code, Copilot CLI or OpenCode, get a link that opens the diagram in draw.io. The same server can be run yourself with Node.js, the jgraph/drawio-mcp Docker image or Cloudflare Workers.

The MCP Tool Server is the npm package @drawio/mcp, started with npx. It takes XML, CSV or Mermaid, packs the diagram into a draw.io URL and opens it in the full editor in your default browser (the code launches it itself with open, xdg-open or start). It also reads and replaces single pages of a local multi-page .drawio file. Version 1.10.0 has eight tools; with create_diagram from the App Server the two share nine.

Optional layout passes tidy XML diagrams: ELK re-arranges the nodes, libavoid reroutes connectors around shapes. The tool server's code also reads DRAWIO_SHAPE_INDEX_URL, a setting the README leaves out, which sets where search_shapes loads its shape index from (by default jsDelivr's copy of the repository's main branch).

What it needs

To run it yourself	Node.js 18+
Runs on	macOS, Windows, Linux
Also	A default web browser, for the npm tool server

The hosted endpoint needs nothing installed. To self-host the App Server, start it with `docker run --rm -p 127.0.0.1:3001:3001 jgraph/drawio-mcp` (or `npm start` in mcp-app-server of a clone) and connect clients to http://localhost:3001/mcp. Claude.ai cannot reach localhost, so its docs use a tunnel (`npx cloudflared tunnel --url http://localhost:3001`).

Limits

Not covered Diagrams render inline only in MCP Apps hosts (Claude.ai, ChatGPT, VS Code 1.109+, Cursor 2.6+); other hosts get an app.diagrams.net link.
Not covered The App Server (hosted or self-hosted) takes XML or Mermaid; CSV input is only in the npm tool server (open_drawio_csv).
Not covered Layout passes apply to XML; for Mermaid, postLayout "elk" only changes flowcharts and is ignored for other diagram types.
Size cap search_shapes returns 10 results by default, up to 50 with limit.
Limit The main README's layout table marks ELK as unavailable in the tool server, but open_drawio_xml in 1.10.0 accepts postLayout "elk".
Limit A self-hosted App Server has no authentication; it listens on loopback only unless LISTEN=0.0.0.0 is set.
Not covered Cursor builds older than 2.6 connect to the hosted server but show nothing inline; the docs point them to @drawio/mcp.

Who it suits

Suits anyone who wants an assistant to draw diagrams that stay editable in draw.io. The hosted endpoint is the quickest start and shows diagrams in the chat, but the diagram text goes to draw.io's server; pick the npm tool server or a self-hosted App Server when diagrams must stay on your machine, and the tool server when you need CSV input, the full editor, or edits to pages of existing .drawio files. It only produces and edits diagrams; it does not export PNG, SVG or PDF (the repository's assistant plugins do that through draw.io Desktop).

Tools 9

8 only read, 1 can delete or overwrite. A ? marks an optional parameter.

create_diagram: App Server: shows draw.io XML or Mermaid as an interactive diagram in the chat, or returns a draw.io link where the host cannot render it.
search_shapes: Finds draw.io shapes by keyword, adding icons from the draw.io icon service when the built-in libraries have no good match, and returns their style strings.query: stringlimit?: number
get_drawio_reference: Returns the full XML or Mermaid generation guide for the model to read before drawing.format: enum
open_drawio_xml: Tool Server: opens a draw.io XML diagram in the editor in your browser, after repairing it, with optional ELK layout or libavoid routing.content: stringlightbox?: booleandark?: enumpostLayout?: enumdirection?: enumrouting?: enum
open_drawio_csv: Tool Server: opens the editor with a diagram that draw.io builds from CSV data.content: stringlightbox?: booleandark?: enum
open_drawio_mermaid: Tool Server: opens the editor with a Mermaid definition converted to an editable diagram.content: stringpostLayout?: enumlightbox?: booleandark?: enum
list_pages: Lists the pages of a local .drawio or .xml file with index, id, name and rough size.path: string
get_page: Returns one page of a local diagram file as mxGraphModel XML, chosen by index, name or id.path: stringpage: string
set_page deletes: Overwrites one page of a local diagram file with new mxGraphModel XML; other pages are kept.path: stringpage: stringcontent: string

Popularity

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

★ 5.8k ↓ 47k/wk

GitHub stars, whole repository	5,792	37.4 points
Stars in 30 days	+161	10 points
npm downloads, last week	46,985	37.4 points
Official server	Yes	8 points

It lives in the folder mcp-tool-server of jgraph/drawio-mcp, 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-07. How the score works.

Where it is published

Code	jgraph/drawio-mcp/mcp-tool-server ★ 5.8k, the whole repository
npm	@drawio/mcp 1.11.0, 2026-11-06, the one the command runs
Docker Hub	jgraph/drawio-mcp
Hosted	`https://mcp.draw.io/mcp` Streamable HTTP · no sign-in

What it can reach

Runs	On your machine, or on the maker's servers
Reaches	The internet, Files on your machine
Changes things	Yes: it can write, send, create or delete
Sign-in	None
Licence	Apache-2.0 (npm)
Last code change	2026-11-06

No account or key on any way. With the hosted endpoint the diagram is sent to draw.io's server; a self-hosted App Server or the npm tool server keeps it on your machine. The tool server puts the diagram in the URL fragment, which browsers do not send, and launches your default browser itself. It still fetches code from viewer.diagrams.net (libavoid, ELK) and the shape index from jsDelivr, caching them under ~/.cache/drawio-mcp or the OS equivalent, and search_shapes sends search terms to icons.diagrams.net unless DRAWIO_ICON_SERVICE_URL=off. set_page overwrites pages of local files; in 1.10.0 the path is checked only for a .drawio or .xml ending, not limited to a folder.

Over time

GitHub stars, whole repository 5.8k +204 (+4 %)

5.8k5.6k

8 Oct 20267 Nov 2026

npm downloads a week 47k +46k (+5901 %)

47k783

9 Feb 20267 Nov 2026

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

Popularity score 93 +11 (+14 %)

9371

8 Oct 20267 Nov 2026

What is rising across the directory

Sources

Page checked 2026-10-24.

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/draw-io.svg)](https://everymcpserver.com/servers/draw-io)

Connect your client

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Add in one click

Or add it by command or config

Settings 4

What it does

What it needs

Limits

Who it suits

Tools 9

Similar servers

Draw.io MCP Server

Next AI Draw.io MCP Server

MCP Server Chart

Excalidraw MCP Server

Excalidraw MCP

MCP Mermaid