[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74348":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":14,"forks30d":14,"starsTrendScore":18,"compositeScore":19,"rankGlobal":8,"rankLanguage":8,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":8,"pushedAt":8,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":14,"starSnapshotCount":14,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},74348,"drawio-mcp","jgraph\u002Fdrawio-mcp","jgraph",null,"JavaScript",4345,262,18,1,0,94,234,756,282,29.26,"Apache License 2.0",false,"main",[],"2026-06-12 02:03:25","# Draw.io MCP Server\n\nThe official [draw.io](https:\u002F\u002Fwww.draw.io) MCP (Model Context Protocol) server that enables LLMs to create and open diagrams in the draw.io editor.\n\n## Four Ways to Create Diagrams\n\nThis repository offers four approaches for integrating draw.io with AI assistants. Pick the one that fits your setup:\n\n| | [MCP App Server](#mcp-app-server) | [MCP Tool Server](#mcp-tool-server) | [Skill + CLI](#skill--cli) | [Project Instructions](#alternative-project-instructions-no-mcp-required) |\n|---|---|---|---|---|\n| **How it works** | Renders diagrams inline in chat | Opens diagrams in your browser | Generates `.drawio` files, optional PNG\u002FSVG\u002FPDF export | Claude generates draw.io URLs via Python |\n| **Diagram output** | Interactive viewer embedded in conversation | draw.io editor in a new tab | `.drawio` or `.drawio.png` \u002F `.svg` \u002F `.pdf` | Clickable link to draw.io |\n| **Requires installation** | No (hosted at `mcp.draw.io`) | Yes (npm package) | Copy skill file + draw.io Desktop | No — just paste instructions |\n| **Supports XML, CSV, Mermaid** | XML only | ✅ All three | XML only (native format) | ✅ All three |\n| **Editable in draw.io** | Via \"Open in draw.io\" button | ✅ Directly | ✅ Directly | Via link |\n| **Works with** | Claude.ai, VS Code, any MCP Apps host | Claude Desktop, any MCP client | Claude Code | Claude.ai (with Projects) |\n| **Best for** | Inline previews in chat | Local desktop workflows | Local development workflows | Quick setup, no install needed |\n\n---\n\n## MCP App Server\n\nThe MCP App server renders draw.io diagrams **inline** in AI chat interfaces using the [MCP Apps](https:\u002F\u002Fmodelcontextprotocol.io\u002Fdocs\u002Fextensions\u002Fapps) protocol. Instead of opening a browser tab, diagrams appear directly in the conversation as interactive iframes.\n\nThe official hosted endpoint is available at:\n\n```\nhttps:\u002F\u002Fmcp.draw.io\u002Fmcp\n```\n\nAdd this URL as a remote MCP server in Claude.ai or any MCP Apps-compatible host — no installation required.\n\nYou can also run the server locally via Node.js or deploy your own instance to Cloudflare Workers.\n\n**Tools:**\n- **`create_diagram`** — Renders draw.io XML as an interactive diagram inline in chat\n- **`search_shapes`** — Searches 10,000+ shapes across all draw.io libraries (AWS, Azure, GCP, P&ID, electrical, Cisco, Kubernetes, UML, BPMN, etc.) by keyword. Returns exact style strings that can be used directly in XML. Use this to find the correct shape before calling `create_diagram`.\n\n**[Full documentation →](mcp-app-server\u002FREADME.md)**\n\n> **Note:** Inline diagram rendering requires an MCP host that supports the MCP Apps extension. In hosts without MCP Apps support, the tool still works but returns the XML as text.\n\n---\n\n## MCP Tool Server\n\nThe original MCP server that opens diagrams directly in the draw.io editor. Supports XML, CSV, and Mermaid.js formats with lightbox and dark mode options. Published as [`@drawio\u002Fmcp`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@drawio\u002Fmcp) on npm.\n\nQuick start: `npx @drawio\u002Fmcp`\n\n**[Full documentation →](mcp-tool-server\u002FREADME.md)**\n\n---\n\n## Skill + CLI\n\nA Claude Code skill that generates native `.drawio` files, with optional export to PNG, SVG, or PDF (with embedded XML so the exported file remains editable in draw.io). No MCP setup required — just copy a skill file.\n\nBy default, the skill writes a `.drawio` file and opens it in draw.io. Mention a format in your request (`\u002Fdrawio png ...`) to export using the draw.io desktop CLI with `--embed-diagram`.\n\n**[Full documentation →](skill-cli\u002FREADME.md)**\n\n---\n\n## Alternative: Project Instructions (No MCP Required)\n\nAn alternative approach that works **without installing anything**. Add instructions to a Claude Project that teach Claude to generate draw.io URLs using Python code execution. No MCP server, no desktop app — just paste and go.\n\n**[Full documentation →](project-instructions\u002FREADME.md)**\n\n---\n\n## XML Reference (Single Source of Truth)\n\nThe draw.io XML generation reference — covering edge routing, containers, layers, tags, metadata, dark mode, style properties, and XML well-formedness — lives in a single canonical file:\n\n**[`shared\u002Fxml-reference.md`](shared\u002Fxml-reference.md)**\n\nAll four approaches above use this file as their single source of truth for LLM prompts:\n\n| Approach | How it accesses the reference |\n|----------|-------------------------------|\n| MCP App Server | Reads the file at startup \u002F build time and includes it in the tool description |\n| MCP Tool Server | Reads the file at startup (from repo or bundled copy via `prepack`) |\n| Skill + CLI | References the [GitHub raw URL](https:\u002F\u002Fraw.githubusercontent.com\u002Fjgraph\u002Fdrawio-mcp\u002Fmain\u002Fshared\u002Fxml-reference.md) |\n| Project Instructions | Users copy its contents into their Claude Project |\n\nWhen updating XML generation guidance, edit only `shared\u002Fxml-reference.md` — changes propagate to all consumers automatically.\n\n---\n\n## Shape Search Index\n\nThe `search_shapes` tool is powered by a pre-built index of all draw.io shapes. The index is generated from the draw.io client source code (`app.min.js`) by running all sidebar palette initializations in Node.js via jsdom and capturing the shape data.\n\n```bash\n# Generate the shape search index (requires ..\u002Fdrawio-dev checkout)\ncd shape-search\nnpm install\nDRAWIO_DEV_PATH=..\u002F..\u002Fdrawio-dev node generate-index.js\n\n# Rebuild the MCP App Server worker to embed the updated index\ncd ..\u002Fmcp-app-server\nnpm run build:worker\n```\n\n**When to regenerate:** Re-run `generate-index.js` after updating `drawio-dev` (new shapes, renamed stencils, updated style strings). The script loads `app.min.js` and all sidebar palettes, so it captures any changes to the shape libraries automatically.\n\nThe generated `search-index.json` is committed to the repository so that the MCP App Server can be built and deployed without a local `drawio-dev` checkout.\n\n---\n\n## Development\n\n```bash\n# MCP App Server\ncd mcp-app-server\nnpm install\nnpm start\n\n# MCP Tool Server\ncd mcp-tool-server\nnpm install\nnpm start\n```\n\n## Related Resources\n\n- [draw.io](https:\u002F\u002Fwww.draw.io) - Free online diagram editor\n- [draw.io Desktop](https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-desktop) - Desktop application\n- [@drawio\u002Fmcp on npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@drawio\u002Fmcp) - This package on npm\n- [drawio-mcp on GitHub](https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp) - Source code repository\n- [Mermaid.js Documentation](https:\u002F\u002Fmermaid.js.org\u002Fintro\u002F)\n- [MCP Specification](https:\u002F\u002Fmodelcontextprotocol.io\u002F)\n- [MCP Apps Extension](https:\u002F\u002Fmodelcontextprotocol.io\u002Fdocs\u002Fextensions\u002Fapps)\n","jgraph\u002Fdrawio-mcp 是一个官方的 draw.io MCP（Model Context Protocol）服务器，使大语言模型能够在 draw.io 编辑器中创建和打开图表。该项目通过四种方式将 draw.io 与 AI 助手集成，包括 MCP 应用服务器、MCP 工具服务器、技能加命令行工具以及项目指令。核心功能包括在聊天界面内渲染交互式图表、支持 XML、CSV 和 Mermaid.js 格式的图表生成，并且可以直接在浏览器或本地编辑这些图表。适用于需要在聊天界面中预览图表、本地桌面工作流、本地开发环境或者快速设置而无需安装的场景。项目采用 JavaScript 编写，并遵循 Apache License 2.0 开源协议。",2,"2026-06-11 03:49:59","high_star"]