Skip to main content

draw.io MCP server

The official draw.io MCP (Model Context Protocol) serverenables LLMs to create and open diagrams in the draw.io editor using the .drawio format.

There are four ways you can integrate draw.io with AI models.

MCP app server​

Use this method if you want diagram previews to appear inline in your chats with AI services that support MCP Apps protocol, including Claude.ai and VSCode. To edit the diagram in draw.io, click on the Open in draw.io button and it will open in a new tab in the draw.io editor.

To use: Add the draw.io hosted endpoint as a remote MCP server to your AI model, run the server locally or deploy your own instance.

Refer to the documentation for setup instructions.

MCP tool server​

An installable npm package that allows any MCP client (such as Claude Desktop) to generate and open draw.io diagrams directly in a new tab in the draw.io editor in your browser. This method can import CSV data, Mermaid diagrams and fetch diagrams from URLs automatically. You can also configure default editor options for each of these actions.

To use: Install with npx @drawio/mcp

Refer to the documentation for configuration and usage options.

Skill + CLI​

This method allows the Claude Code to generate .drawio files and optionally export them to PNG, SVG or PDF files. This requires draw.io Desktop to be installed.

Refer to the documentation for installation and usage instructions.

Generate an embedded diagram URL​

Provide Claude.ai with project instructions so that it can generate a draw.io diagram embedded in a URL via Python, with no installation necessary. This supports the .drawio format as well as importing Mermaid code and CSV data.

Refer to the documentation for setup and usage instructions.