JavaScriptNode.jsAI
Draw.io 官方 MCP Server 配置与使用指南
Draw.io 官方发布 MCP Server，支持在 Cursor 和 Claude 等编辑器中通过 AI 生成可编辑图表。本文介绍安装配置步骤，包括在 Cursor 和 Claude 桌面客户端添加 MCP 服务的方法，以及核心功能如 Mermaid、CSV、XML 转换模式。该工具利用压缩编码数据 URL 实现隐私保护，但存在 URL 长度限制。适合需要快速绘制架构图的开发者使用。
Draw.io 官方发布 MCP Server，支持在 Cursor 和 Claude 等编辑器中通过 AI 生成可编辑图表。本文介绍安装配置步骤，包括在 Cursor 和 Claude 桌面客户端添加 MCP 服务的方法，以及核心功能如 Mermaid、CSV、XML 转换模式。该工具利用压缩编码数据 URL 实现隐私保护，但存在 URL 长度限制。适合需要快速绘制架构图的开发者使用。
Draw.io 发布了官方 MCP Server，支持在 Cursor、Claude Desktop 等支持 MCP 的编辑器中调用画图功能。画完后会弹出网页编辑器，支持基于已绘制的图进行再次编辑。
{"mcpServers":{"drawio-mcp":{"command":"npx","args":["-y","@drawio/mcp"]}}}
提示：如果状态显示红色/失败，可以点旁边的刷新按钮重试。同样注意 npx 路径问题，必要时用完整路径替代。
{"mcpServers": {"drawio-mcp": {"command": "npx", "args": ["-y", "@drawio/mcp"]}}}
如果已有其他 MCP server，把 "drawio-mcp": {...} 加到 mcpServers 对象里即可。
注意：确保你的系统已安装 Node.js 和 npm，因为 npx 依赖它们。在 M1 Mac 上如果用 nvm 管理 Node，可能需要把 command 改为 npx 的完整路径（which npx 查看），避免 Claude 找不到命令。
Claude 网页端（claude.ai）目前不支持直接添加自定义 MCP server。MCP server 配置只支持以下客户端：
如果你想在网页端使用 draw.io 功能，有两个替代方案：
在 Cursor 或者 Claude 客户端中向 AI 发出命令：
使用 draw.io MCP 工具 open_drawio_mermaid 制作展示 SSO 流程的时序图
生成后，可以保存文档到 Google Drive。这样方便后续随时再次编辑。再也不用担心找不到历史编辑文件了。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online