Draw.io MCP

Overview

Draw.io MCP is the official MCP (Model Context Protocol) server from the draw.io / diagrams.net team (JGraph). It bridges AI coding agents and LLMs with the world's most popular diagramming tool, allowing them to programmatically create, update, and interact with diagrams.

It supports multiple integration modes, including opening diagrams directly in the draw.io editor and rendering interactive diagrams inline inside AI chat interfaces via the MCP Apps protocol.

Key Features

• MCP Tool Server — Opens generated diagrams in the full draw.io editor (browser-based)
• MCP App Server — Renders diagrams as interactive inline iframes directly in compatible AI chats (no tab switching)
• Multi-Format Input — Accepts native draw.io XML, CSV, and Mermaid.js syntax
• Hosted Option — Use the official endpoint at https://mcp.draw.io/mcp with zero installation
• Local CLI — Run via npx @drawio/mcp for full control
• Additional Tools — Claude Code skill for generating native .drawio files with exports to PNG/SVG/PDF (editable)
• Lightbox & Theming — Support for light/dark mode and presentation views

Installation & Quick Start

Hosted (easiest)

Add https://mcp.draw.io/mcp as a remote MCP server in your AI client (Claude Desktop, Cursor, etc.).

Local Tool Server

npx @drawio/mcp

Or install globally:

npm install -g @drawio/mcp
@drawio/mcp

MCP App Server

Use the hosted version or run locally from the repository for inline diagram rendering.

Use Cases

• Architecture & System Diagrams — Ask your agent to generate AWS, Kubernetes, or microservices diagrams from code or descriptions
• Flowcharts & Processes — Automatically create business process, user flow, or algorithm visualizations
• Living Documentation — Keep technical diagrams in sync with code changes via AI agents
• Inline Chat Visuals — View editable diagrams directly inside Claude or other MCP-compatible interfaces
• Mermaid Migration — Convert Mermaid diagrams to rich, editable draw.io files with one prompt

Why Draw.io MCP?

Draw.io is the de-facto standard for technical diagramming. This official MCP server removes the manual step of copying diagrams between AI outputs and the editor, enabling truly agentic diagramming workflows with pixel-perfect, professional results that remain fully editable.

Open source, actively maintained by the draw.io team, and compatible with all major MCP clients. Perfect for developers, architects, and anyone who wants AI to handle visual documentation.

Resources

• Official GitHub: https://github.com/jgraph/drawio-mcp
• npm package: https://www.npmjs.com/package/@drawio/mcp
• draw.io AI documentation: https://www.drawio.com/doc/faq/ai-drawio-generation

Start generating professional diagrams with AI in seconds.