mcpSource-backedReview first Safety ✓ Privacy ✓

Draw.io MCP Server

MCP server for controlling Draw.io and diagrams.net diagrams from Claude, including document discovery, page management, layers, shapes, edges, Mermaid import, diagram import/export, and a built-in editor mode.

by Lukas Gazo·added 2026-06-06·

Claude CodeClaude Desktop

HarnessClaude CodeClaude Desktop

Install

npx -y drawio-mcp-server --editor

Readiness

TrustReview first
Sourcesource-backed
Safety notesPresent
ReviewedYes

Documentation Source repository Registry JSON · LLM text

Review first — review before installing

Open the source and read safety notes before installing.

Safety notes

Draw.io MCP Server can create, edit, delete, import, export, rename, copy, and reorganize diagram pages, layers, shapes, edges, labels, metadata, and Mermaid-derived content.
Live operations target connected Draw.io browser tabs or the built-in editor; verify the selected document and page before allowing destructive edits.
The server can run local HTTP and WebSocket endpoints, optionally with TLS or auto-generated self-signed certificates; avoid binding it to untrusted network interfaces.
Browser-extension mode links a browser tab to the MCP server, so only connect tabs containing diagrams that the agent is allowed to inspect or modify.
Export tools can write or return XML, SVG, and PNG files with embedded diagram data; review outputs before sharing them externally.
Use trusted package sources, pin versions for repeatable workflows, and review generated diagrams before committing architectural or security documentation.

Privacy notes

Diagrams can include private architecture, network topology, cloud account names, customer systems, credentials embedded in labels, incident details, internal process maps, or product plans.
The MCP client can receive diagram XML, SVG, PNG exports, page names, layer names, selected-cell data, shape metadata, browser tab document metadata, and imported Mermaid content.
Local editor and browser-extension workflows may leave diagrams, exported files, browser state, TLS material, and logs on disk.
Treat exported SVG or PNG files with embedded XML as source files, because they can contain full editable diagram data beyond the visible image.
Clear temporary files, generated certificates, and MCP logs when they are no longer needed for the diagram workflow.

Prerequisites

Node.js 22 or newer for the published npm package.
An MCP client such as Claude Desktop or Claude Code.
A browser for the built-in editor, or the Draw.io MCP browser extension when controlling an existing diagrams.net tab.
Review of which diagrams, browser tabs, pages, and export locations Claude is allowed to modify.
TLS planning when using Firefox, browser-extension WebSocket connections, reverse proxies, or network-accessible transports.

Schema details

Install type: cli
Troubleshooting: No

Source repository stats

Scope: Source repo

Collection metadata

Estimated setup: 10 minutes
Difficulty: intermediate

Tool listing metadata

Disclosure: Community-maintained open source MCP server for Draw.io/diagrams.net, published as the `drawio-mcp-server` npm package under the MIT license.

Full copyable content

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

About this resource

Content

Draw.io MCP Server lets Claude control Draw.io and diagrams.net diagrams through MCP. It can inspect connected documents, work across pages and layers, add and edit shapes or edges, import Mermaid diagrams, export XML/SVG/PNG files, and run a built-in editor without requiring a separate browser extension.

Use it when Claude needs supervised access to create or maintain architecture diagrams, flowcharts, cloud diagrams, process maps, or visual documentation in a Draw.io-compatible format.

Source Review

These sources were reviewed on 2026-06-06. Prefer the live repository, README, npm metadata, license, package manifests, configuration guide, tools reference, server entrypoint, and tool registry for current setup and behavior details.

Features

Run a built-in Draw.io editor from the MCP server.
Connect to Draw.io or diagrams.net browser tabs through the companion extension.
List connected documents and target a specific document in multi-tab workflows.
List, create, copy, rename, and inspect pages.
Inspect selected cells, page models, layers, shape libraries, and vendor stencil categories.
Add rectangles, library shapes, edges, labels, parent-child relationships, layer assignments, and custom cell data.
Edit or delete existing shapes and edges by ID.
Import Draw.io XML, SVG, PNG, or Mermaid diagrams.
Export diagrams as XML, SVG, or PNG, including formats with embedded XML.
Enable HTTP transport, custom ports, host binding, WebSocket overrides, TLS, and auto-generated local certificates when needed.

Installation

Configure your MCP client with the published npm package and the built-in editor mode:

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

Claude Code users can add it with:

claude mcp add-json drawio '{"type":"stdio","command":"npx","args":["-y","drawio-mcp-server","--editor"]}'

After the MCP server starts, open the local editor URL printed by the server or configure the browser extension to connect to the matching WebSocket settings.

Use Cases

Generate an architecture diagram from a written system description.
Convert Mermaid diagrams into editable Draw.io pages.
Add cloud, network, or Cisco stencil shapes to infrastructure diagrams.
Create a multi-page visual design document from separate agent tasks.
Inspect a diagram's pages, layers, selected cells, and exported XML.
Update labels, connectors, layer organization, or metadata in an existing Draw.io file.
Export diagrams for review while preserving embedded editable XML.

Safety and Privacy

Draw.io MCP Server can mutate diagrams directly. Confirm the connected document, target page, and cell IDs before running edits, especially when multiple tabs or agents are active.

Architecture diagrams often reveal sensitive implementation details. Keep diagram XML, embedded SVG/PNG exports, browser-extension state, generated TLS material, and MCP logs within approved storage, and review all generated visuals before publishing or committing them.

#drawio#diagrams#architecture#mermaid#visualization

Source citations

Signals

Loading live community signals…

More like this, weekly

A short, calm digest of reviewed Claude resources. Unsubscribe any time.