{
  "markdown": "# Next AI Draw.io MCP Server\n\nMCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with **real-time browser preview**.\n\n**Self-contained** - includes an embedded HTTP server, no external dependencies required.\n\n## Quick Start\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n## Installation\n\n### Claude Desktop\n\nAdd to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### VS Code\n\nAdd to your VS Code settings (`.vscode/mcp.json` in workspace or user settings):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Cursor\n\nAdd to Cursor MCP config (`~/.cursor/mcp.json`):\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Cline (VS Code Extension)\n\n1. Click the **MCP Servers** icon in Cline's top menu bar\n2. Select the **Configure** tab\n3. Click **Configure MCP Servers** to edit `cline_mcp_settings.json`\n4. Add the drawio server:\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"]\n    }\n  }\n}\n```\n\n### Claude Code CLI\n\n```bash\nclaude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest\n```\n\n### Other MCP Clients\n\nUse the standard MCP configuration with:\n- **Command**: `npx`\n- **Args**: `[\"@next-ai-drawio/mcp-server@latest\"]`\n\n## Usage\n\n1. Restart your MCP client after updating config\n2. Ask the AI to create a diagram:\n   > \"Create a flowchart showing user authentication with login, MFA, and session management\"\n3. The diagram appears in your browser in real-time!\n\n## Features\n\n- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them\n- **Version History**: Restore previous diagram versions with visual thumbnails - click the clock button (bottom-right) to browse and restore earlier states\n- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.\n- **Edit Support**: Modify existing diagrams with natural language instructions\n- **Export**: Save diagrams as `.drawio` files\n- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from `embed.diagrams.net` by default, configurable via `DRAWIO_BASE_URL`)\n\n## Available Tools\n\n| Tool | Description |\n|------|-------------|\n| `start_session` | Opens browser with real-time diagram preview |\n| `create_new_diagram` | Create a new diagram from XML (requires `xml` argument) |\n| `edit_diagram` | Edit diagram by ID-based operations (update/add/delete cells) |\n| `get_diagram` | Get the current diagram XML |\n| `export_diagram` | Save diagram to a `.drawio` file |\n\n## How It Works\n\n```\n┌─────────────────┐     stdio      ┌─────────────────┐\n│  Claude Desktop │ <───────────> │   MCP Server    │\n│    (AI Agent)   │               │  (this package) │\n└─────────────────┘               └────────┬────────┘\n                                          │\n                                 ┌────────▼────────┐\n                                 │ Embedded HTTP   │\n                                 │ Server (:6002)  │\n                                 └────────┬────────┘\n                                          │\n                                 ┌────────▼────────┐\n                                 │  User's Browser │\n                                 │ (draw.io embed) │\n                                 └─────────────────┘\n```\n\n1. **MCP Server** receives tool calls from Claude via stdio\n2. **Embedded HTTP Server** serves the draw.io UI and handles state\n3. **Browser** shows real-time diagram updates via polling\n\n## Configuration\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `PORT` | `6002` | Port for the embedded HTTP server |\n| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for the draw.io embed. Set this to use a self-hosted draw.io instance for private deployments. |\n\n### Private Deployment (Self-hosted draw.io)\n\nFor security-sensitive environments that require private deployment of draw.io:\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"],\n      \"env\": { \n        \"DRAWIO_BASE_URL\": \"https://drawio.your-company.com\"\n      }\n    }\n  }\n}\n```\n\nYou can deploy your own draw.io instance using the official Docker image:\n\n```bash\ndocker run -d -p 8080:8080 jgraph/drawio\n```\n\nThen set `DRAWIO_BASE_URL=http://localhost:8080` (or your server's URL).\n\n## Troubleshooting\n\n### Port already in use\n\nIf port 6002 is in use, the server will automatically try the next available port (up to 6020).\n\nOr set a custom port:\n```json\n{\n  \"mcpServers\": {\n    \"drawio\": {\n      \"command\": \"npx\",\n      \"args\": [\"@next-ai-drawio/mcp-server@latest\"],\n      \"env\": { \"PORT\": \"6003\" }\n    }\n  }\n}\n```\n\n### \"No active session\"\n\nCall `start_session` first to open the browser window.\n\n### Browser not updating\n\nCheck that the browser URL has the `?mcp=` query parameter. The MCP session ID connects the browser to the server.\n\n## License\n\nApache-2.0\n",
  "bytes": 5421,
  "sha": "cf605e3e724ae9ae7aec49a150bf537931cb5e58f06eadb79967d436dfb17b83",
  "repo_slug": "hj1003862396/draw-flow-mcp-server",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_hj1003862396_draw_flow_mcp_ser_e08fb0e3/readme"
}