draw.io for AI assistants

Recommended The MCP App Server. Diagrams appear in the chat.

1. Open draw.io in the Claude connectors directory and connect it.
2. Start a new chat and describe the diagram you want.
3. Click Open in draw.io below the diagram to edit it in the draw.io editor.

You can also add the server as a custom connector in the Claude settings, with this URL:

https://mcp.draw.io/mcp

Recommended The draw.io plugin. It creates .drawio files in your project, and can export them to PNG, SVG or PDF.

1. Add the plugin marketplace and install the plugin in Claude Code:

/plugin marketplace add jgraph/drawio-mcp
/plugin install drawio@drawio

2. Ask Claude Code for a diagram. Add png, svg or pdf to your request to export it, or url to open it in draw.io in your browser.

Exports to PNG, SVG and PDF need draw.io Desktop. To open each diagram in the draw.io editor instead, add the MCP Tool Server:

claude mcp add drawio -- npx -y @drawio/mcp

Recommended The MCP App Server. Diagrams appear in the chat.

1. Open ChatGPT Plugins, select +, then Add custom MCP server.
2. Enter a name, for example draw.io, and under Connection the URL below. The server needs no sign-in, so leave authentication off.
3. Confirm the warning with I understand and want to continue, select Create as a plugin, and install it.
4. In a new conversation, type @, pick draw.io, and ask for a diagram.

https://mcp.draw.io/mcp

If the option to add a custom MCP server is missing, your workspace admin may have turned it off.

Recommended The MCP App Server in VS Code 1.109 or later. Diagrams appear in Copilot Chat.

1. Add the server to .vscode/mcp.json in your workspace, or run MCP: Open User Configuration to add it for every workspace:

{
  "servers": {
    "drawio": {
      "type": "http",
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

2. Click Start above the server entry, and confirm that you trust the folder if VS Code asks.
3. Ask Copilot Chat in Agent mode to create a diagram.

GitHub Copilot CLI: add the hosted server from your terminal. A terminal can't show the diagram, so you get a link that opens it in draw.io.

copilot mcp add --transport http drawio https://mcp.draw.io/mcp

To create .drawio files and exports in your project instead, install the draw.io plugin for Copilot CLI:

copilot plugin marketplace add jgraph/drawio-mcp
copilot plugin install drawio@drawio

Recommended The MCP App Server in Cursor 2.6 or later. Diagrams appear in the Agent chat.

1. Use the one-click install, or add the server to ~/.cursor/mcp.json (all projects) or .cursor/mcp.json (this project):

{
  "mcpServers": {
    "drawio": {
      "url": "https://mcp.draw.io/mcp"
    }
  }
}

2. Enable the server when prompted, or under Cursor Settings > MCP.
3. Ask the Agent to create a diagram.

Add the hosted server as a remote MCP server in any assistant that supports MCP. In assistants that support MCP Apps, diagrams appear in the chat. In the others, the server answers with a link that opens the diagram in draw.io.

https://mcp.draw.io/mcp

Codex CLI: install the draw.io plugin from the same marketplace:

codex plugin marketplace add jgraph/drawio-mcp
codex plugin add drawio@drawio

Any MCP client on your computer: run the MCP Tool Server, which opens each diagram in the draw.io editor in your browser:

npx @drawio/mcp

The README on GitHub has the setup for Claude Desktop, OpenCode and self-hosting.