[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"similar-jgraph--drawio-mcp":3,"tool-jgraph--drawio-mcp":64},[4,17,25,39,48,56],{"id":5,"name":6,"github_repo":7,"description_zh":8,"stars":9,"difficulty_score":10,"last_commit_at":11,"category_tags":12,"status":16},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",140436,2,"2026-04-05T23:32:43",[13,14,15],"开发框架","Agent","语言模型","ready",{"id":18,"name":19,"github_repo":20,"description_zh":21,"stars":22,"difficulty_score":10,"last_commit_at":23,"category_tags":24,"status":16},3704,"NextChat","ChatGPTNextWeb\u002FNextChat","NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。\n\n这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。\n\nNextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。",87618,"2026-04-05T07:20:52",[13,15],{"id":26,"name":27,"github_repo":28,"description_zh":29,"stars":30,"difficulty_score":10,"last_commit_at":31,"category_tags":32,"status":16},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[33,34,35,36,14,37,15,13,38],"图像","数据工具","视频","插件","其他","音频",{"id":40,"name":41,"github_repo":42,"description_zh":43,"stars":44,"difficulty_score":45,"last_commit_at":46,"category_tags":47,"status":16},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,3,"2026-04-04T04:44:48",[14,33,13,15,37],{"id":49,"name":50,"github_repo":51,"description_zh":52,"stars":53,"difficulty_score":45,"last_commit_at":54,"category_tags":55,"status":16},519,"PaddleOCR","PaddlePaddle\u002FPaddleOCR","PaddleOCR 是一款基于百度飞桨框架开发的高性能开源光学字符识别工具包。它的核心能力是将图片、PDF 等文档中的文字提取出来，转换成计算机可读取的结构化数据，让机器真正“看懂”图文内容。\n\n面对海量纸质或电子文档，PaddleOCR 解决了人工录入效率低、数字化成本高的问题。尤其在人工智能领域，它扮演着连接图像与大型语言模型（LLM）的桥梁角色，能将视觉信息直接转化为文本输入，助力智能问答、文档分析等应用场景落地。\n\nPaddleOCR 适合开发者、算法研究人员以及有文档自动化需求的普通用户。其技术优势十分明显：不仅支持全球 100 多种语言的识别，还能在 Windows、Linux、macOS 等多个系统上运行，并灵活适配 CPU、GPU、NPU 等各类硬件。作为一个轻量级且社区活跃的开源项目，PaddleOCR 既能满足快速集成的需求，也能支撑前沿的视觉语言研究，是处理文字识别任务的理想选择。",74939,"2026-04-05T23:16:38",[15,33,13,37],{"id":57,"name":58,"github_repo":59,"description_zh":60,"stars":61,"difficulty_score":45,"last_commit_at":62,"category_tags":63,"status":16},2181,"OpenHands","OpenHands\u002FOpenHands","OpenHands 是一个专注于 AI 驱动开发的开源平台，旨在让智能体（Agent）像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点，通过自动化流程显著提升开发速度。\n\n无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员，还是需要快速原型验证的技术团队，都能从中受益。OpenHands 提供了灵活多样的使用方式：既可以通过命令行（CLI）或本地图形界面在个人电脑上轻松上手，体验类似 Devin 的流畅交互；也能利用其强大的 Python SDK 自定义智能体逻辑，甚至在云端大规模部署上千个智能体并行工作。\n\n其核心技术亮点在于模块化的软件智能体 SDK，这不仅构成了平台的引擎，还支持高度可组合的开发模式。此外，OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩，证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能，支持与 Slack、Jira 等工具集成，并提供细粒度的权限管理，适合从个人开发者到大型企业的各类用户场景。",70626,"2026-04-05T22:51:36",[15,14,13,36],{"id":65,"github_repo":66,"name":67,"description_en":68,"description_zh":69,"ai_summary_zh":69,"readme_en":70,"readme_zh":71,"quickstart_zh":72,"use_case_zh":73,"hero_image_url":74,"owner_login":75,"owner_name":76,"owner_avatar_url":77,"owner_bio":78,"owner_company":68,"owner_location":68,"owner_email":68,"owner_twitter":79,"owner_website":80,"owner_url":81,"languages":82,"stars":91,"forks":92,"last_commit_at":93,"license":94,"difficulty_score":10,"env_os":95,"env_gpu":96,"env_ram":96,"env_deps":97,"category_tags":104,"github_topics":68,"view_count":10,"oss_zip_url":68,"oss_zip_packed_at":68,"status":16,"created_at":105,"updated_at":106,"faqs":107,"releases":136},4165,"jgraph\u002Fdrawio-mcp","drawio-mcp",null,"drawio-mcp 是 draw.io 官方推出的开源服务，旨在让大语言模型（LLM）能够直接创建、编辑和展示流程图。它解决了 AI 在生成图表时通常只能输出静态图片或难以修改的痛点，实现了从“文字描述”到“可编辑矢量图”的无缝转化。\n\n该工具提供了四种灵活的集成方式：既支持在聊天界面中直接内嵌渲染交互式图表，也能调用本地 draw.io 编辑器打开文件，还能生成标准的 `.drawio` 源文件或图片。其独特亮点在于强大的形状搜索功能，能从上万种专业图标库（如 AWS、UML、网络拓扑等）中精准匹配样式，并原生支持 XML、CSV 及 Mermaid 多种格式。\n\ndrawio-mcp 特别适合开发者、技术文档撰写人、系统架构师以及需要频繁绘制流程图的研究人员使用。对于希望在不安装额外软件的情况下快速获得高质量图表的普通用户，它也提供了基于项目指令的轻量级方案。无论是嵌入本地开发工作流，还是在云端对话中即时预览，drawio-mcp 都能帮助用户高效地将抽象逻辑转化为直观、可反复编辑的专业图表。","# 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","# draw.io MCP 服务器\n\n这是官方的 [draw.io](https:\u002F\u002Fwww.draw.io) MCP（模型上下文协议）服务器，使大型语言模型能够在 draw.io 编辑器中创建和打开图表。\n\n## 创建图表的四种方式\n\n本仓库提供了四种将 draw.io 与 AI 助手集成的方法。请选择适合您设置的方式：\n\n| | [MCP 应用服务器](#mcp-app-server) | [MCP 工具服务器](#mcp-tool-server) | [技能 + CLI](#skill--cli) | [项目指令](#alternative-project-instructions-no-mcp-required) |\n|---|---|---|---|---|\n| **工作原理** | 在聊天中内联渲染图表 | 在浏览器中打开图表 | 生成 `.drawio` 文件，可选导出为 PNG\u002FSVG\u002FPDF | Claude 通过 Python 生成 draw.io URL |\n| **图表输出** | 对话中嵌入的交互式查看器 | 新标签页中的 draw.io 编辑器 | `.drawio` 或 `.drawio.png` \u002F `.svg` \u002F `.pdf` | 可点击的 draw.io 链接 |\n| **是否需要安装** | 否（托管在 `mcp.draw.io`） | 是（npm 包） | 复制技能文件 + draw.io 桌面版 | 不需要 — 直接粘贴指令 |\n| **支持 XML、CSV、Mermaid** | 仅 XML | ✅ 三者均支持 | 仅 XML（原生格式） | ✅ 三者均支持 |\n| **可在 draw.io 中编辑** | 通过“在 draw.io 中打开”按钮 | ✅ 直接编辑 | ✅ 直接编辑 | 通过链接 |\n| **兼容平台** | Claude.ai、VS Code、任何 MCP Apps 主机 | Claude Desktop、任何 MCP 客户端 | Claude Code | Claude.ai（配合 Projects） |\n| **最适合场景** | 聊天中的内联预览 | 本地桌面工作流 | 本地开发工作流 | 快速搭建，无需安装 |\n\n---\n\n## MCP 应用服务器\n\nMCP 应用服务器使用 [MCP Apps](https:\u002F\u002Fmodelcontextprotocol.io\u002Fdocs\u002Fextensions\u002Fapps) 协议，在 AI 聊天界面中将 draw.io 图表 **内联** 渲染。图表不会打开在一个新的浏览器标签页中，而是直接以交互式 iframe 的形式显示在对话中。\n\n官方托管的端点地址为：\n\n```\nhttps:\u002F\u002Fmcp.draw.io\u002Fmcp\n```\n\n您可以将此 URL 添加到 Claude.ai 或任何兼容 MCP Apps 的主机中作为远程 MCP 服务器——无需任何安装。\n\n您也可以通过 Node.js 在本地运行该服务器，或者将其部署到 Cloudflare Workers 上。\n\n**工具：**\n- **`create_diagram`** — 将 draw.io XML 渲染为聊天中内联的交互式图表\n- **`search_shapes`** — 根据关键词搜索 draw.io 所有库中的 10,000 多种形状（AWS、Azure、GCP、P&ID、电气、Cisco、Kubernetes、UML、BPMN 等）。返回可以直接用于 XML 的精确样式字符串。在调用 `create_diagram` 之前，可以先使用此工具找到正确的形状。\n\n**[完整文档 →](mcp-app-server\u002FREADME.md)**\n\n> **注意：** 内联图表渲染需要支持 MCP Apps 扩展的 MCP 主机。在不支持 MCP Apps 的主机中，该工具仍然可以正常工作，但会以文本形式返回 XML。\n\n---\n\n## MCP 工具服务器\n\n最初的 MCP 服务器，可以直接在 draw.io 编辑器中打开图表。支持 XML、CSV 和 Mermaid.js 格式，并提供灯箱模式和暗黑模式选项。已发布为 npm 上的 [`@drawio\u002Fmcp`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@drawio\u002Fmcp)。\n\n快速入门：`npx @drawio\u002Fmcp`\n\n**[完整文档 →](mcp-tool-server\u002FREADME.md)**\n\n---\n\n## 技能 + CLI\n\n一个 Claude Code 技能，可以生成原生的 `.drawio` 文件，并可选导出为 PNG、SVG 或 PDF（嵌入 XML，因此导出的文件仍可在 draw.io 中编辑）。无需配置 MCP——只需复制一个技能文件即可。\n\n默认情况下，该技能会写入一个 `.drawio` 文件并在 draw.io 中打开它。如果您希望导出其他格式（如 `\u002Fdrawio png ...`），可以在请求中提及，然后使用 draw.io 桌面版的命令行工具并加上 `--embed-diagram` 参数进行导出。\n\n**[完整文档 →](skill-cli\u002FREADME.md)**\n\n---\n\n## 替代方案：项目指令（无需 MCP）\n\n这是一种无需安装任何东西即可使用的替代方法。您可以在 Claude 项目中添加指令，教会 Claude 使用 Python 代码执行来生成 draw.io URL。无需 MCP 服务器，也不需要桌面应用程序——只需粘贴指令即可开始使用。\n\n**[完整文档 →](project-instructions\u002FREADME.md)**\n\n---\n\n## XML 参考（单一事实来源）\n\ndraw.io XML 生成参考——涵盖边缘路由、容器、图层、标签、元数据、暗黑模式、样式属性以及 XML 的良好形成——集中在一个规范文件中：\n\n**[`shared\u002Fxml-reference.md`](shared\u002Fxml-reference.md)**\n\n上述四种方法都以该文件作为 LLM 提示的单一事实来源：\n\n| 方法 | 如何访问参考文件 |\n|----------|-------------------------------|\n| MCP 应用服务器 | 在启动或构建时读取该文件，并将其包含在工具描述中 |\n| MCP 工具服务器 | 在启动时读取该文件（从仓库中获取或通过 `prepack` 打包的副本） |\n| 技能 + CLI | 引用 [GitHub 原始 URL](https:\u002F\u002Fraw.githubusercontent.com\u002Fjgraph\u002Fdrawio-mcp\u002Fmain\u002Fshared\u002Fxml-reference.md) |\n| 项目指令 | 用户将其内容复制到自己的 Claude 项目中 |\n\n当更新 XML 生成指南时，只需编辑 `shared\u002Fxml-reference.md`——更改会自动传播到所有使用者。\n\n---\n\n## 形状搜索索引\n\n`search_shapes` 工具由预先构建的 draw.io 所有形状索引提供支持。该索引是通过运行 draw.io 客户端源代码（`app.min.js`）中的所有侧边栏调色板初始化函数，并使用 jsdom 在 Node.js 中捕获形状数据而生成的。\n\n```bash\n# 生成形状搜索索引（需要 ..\u002Fdrawio-dev 检出）\ncd shape-search\nnpm install\nDRAWIO_DEV_PATH=..\u002F..\u002Fdrawio-dev node generate-index.js\n\n# 重新构建 MCP 应用服务器 Worker，以嵌入更新后的索引\ncd ..\u002Fmcp-app-server\nnpm run build:worker\n```\n\n**何时重新生成：** 在更新 `drawio-dev` 后（新增形状、重命名模板、更新样式字符串），请重新运行 `generate-index.js`。该脚本会加载 `app.min.js` 和所有侧边栏调色板，因此能够自动捕捉形状库中的任何变化。\n\n生成的 `search-index.json` 会被提交到仓库中，以便 MCP 应用服务器可以在没有本地 `drawio-dev` 检出的情况下构建和部署。\n\n---\n\n## 开发\n\n```bash\n# MCP 应用服务器\ncd mcp-app-server\nnpm install\nnpm start\n\n# MCP 工具服务器\ncd mcp-tool-server\nnpm install\nnpm start\n```\n\n## 相关资源\n\n- [draw.io](https:\u002F\u002Fwww.draw.io) - 免费在线图表编辑器\n- [draw.io 桌面版](https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-desktop) - 桌面应用程序\n- [@drawio\u002Fmcp on npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@drawio\u002Fmcp) - npm 上的这个包\n- [drawio-mcp on GitHub](https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp) - 源代码仓库\n- [Mermaid.js 文档](https:\u002F\u002Fmermaid.js.org\u002Fintro\u002F)\n- [MCP 规范](https:\u002F\u002Fmodelcontextprotocol.io\u002F)\n- [MCP Apps 扩展](https:\u002F\u002Fmodelcontextprotocol.io\u002Fdocs\u002Fextensions\u002Fapps)","# drawio-mcp 快速上手指南\n\ndrawio-mcp 是 draw.io 官方的 MCP（Model Context Protocol）服务器，旨在让大语言模型（LLM）能够直接在对话中创建、编辑和打开 draw.io 图表。它支持多种集成方式，从无需安装的云端服务到本地开发工作流。\n\n## 环境准备\n\n根据你选择的集成方式，前置要求有所不同：\n\n*   **通用要求**：\n    *   支持 MCP 协议的 AI 客户端（如 Claude Desktop, VS Code with MCP 插件，或支持 MCP Apps 的 Claude.ai）。\n    *   Node.js (v18+)：如果你选择本地部署 MCP 服务或使用 CLI 工具。\n*   **方式一：MCP App Server (推荐用于 Claude.ai\u002F在线聊天)**\n    *   无需本地安装，只需网络连接。\n    *   宿主环境需支持 **MCP Apps** 扩展协议以实现在线渲染。\n*   **方式二：MCP Tool Server (推荐用于本地桌面工作流)**\n    *   需要安装 Node.js 和 npm。\n    *   本地浏览器用于打开生成的图表。\n*   **方式三：Skill + CLI (推荐用于 Claude Code)**\n    *   需要安装 **draw.io Desktop** 应用程序（用于文件导出和本地打开）。\n    *   无需配置 MCP 服务器，仅需复制技能文件。\n\n> **注意**：国内用户若遇到 npm 安装缓慢，可配置淘宝镜像源：\n> `npm config set registry https:\u002F\u002Fregistry.npmmirror.com`\n\n## 安装步骤\n\n请根据你的使用场景选择以下**一种**方式进行配置：\n\n### 方案 A：使用官方托管服务 (零安装)\n适用于支持 MCP Apps 的客户端（如新版 Claude.ai）。\n1.  在你的 MCP 客户端配置中添加远程服务器 URL：\n    ```text\n    https:\u002F\u002Fmcp.draw.io\u002Fmcp\n    ```\n2.  保存配置即可直接使用，无需运行任何命令。\n\n### 方案 B：本地部署 MCP Tool Server\n适用于 Claude Desktop 或其他本地 MCP 客户端，可直接在浏览器打开图表。\n1.  通过 npx 直接运行（无需全局安装）：\n    ```bash\n    npx @drawio\u002Fmcp\n    ```\n2.  或者全局安装：\n    ```bash\n    npm install -g @drawio\u002Fmcp\n    ```\n3.  在你的 MCP 配置文件（如 `claude_desktop_config.json`）中注册该服务。\n\n### 方案 C：配置 Skill + CLI\n适用于 Claude Code 用户，生成 `.drawio` 本地文件。\n1.  从仓库获取 skill 文件（通常为 `.md` 或 `.txt` 格式的指令文件）。\n2.  将文件内容复制到你的 Claude Code 技能配置目录中。\n3.  确保系统已安装 **draw.io Desktop** 并配置好命令行工具路径。\n\n## 基本使用\n\n配置完成后，你可以直接在自然语言对话中指示 AI 创建图表。\n\n### 示例 1：创建流程图 (通用)\n直接向 AI 发送指令，AI 将调用相应工具生成图表。\n\n**用户输入：**\n```text\n请帮我画一个用户登录系统的流程图，包含开始、输入用户名密码、验证、成功\u002F失败分支和结束节点。\n```\n\n**预期行为：**\n*   **方案 A**：图表将直接以交互式 iframe 形式嵌入在聊天记录中。\n*   **方案 B**：自动在默认浏览器新标签页打开 draw.io 编辑器并加载该图。\n*   **方案 C**：在当前目录生成 `diagram.drawio` 文件，并尝试用桌面应用打开。\n\n### 示例 2：搜索并使用特定形状 (仅限方案 A)\n如果你需要使用特定的图标（如 AWS 或 Kubernetes 图标），可以先搜索形状。\n\n**用户输入：**\n```text\n先搜索一下 \"Kubernetes pod\" 的形状样式，然后用它画一个简单的 K8s 部署架构图。\n```\n\n**工具逻辑：**\nAI 会先调用 `search_shapes` 工具获取准确的样式字符串，再调用 `create_diagram` 生成包含该样式的 XML 图表。\n\n### 示例 3：导出为图片 (仅限方案 C)\n在使用 Skill + CLI 模式时，可以指定导出格式。\n\n**用户输入：**\n```text\n\u002Fdrawio png 创建一个 ER 图，包含用户表和订单表的关系。\n```\n\n**预期行为：**\n系统将生成 `.drawio` 源文件，并调用 draw.io CLI 额外导出一张嵌入 XML 元数据的 PNG 图片，确保图片后续仍可被 draw.io 识别和编辑。","某后端架构师正在向团队解释新设计的微服务通信流程，需要快速生成一张包含 AWS 组件和时序逻辑的系统架构图。\n\n### 没有 drawio-mcp 时\n- 工程师必须中断编程思路，手动打开 draw.io 网页或桌面端，在数千个图标中费力查找对应的 AWS Lambda 和 API Gateway 形状。\n- 绘制连线和对齐元素完全依赖鼠标拖拽，调整布局耗时耗力，难以保证图表的专业美观度。\n- 完成绘图后需手动导出图片或 XML 文件，再切换回聊天窗口上传，沟通链路冗长且容易版本混乱。\n- 若需修改细节（如增加一个数据库节点），往往需要重新经历一遍“打开编辑器 - 修改 - 导出 - 上传”的繁琐循环。\n\n### 使用 drawio-mcp 后\n- 工程师直接在对话中输入“创建包含 AWS Lambda 和 API Gateway 的微服务时序图”，drawio-mcp 自动调用 `search_shapes` 精准匹配图标并生成完整 XML。\n- 借助 MCP App Server，生成的交互式图表直接内嵌在聊天窗口中，无需跳转浏览器即可预览和缩放查看细节。\n- 发现逻辑遗漏时，只需追加指令“在用户服务后增加 Redis 缓存层”，drawio-mcp 即刻更新图表并原地刷新，实现“所说即所得”。\n- 支持直接编辑原生 `.drawio` 文件，团队成员可基于 AI 生成的底稿继续在本地深度定制，完美保留可编辑性。\n\ndrawio-mcp 将原本割裂的“构思 - 绘图 - 沟通”流程融合为流畅的自然语言交互，让技术图表的创建像编写代码一样高效敏捷。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fjgraph_drawio-mcp_2fbc58e7.png","jgraph","draw.io","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fjgraph_e7c0ecb3.png","draw.io specialises in browser-based diagramming components and applications.","drawio","http:\u002F\u002Fwww.drawio.com","https:\u002F\u002Fgithub.com\u002Fjgraph",[83,87],{"name":84,"color":85,"percentage":86},"JavaScript","#f1e05a",99.8,{"name":88,"color":89,"percentage":90},"Dockerfile","#384d54",0.2,2437,143,"2026-04-05T23:18:34","Apache-2.0","Linux, macOS, Windows","未说明",{"notes":98,"python":96,"dependencies":99},"该工具主要基于 Node.js 运行，而非 Python。提供四种集成方式：1. MCP App Server（可托管或本地运行，需支持 MCP Apps 协议的主机）；2. MCP Tool Server（通过 npm 安装，直接在浏览器打开 draw.io）；3. Skill + CLI（需安装 draw.io 桌面版以使用导出功能）；4. Project Instructions（无需安装，仅需在 Claude Projects 中粘贴指令）。若需重新生成形状搜索索引，则需本地检出 drawio-dev 源码仓库。",[100,101,102,103],"Node.js","npm","@drawio\u002Fmcp (npm 包)","jsdom (用于生成形状索引)",[15,36],"2026-03-27T02:49:30.150509","2026-04-06T12:04:03.836913",[108,113,118,123,127,131],{"id":109,"question_zh":110,"answer_zh":111,"source_url":112},18978,"为什么官方托管的 MCP 端点在 ChatGPT 中无法显示连接器，而在 Claude 中可以？","这是因为 ChatGPT 对 MCP 协议中的 `structuredContent` 字段处理方式与规范不同，导致连接器无法正确显示。维护者已确认该问题，并在后续版本中移除了该字段以兼容 ChatGPT。修复将在下一个发布版本中生效。目前建议在使用 ChatGPT 时等待更新，或暂时使用 Claude 以获得完整功能。","https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp\u002Fissues\u002F4",{"id":114,"question_zh":115,"answer_zh":116,"source_url":117},18979,"调用 `create_diagram` 工具时只返回通用错误信息，没有具体诊断内容，如何排查原因？","该问题是由于早期版本错误处理不完善导致的。维护者已在最新版本中改进了错误处理机制，现在会返回具体的诊断信息（如 XML 解析错误、验证失败、上游超时等），帮助区分是负载格式错误、服务器问题还是网络问题。请确保升级到最新版本。此外，注意 `create_diagram` 工具设计为由 Claude 自动生成 XML 并作为参数传递，用户不应手动粘贴原始 XML 到聊天中，否则可能因包装格式不符导致失败。","https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp\u002Fissues\u002F22",{"id":119,"question_zh":120,"answer_zh":121,"source_url":122},18980,"在 Windows 上使用本地 MCP 服务时，浏览器打开后图表画布为空白，原因是什么？","这是由于 Windows 的 `cmd.exe` 中 `start` 命令将 URL 中的 `&` 视为命令分隔符，并丢弃 `#` 之后的所有内容（包括携带图表数据的 `#create=...` 片段）。解决方案是修改代码：不再直接调用 `start` 命令打开 URL，而是先将完整 URL 写入一个临时的 `.url` (Windows Internet Shortcut) 文件，然后启动该文件。浏览器从文件读取 URL 时可完整保留片段。此修复已合并到代码库并将包含在下一版本中。","https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp\u002Fissues\u002F16",{"id":124,"question_zh":125,"answer_zh":126,"source_url":122},18981,"在 claude.ai 中使用远程 MCP 服务器时，生成的 draw.io 链接打开后画布为空，如何解决？","这是 claude.ai 平台侧的问题：当远程 MCP 主机启动浏览器时，会自动剥离 URL 中的哈希片段（`#create=...`），导致图表数据丢失。由于这是平台限制，MCP 项目方无法直接修复。推荐的解决方法是使用 MCP App 服务器集成模式（即配置端点为 `https:\u002F\u002Fmcp.draw.io\u002Fmcp`），该模式下图表会内联渲染，并提供一个\"在 draw.io 中打开\"的按钮，该按钮通过浏览器端链接跳转，能正确保留 URL 片段。",{"id":128,"question_zh":129,"answer_zh":130,"source_url":117},18982,"如何正确使用 `create_diagram` 工具？是否需要手动编写 XML？","不需要手动编写 XML。`create_diagram` 工具的设计意图是让 Claude 根据用户的自然语言描述（例如“创建一个待办事项应用的流程图”）自动生成符合规范的 XML，并将其作为 `xml` 参数传递给工具。如果用户直接将原始 XML 粘贴到聊天中，Claude 可能会以工具无法识别的方式对其进行包装，从而导致执行失败。正确的做法是直接描述需求，让 AI 生成图表。",{"id":132,"question_zh":133,"answer_zh":134,"source_url":135},18983,"是否支持读取和更新已有的 draw.io 图表，而不仅仅是创建新图？","目前该 MCP 项目主要专注于创建新图表的功能。关于读取和更新现有账户中图表的功能请求已被记录，但维护者指出 Issue 追踪器应用于报告具体问题而非单纯的想法提议。截至当前数据，尚未有明确的实现计划或变通方案公布。建议关注项目后续的更新公告或贡献指南以获取最新进展。","https:\u002F\u002Fgithub.com\u002Fjgraph\u002Fdrawio-mcp\u002Fissues\u002F7",[]]