{
  "markdown": "# 🎨 Draw.io MCP Server\n\n[![CI](https://github.com/yohasacura/drawio-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/yohasacura/drawio-mcp/actions/workflows/ci.yml)\n[![PyPI](https://img.shields.io/pypi/v/drawio-mcp)](https://pypi.org/project/drawio-mcp/)\n[![Python](https://img.shields.io/pypi/pyversions/drawio-mcp)](https://pypi.org/project/drawio-mcp/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n> Let your AI assistant create beautiful draw.io diagrams — just describe what you want.\n\nAn [MCP](https://modelcontextprotocol.io/) server that generates [draw.io](https://www.drawio.com/) / [diagrams.net](https://app.diagrams.net/) XML files programmatically. Works with **GitHub Copilot (agent mode)**, **Claude Desktop**, **Cursor**, and any MCP-compatible client.\n\n<!-- mcp-name: io.github.yohasacura/drawio-mcp -->\n\n---\n\n## ✨ What Can It Do?\n\n| Capability | Details |\n|---|---|\n| 🏗️ **Diagram types** | Flowcharts, UML, ER, C4, BPMN, mindmaps, architecture, network, Kubernetes, and more |\n| 🎨 **Styling** | 310+ shape presets, 44 edge styles, 21 color themes |\n| 📐 **Auto-layout** | Sugiyama DAG, tree, horizontal, vertical, grid, flowchart engines |\n| 🔀 **Smart routing** | Obstacle-aware orthogonal edge routing with automatic port distribution |\n| ✏️ **Full editing** | Add, move, resize, delete, restyle any element after creation |\n| 📄 **Multi-page** | Multiple pages and layers for complex diagrams |\n| 📥 **Import/Export** | Load existing `.drawio` files, modify, and save back |\n| 🧹 **One-click cleanup** | Polish command that auto-fixes layout, overlaps, edges, and labels |\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- **Python 3.11+**\n- [**uv**](https://docs.astral.sh/uv/) (recommended) or pip\n\n### Install from PyPI\n\n```bash\npip install drawio-mcp\n```\n\nOr with uv:\n\n```bash\nuvx drawio-mcp\n```\n\n### Install from source\n\n```bash\ngit clone https://github.com/yohasacura/drawio-mcp.git\ncd drawio-mcp\nuv sync\nuv run drawio-mcp\n```\n\n---\n\n## 🔌 Setup with Your AI Client\n\n### VS Code (GitHub Copilot)\n\nAdd to your VS Code settings or `.vscode/mcp.json`:\n\n```json\n{\n  \"servers\": {\n    \"drawio-mcp\": {\n      \"command\": \"uvx\",\n      \"args\": [\"drawio-mcp\"]\n    }\n  }\n}\n```\n\nThen use **Copilot in Agent mode** and ask it to create diagrams.\n\n### Claude Desktop\n\nAdd to your `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio-mcp\": {\n      \"command\": \"uvx\",\n      \"args\": [\"drawio-mcp\"]\n    }\n  }\n}\n```\n\n### Cursor\n\nAdd to your Cursor MCP settings:\n\n```json\n{\n  \"mcpServers\": {\n    \"drawio-mcp\": {\n      \"command\": \"uvx\",\n      \"args\": [\"drawio-mcp\"]\n    }\n  }\n}\n```\n\n---\n\n## 💬 Example Prompts\n\nOnce connected, try these in your AI chat:\n\n| Prompt | What you get |\n|---|---|\n| *\"Create a flowchart for a user login process\"* | Login flow with decision nodes and error paths |\n| *\"Create a C4 context diagram for an e-commerce system\"* | System context with actors and external systems |\n| *\"Make a UML class diagram with User, Order, and Product\"* | Class diagram with relationships |\n| *\"Create an ER diagram for a blog database\"* | Entity-relationship diagram with tables |\n| *\"Build an org chart for a startup\"* | Tree layout with roles and hierarchy |\n| *\"Draw an AWS architecture with API Gateway, Lambda, DynamoDB\"* | Cloud architecture diagram |\n| *\"Create a Kubernetes deployment diagram\"* | K8s diagram with pods, services, ingress |\n| *\"Make a network topology with servers and firewalls\"* | Network diagram with device icons |\n\n> 💡 **Tip:** Always end with *\"...and save it as `filename.drawio`\"* to get a file you can open in draw.io.\n\n---\n\n## 🛠️ Tool Reference\n\nThe server exposes **5 tools**, each with an `action` parameter:\n\n### `diagram` — Lifecycle\n\n`create` · `save` · `load` · `import_xml` · `list` · `get_xml` · `add_page` · `add_layer`\n\n### `draw` — Content\n\n`add_vertices` · `add_edges` · `add_group` · `update_cells` · `delete_cells` · `add_title` · `add_legend` · `build_dag` · `build_full`\n\n### `style` — Appearance\n\n`build` · `apply_theme` · `list_vertex_presets` · `list_edge_presets` · `list_themes`\n\n### `layout` — Positioning\n\n`sugiyama` · `tree` · `horizontal` · `vertical` · `grid` · `flowchart` · `smart_connect` · `align` · `distribute` · `polish` · `relayout` · `compact` · `reroute_edges` · `resolve_overlaps` · `fix_labels` · `optimize_connections` · `resize_container`\n\n### `inspect` — Read-only\n\n`cells` · `overlaps` · `ports` · `info`\n\n---\n\n## 🎨 Style Reference\n\n<details>\n<summary><b>310+ Vertex Presets</b> (click to expand)</summary>\n\n**Basic shapes:** `RECTANGLE` `ROUNDED_RECTANGLE` `ELLIPSE` `CIRCLE` `DIAMOND` `TRIANGLE` `HEXAGON` `CYLINDER` `CLOUD` `PARALLELOGRAM` `ACTOR` `PROCESS` `DOCUMENT` `DATA_STORE` `NOTE` `CARD` `CALLOUT` `TEXT` `CUBE` `STAR` `FOLDER` and more\n\n**Themed boxes:** `BLUE_BOX` `GREEN_BOX` `ORANGE_BOX` `RED_BOX` `YELLOW_BOX` `PURPLE_BOX` `GRAY_BOX` `DARK_BOX` `TEAL_BOX` `WHITE_BOX`\n\n**Flowchart:** `FLOWCHART_PROCESS` `FLOWCHART_DECISION` `FLOWCHART_TERMINATOR` `FLOWCHART_DATA` `FLOWCHART_DOCUMENT` `FLOWCHART_DATABASE` `FLOWCHART_START` `FLOWCHART_END` and 25+ more\n\n**UML:** `UML_CLASS` `UML_INTERFACE` `UML_ACTOR` `UML_COMPONENT` `UML_PACKAGE` `UML_NODE` `UML_LIFELINE` `UML_FRAME`\n\n**C4:** `C4_SYSTEM` `C4_CONTAINER` `C4_COMPONENT` `C4_PERSON` `C4_EXTERNAL` `C4_DATABASE` `C4_WEB_BROWSER`\n\n**ER:** `ER_ENTITY` `ER_WEAK_ENTITY` `ER_ATTRIBUTE` `ER_KEY_ATTRIBUTE` `ER_RELATIONSHIP` and more\n\n**BPMN:** `BPMN_TASK` `BPMN_START_EVENT` `BPMN_END_EVENT` `BPMN_GATEWAY` `BPMN_POOL` `BPMN_LANE` and more\n\n**Architecture:** `ARCH_SERVICE` `ARCH_DATABASE` `ARCH_QUEUE` `ARCH_CLOUD` `ARCH_API` `ARCH_GATEWAY` `ARCH_CONTAINER` `ARCH_FIREWALL` `ARCH_SERVER` `ARCH_LOAD_BALANCER` and 20+ more\n\n**Network:** `NETWORK_SERVER` `NETWORK_ROUTER` `NETWORK_SWITCH` `NETWORK_FIREWALL` `NETWORK_CLOUD` `NETWORK_STORAGE` and 40+ more\n\n**Cloud/K8s:** `AWS_CLOUD` `AWS_LAMBDA` `AWS_S3` `AWS_EC2` `AWS_RDS` `AWS_SQS` `K8S_POD` `K8S_SERVICE` `K8S_DEPLOYMENT` `K8S_INGRESS` and more\n\n**Containers:** `SWIMLANE` `GROUP` `GROUP_TRANSPARENT` `GROUP_DASHED`\n\n**Plus:** State machine, Sequence diagram, Mindmap, DFD, SysML, ArchiMate, Cisco, Mockup/Wireframe, Infographic, and more\n\n</details>\n\n<details>\n<summary><b>44 Edge Presets</b> (click to expand)</summary>\n\n**General:** `DEFAULT` `ORTHOGONAL` `STRAIGHT` `CURVED` `ENTITY_RELATION` `DASHED` `DOTTED` `BIDIRECTIONAL` `NO_ARROW`\n\n**Styled:** `ROUNDED` `ROUNDED_DASHED` `THICK` `THICK_ROUNDED`\n\n**Colored:** `COLORED_BLUE` `COLORED_GREEN` `COLORED_RED` `COLORED_ORANGE` `COLORED_PURPLE` `COLORED_YELLOW` `COLORED_GRAY`\n\n**UML:** `UML_ASSOCIATION` `UML_INHERITANCE` `UML_IMPLEMENTATION` `UML_DEPENDENCY` `UML_AGGREGATION` `UML_COMPOSITION`\n\n**ER:** `ER_ONE_TO_ONE` `ER_ONE_TO_MANY` `ER_MANY_TO_MANY` `ER_ZERO_TO_ONE` `ER_ZERO_TO_MANY`\n\n**Flow:** `DATA_FLOW` `CONTROL_FLOW` `ASYNC` `SYNC` `BPMN_FLOW` `BPMN_MESSAGE_FLOW`\n\n</details>\n\n<details>\n<summary><b>21 Color Themes</b> (click to expand)</summary>\n\n`BLUE` `GREEN` `YELLOW` `ORANGE` `RED` `PURPLE` `GRAY` `PINK` `TURQUOISE` `TEAL` `DARK_BLUE` `DARK_GREEN` `DARK_RED` `DARK_ORANGE` `DARK_PURPLE` `DARK` `WHITE` `C4_BLUE` `C4_LIGHT_BLUE` `C4_SKY` `C4_GRAY`\n\n</details>\n\n<details>\n<summary><b>Connection Ports</b> (click to expand)</summary>\n\n`TOP` `BOTTOM` `LEFT` `RIGHT` `TOP_LEFT` `TOP_RIGHT` `BOTTOM_LEFT` `BOTTOM_RIGHT` `TOP_LEFT_THIRD` `TOP_RIGHT_THIRD` `BOTTOM_LEFT_THIRD` `BOTTOM_RIGHT_THIRD` `LEFT_TOP_THIRD` `LEFT_BOTTOM_THIRD` `RIGHT_TOP_THIRD` `RIGHT_BOTTOM_THIRD`\n\n</details>\n\n---\n\n## 🧑‍💻 Development\n\n```bash\ngit clone https://github.com/yohasacura/drawio-mcp.git\ncd drawio-mcp\nuv sync\n\n# Run tests\nuv run pytest tests/ -v\n\n# Run the server locally\nuv run drawio-mcp\n```\n\n### Project Structure\n\n```\nsrc/drawio_mcp/\n├── server.py           # MCP server — 5 tools with 40+ actions\n├── models.py           # Core XML model (DrawioFile, Diagram, MxCell)\n├── styles.py           # Style builder, presets, and themes\n├── layout.py           # Layout helpers (tree, grid, port distribution)\n├── layout_engine.py    # Advanced layout (Sugiyama, edge routing, polish)\n└── validation.py       # Input validation\n```\n\n---\n\n## 📝 Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines on bug reports, feature requests, and pull requests.\n\n## 📄 License\n\n[MIT](LICENSE) © [yohasacura](https://github.com/yohasacura)\n",
  "bytes": 8395,
  "sha": "78fea3c192239f495a4bae834089b6d8acbf7bfb17429aae07796766bd0b0dcb",
  "repo_slug": "yohasacura/drawio-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_yohasacura_drawio_mcp_1f43a822/readme"
}