Vibeleaderboard
← Back to Tools
Index / tool

Draw.io MCP Server

github.com/jgraph/drawio-mcp
Visit github.com
Category
Developer Tools
Rank
No. 294Tools index

Previous survey · No. 316 ·

Pricing
Open Source
Type
TOOL
Use case
Design & Media
Interfaces
MCP
Builder
jgraph
GitHub
5.5k stars
Date

About

Official MCP server that enables AI assistants to create and edit diagrams using draw.io. Offers multiple integration approaches from inline chat rendering to local file generation with support for XML, CSV, and Mermaid formats.

What it does

Draw.io MCP Server gives assistants several routes from a diagram request to an editable draw.io result. Users can view diagrams inside compatible chats, open them in a browser editor, save native local documents through assistant plugins, or generate browser links without MCP setup.

Why it's ranked here

The project stands out for covering distinct deployment and privacy needs rather than forcing one integration model. It offers hosted, self-hosted, desktop, and instruction-only paths, plus shape discovery and optional layout processing. The main qualification is that capabilities differ materially between those paths, so selection requires care.

What's good

Its data-flow documentation is unusually concrete. The tool server places diagram content in a browser fragment, local plugins retain files on the machine, and self-hosting keeps app-server processing under your control. Shape search prefers strong local matches, tolerates phonetic queries, and can supplement weak results with an icon service.

Tradeoffs

Inline viewing depends on MCP Apps support; other hosts receive diagram XML as text. The hosted app server receives diagram data, while default rendering still fetches application assets from draw.io domains. Local image and document export requires draw.io Desktop. Format support and layout options also vary between integration approaches.

How to use it well

Choose it when an assistant should produce diagrams that remain editable in draw.io. Use the app server for chat previews, the tool server for browser editing, or plugins for local development artifacts. Self-host where diagram residency matters. It does not isolate content from a hosted language model or provide cloud rasterization.

Technical notes+

mcp-app-server/src/index.js exposes stdio and Streamable HTTP transports, prebuilds iframe HTML, loads shared XML and Mermaid guidance, and supports local viewer overrides. mcp-app-server/src/worker.js provides a Cloudflare Workers entry using four Durable Object shards for MCP sessions. mcp-tool-server/src/index.js implements the npm stdio server, browser launching, compressed fragment URLs, shape-index loading, and platform-specific opening behavior. shared/shape-search.js builds exact and Soundex indexes, tries AND matching before scored OR fallback, and rewrites relative image references. shared/icon-search.js adds failure-tolerant icon-service results and validates returned HTTPS URLs. shape-search/generate-index.js extracts and deduplicates palette entries from the live draw.io client through jsdom. mcp-tool-server/src/pages.js limits inflated page data to 64 MiB and performs atomic page updates.

Observed

Primary language
JavaScript using ES modules
Packaging
Published on npm as @drawio/mcp and runnable with npx
Interfaces
MCP over stdio and Streamable HTTP, plus assistant plugins and project instructions
Deployment surfaces
Hosted endpoint, local Node.js server, and Cloudflare Workers deployment
Diagram formats
The MCP tool server accepts draw.io XML, CSV, and Mermaid
Platform handling
The browser launcher contains explicit Windows, macOS, and Linux paths
Local export surface
Assistant plugins can produce native draw.io files and use draw.io Desktop for PNG, SVG, or PDF export

Read from README.md, shared/icon-search.js, shared/shape-search.js, shape-search/generate-index.js, mcp-app-server/src/index.js, mcp-tool-server/src/index.js, mcp-app-server/src/shared.js, mcp-app-server/src/worker.js, mcp-tool-server/src/pages.js.

What it can do

  • Create diagrams from text descriptions

    Natural language description of diagram → Draw.io diagram

  • Edit existing diagrams

    Existing draw.io diagram and modification instructions → Modified draw.io diagram

  • Render diagrams inline in chat

    Diagram data → Visual diagram display in chat interface

  • Generate local diagram files

    Diagram specifications → Local draw.io file

  • Convert XML to diagrams

    XML data → Draw.io diagram

  • Convert CSV to diagrams

    CSV data → Draw.io diagram

  • Convert Mermaid syntax to diagrams

    Mermaid format text → Draw.io diagram

Tags

mcpdiagramsai-integrationvisualizationdrawioclaudemodel-context-protocol

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.