add-cell-of-shape
This tool allows you to add a new vertex cell on the target page of the current Draw.io document by its shape name.
LABSCO SUMMARY
The diagram is edited live, in an editor you can watch.
This is not generating a file to open afterwards — shapes appear in the open canvas, and the agent can read the model back to see the result. Stencils being discovered from the sidebar is what lets it place a real GCP or Cisco icon instead of a labelled box.
What it is
A bridge into Draw.io that lets an agent create, read, modify and delete diagram elements. It either hosts the editor itself, reachable in your browser, or connects to Draw.io already running there through a browser extension. Vendor stencils are discovered from the sidebar at runtime, so cloud icons can be placed by their real names.
What you get
- Rectangles, shapes and edges added to a page, edited, restyled, given data, and deleted by id
- The shape catalog browsable — categories, the shapes inside one, and a shape looked up by name — with AWS, GCP, Azure, Cisco19 and CiscoSafe stencils discovered from Draw.io's own sidebar rather than a hand-written list
- The model read back page by page, and the currently selected cell inspected, so an agent can see what it just drew
- Layers created, switched, and cells moved between them, plus parent-child nesting for grouping
- Pages listed, created, copied and renamed, with the current page readable and page-scoped tools taking an explicit target
- Several open documents addressed individually, with operations serialised per document so two agents on two files do not collide
- Diagrams imported and exported as XML, or as SVG and PNG with the XML embedded, and Mermaid diagrams imported straight in
Requirements
Node.js v22 or higher, run over stdio from npm as drawio-mcp-server. With the editor flag it hosts Draw.io itself and you open http://localhost:3000/ — nothing else to install. The alternative is the browser extension, which needs Draw.io already open in your browser; Firefox works but requires TLS mode, and the server can generate self-signed certificates for that itself. Integration with the desktop Electron app is not there yet, blocked upstream.
Setup effort
One command — npx -y drawio-mcp-server --editor
USE CASES
01
Drawing an architecture from a description
Find the right vendor shapes by category, place them on the page, and connect them with edges.
02
Cleaning up a diagram someone else made
Read the model page by page, then edit labels and styles or delete the cells that no longer belong.
03
Separating decoration from substance
Create a layer for background or annotations and move the cells that belong there onto it.
04
Building a multi-page deck of one system
Create the pages up front, then aim each set of edits at a named page — several agents can work in parallel that way.
05
Bringing an existing diagram in
Import the XML, or a Mermaid diagram, then export the result with the XML embedded so it stays editable.
06
Working on the file you are actually looking at
List the connected documents and route the following calls to the tab you mean, rather than the first one open.
28 tools
Counted once with only startup setup. Other versions, modes or optional credentials may expose a different list.
add-edge
This tool creates an edge, sometimes called also a relation, between two vertexes (cells). When source and target are the same shape (self-connector), a loop edge style is automatically applied if no custom style is provided.
add-rectangle
This tool allows you to add a new Rectangle vertex cell on the target page of the current Draw.io document.
copy-page
Creates a copy of an existing page in the target/current Draw.io document, appends the copy to the end of the page list, and returns the copied page metadata. When possible, the previously visible page is restored after the copy is created.
create-layer
Creates a new layer on the target page.
create-page
Appends a new blank page to the current Draw.io document without changing the visible page when the runtime supports background page insertion.
delete-cell-by-id
Deletes a cell from the target page, whether it is a vertex or edge.
edit-cell
Update properties of an existing vertex/shape cell by its ID. Only provided fields are modified; unspecified properties remain unchanged.
edit-edge
Update properties of an existing edge by its ID. Only provided fields are modified; unspecified properties remain unchanged. Supports setting waypoints for edge geometry control.
export-diagram
Export the target page or current diagram as SVG, PNG, or XML. Returns the diagram data as base64 (PNG) or text (SVG/XML). Optionally saves to a file.
get-active-layer
Gets the currently active layer information for the target page. If the target page is not currently visible, Draw.io may switch the visible page first because active-layer state is UI-bound.
get-current-page
Gets the currently visible page metadata, including index, id, name, and whether it is active.
get-selected-cell
This tool retrieves the selected cell on the target page of the current Draw.io document. If the target page is not currently visible, Draw.io may switch the visible page first because selection is UI-bound.
get-shape-by-name
Retrieve a specific shape by its name from all available shapes in the diagram's library. It returns the shape and also the category it belongs.
get-shape-categories
Retrieves available shape categories from the diagram's library. Library is split into multiple categories.
get-shapes-in-category
Retrieve all shapes in the provided category from the diagram's library. A shape primarily contains style based on which you can create new vertex cells.
import-diagram
Import a diagram from XML, SVG with embedded XML, or PNG with embedded XML into the current Draw.io instance. target_page is required for replace and add, and optional for new-page.
import-mermaid
Insert a Mermaid diagram into the target Draw.io page. Conversion runs inside the Draw.io editor via its bundled Mermaid pipeline (EditorUi.parseMermaidDiagram). mode='native' converts supported Mermaid types into native mxGraph cells; unsupported types fall back to an embedded image cell. mode='embed' always emits a single image cell that preserves the Mermaid source for re-editing inside Draw.io. target_page is required for replace and add, and optional for new-page.
list-documents
Lists all connected Draw.io document instances with their stable instance IDs and basic metadata.
list-layers
Lists all available layers on the target page with their IDs and names.
list-paged-model
Retrieves a paginated view of all cells (vertices and edges) on the target page. This tool provides access to the complete model data with essential fields only, sanitized to remove circular dependencies and excessive data.
list-pages
Lists all pages in the current Draw.io document with their index, id, name, and current-page flag.
move-cell-to-layer
Moves a cell from its current layer to a target layer.
rename-page
Renames the selected page without changing the visible page.
set-active-layer
Sets the active layer for creating new elements. All subsequent element creation will happen in this layer. If the target page is not currently visible, Draw.io may switch the visible page first because active-layer state is UI-bound.
set-cell-data
Sets or updates a custom attribute on an existing cell.
set-cell-parent
Sets the parent of a cell, making it a child of the specified parent cell. This allows creating hierarchical relationships where moving the parent also moves its children.
set-cell-shape
Updates the visual style of an existing vertex cell to match a library shape by name.
BEFORE YOU INSTALL
What to know first
Tools you get
28 tools when we connected.
Requires
- npx on PATH
- Node.js
CONTEXT COST
Moderate Standing cost
Rated by the size of the 28 tool definitions that ride along on every turn, not by how many there are
INSTALLATION
Connect your client
Server setup
TERMINAL
npx -y drawio-mcp-server --editorMCP Clients
Claude Desktop
CLAUDE DESKTOP · JSON
{
"mcpServers": {
"drawio": {
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
]
}
}
}Claude Code
CLAUDE CODE · TERMINAL
claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'Zed
ZED · JSON
{
"context_servers": {
"drawio": {
"command": "npx",
"args": [
"-y",
"drawio-mcp-server",
"--editor"
],
"env": {}
}
}
}Codex
CODEX · TOML
[mcp_servers.drawio]
command = "npx"
args = ["-y", "drawio-mcp-server", "--editor"]OpenCode
OPENCODE · JSON
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"drawio": {
"type": "local",
"command": [
"npx",
"-y",
"drawio-mcp-server",
"--editor"
],
"enabled": true
}
}
}
