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.