home / mcp / draw.io mcp server

Draw.io MCP Server

Provides programmatic access to Draw.io diagrams via MCP, enabling inspection and modification of diagrams through a centralized API.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "lgazo-drawio-mcp-server": {
      "url": "http://localhost:3000/mcp"
    }
  }
}

The Draw.io MCP server lets you control Draw.io diagrams and extract diagram data through the Model Context Protocol. You can run it locally, connect it to an MCP client, and use HTTP or local stdio transports to manage diagrams programmatically, making it easy to automate diagram creation, editing, and analysis within AI workflows.

How to use

You connect an MCP client to either the local server or the remote transport to interact with Draw.io diagrams. Use the available tools to inspect diagram content, create and modify shapes, connect cells with edges, and set metadata on diagram elements. Start by choosing a transport: use the local stdio path for development and testing, or enable the HTTP transport to reach the server from remote agents or browser-based clients. Extend functionality by combining operations to build rich diagram automation.

How to install

Prerequisites: Node.js (v20 or higher) installed on your system.

Install and run the server locally using the stdio approach (the browser extension connects to the server over a WebSocket port). Use the following command to start the server with the default settings.

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

Additional setup and usage notes

Configuration and transport options let you customize how the MCP server talks to clients and browser extensions. The server can expose a streamable HTTP MCP transport on port 3000, and you can opt to run stdio, http, or both transports.

To run with HTTP transport enabled, start the server with the HTTP flag and port, then verify the health endpoint and connect to the MCP endpoint.

npx -y drawio-mcp-server --transport http --http-port 3000
# or both transports
npx -y drawio-mcp-server --transport stdio,http --http-port 4000
`

Configuration examples and endpoints

Default WebSocket port for the browser extension is 3333 unless you customize it with extension-port. The browser extension must connect to the same port that you configure on the server.

Health endpoint and MCP endpoint (HTTP transport) example:

curl http://localhost:3000/health
# { "status": "ok" }

# MCP endpoint
# MCP calls are sent to: http://localhost:3000/mcp

Examples of interaction with the Draw.io MCP server

Inspect a diagram’s current selection, shapes, and properties, or add and connect new diagram elements programmatically. You can also store custom attributes on diagram cells and edit edges or shapes to reflect your automation logic.

Security and access notes

If you expose the HTTP transport, ensure you apply appropriate access controls and only connect from trusted clients. CORS is enabled to allow calls from browser-based clients.

Troubleshooting tips

If the browser extension cannot connect, verify that the extension port matches the server’s configured port and that the server process is running. Check for activity on the WebSocket or HTTP transport ports and ensure the MCP client is pointed at the correct /mcp endpoint.

Available tools

get-selected-cell

Retrieves the currently selected cell in the diagram with all its attributes such as ID, geometry, style, and value.

get-shape-categories

Fetches the shape categories available in the diagram's library, returning category IDs and names.

get-shapes-in-category

Gets all shapes within a specified library category by its ID, returning shape objects with properties and styles.

get-shape-by-name

Finds a specific shape by name across all available shapes, including category and style information.

list-paged-model

Provides a paginated view of all diagram cells, with essential fields and sanitization to enable programmatic inspection without overwhelming data.

add-rectangle

Creates a new rectangle shape on the active page with position, size, text, and style options.

add-edge

Creates a connection between two cells with optional label and style.

delete-cell-by-id

Removes a specified cell from the diagram by its ID.

add-cell-of-shape

Adds a new cell of a specific library shape, with optional position, size, text, and style.

set-cell-shape

Applies a library shape’s style to an existing cell to change its appearance.

set-cell-data

Stores or updates a custom attribute on a cell by key-value pair.

edit-cell

Updates properties of an existing vertex or shape cell by its ID, including text, position, size, and style.

edit-edge

Updates an existing edge between two cells with optional label, new source/target, and style.