drawio-mcp-server

# Draw.io MCP server Let's do some Vibe Diagramming with the most wide-spread diagramming tool called Draw.io (Diagrams.net). [](https://discord.gg/dM4PWdf42q) [](https://github.com/lgazo/drawio-mcp-server/actions/workflows/ci.yml) ## Introduction The Draw.io MCP server is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io) implementation that brings powerful diagramming capabilities to AI agentic systems. This integration enables: - **Seamless Draw.io Integration**: Connect your MCP-powered applications with Draw.io's rich diagramming functionality - **Programmatic Diagram Control**: Create, modify, and manage diagram content through MCP commands - **Intelligent Diagram Analysis**: Retrieve detailed information about diagrams and their components for processing by AI agents - **Agentic System Development**: Build sophisticated AI workflows that incorporate visual modeling and diagram automation As an MCP-compliant tool, it follows the standard protocol for tool integration, making it compatible with any MCP client. This implementation is particularly valuable for creating AI systems that need to: - Generate architectural diagrams - Visualize complex relationships - Annotate technical documentation - Create flowcharts and process maps programmatically The tool supports bidirectional communication, allowing both control of Draw.io instances and extraction of diagram information for further processing by AI agents in your MCP ecosystem. ## Requirements To use the Draw.io MCP server, you'll need: ### Core Components - **Node.js** (v20 or higher) - Runtime environment for the MCP server - **Draw.io MCP Browser Extension** - Enables communication between Draw.io and the MCP server ### MCP Ecosystem - **MCP Client** (e.g., [MCP Inspector](https://modelcontextprotocol.io/docs/tools/inspector)) - For testing and debugging the integration - **LLM with Tools Support** - Any language model capable of handling MCP tool calls (e.g., GPT-4, Claude 3, etc.) ### Optional for Development - **pnpm** - Preferred package manager - **Chrome DevTools** - For debugging when using `--inspect` flag Note: The Draw.io desktop app or web version must be accessible to the system where the MCP server runs. ## Configuration ### WebSocket Port The server listens on port 3333 by default for WebSocket connections from the browser extension. You can customize this port using the `--extension-port` or `-p` flag. **Default behavior** (port 3333): ```json { "mcpServers": { "drawio": { "command": "npx", "args": ["-y", "drawio-mcp-server"] } } } ``` **Custom port** (e.g., port 8080): ```json { "mcpServers": { "drawio": { "command": "npx", "args": ["-y", "drawio-mcp-server", "--extension-port", "8080"] } } } ``` **Note**: When using a custom port, ensure the browser extension is configured to connect to the same port. ## Installation ### Connecting with Claude Desktop 1. Install [Claude Desktop](https://claude.ai/download) 2. Open or create the configuration file: - macOS: `~/Library/Application Support/Claude/claude_desktop_config.json` - Windows: `%APPDATA%\Claude\claude_desktop_config.json` 3. Update it to include this server: <details> <summary>Using <code>npm</code></summary> ```json { "mcpServers":{ "drawio":{ "command":"npx", "args":[ "-y", "drawio-mcp-server" ] } } } ``` </details> <details> <summary>Using <code>pnpm</code></summary> ```json { "mcpServers":{ "drawio":{ "command":"pnpm", "args":[ "dlx", "drawio-mcp-server" ] } } } ``` </details> To use a custom extension port (e.g., 8080), add `"--extension-port", "8080"` to the args array: ```json { "mcpServers": { "drawio": { "command": "npx", "args": ["-y", "drawio-mcp-server", "--extension-port", "8080"] } } } ``` 4. Restart Claude Desktop ### Connecting with oterm This is an alternative MCP client in case you like terminal and you plan to connect to your own Ollama instance. The configuration is usually in: ~/.local/share/oterm/config.json <details> <summary>Using <code>npm</code></summary> ```json { "mcpServers": { "drawio": { "command": "npx", "args": [ "-y", "drawio-mcp-server" ] } } } ``` </details> <details> <summary>Using <code>pnpm</code></summary> ```json { "mcpServers": { "drawio": { "command": "pnpm", "args": [ "dlx", "drawio-mcp-server" ] } } } ``` </details> To use a custom extension port (e.g., 8080), add `"--extension-port", "8080"` to the args array: ```json { "mcpServers": { "drawio": { "command": "npx", "args":