Next AI Draw.io

Next AI Draw.io MCP 服务

一个 MCP 服务，可让 Claude Code、Cursor、VS Code 和其他 AI Agent 根据项目文件绘制 draw.io 图表，并在浏览器中实时预览。预览画布来自 Next AI Draw.io Web 应用：AI 所做的更改会以轮廓标出，按 Ctrl+Z 即可撤销，还可以随时手动编辑。

https://github.com/user-attachments/assets/6f53a67b-ab21-4113-9fee-7fb32f9de678

安装

在 VS Code 或 Cursor 中，一键即可添加：

让 AI Agent 为你安装

将以下内容粘贴到 Claude Code、Codex、Cursor、VS Code、Cline 或任何可以编辑文件并运行命令的 Agent 中：

Install the drawio MCP server for the client you are running in, following
https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/packages/mcp-server/README.md
Install it for all my projects (user scope, for Claude Code "--scope user"),
name the server "drawio" and keep the servers that are already configured.
Then tell me how to reload so its tools show up.

手动安装

Claude Code

claude mcp add --scope user drawio -- npx @next-ai-drawio/mcp-server@latest

--scope user 会让所有项目都能使用这些工具。不加此选项时，这些工具仅在运行命令的文件夹中可用。

也可以从 Claude Code 社区市场将其安装为插件（Claude Code 2.1.275 或更高版本）：

/plugin install next-ai-drawio --marketplace anthropics/claude-plugins-community

Codex CLI

codex mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

Codex 在每次调用会更改图表的 drawio 工具前都会征求确认；如果没有完全访问权限，codex exec 会报错："MCP tool call requires approval"。若要让 drawio 工具运行时无需确认，请在 ~/.codex/config.toml 中该服务的区段添加一行：

[mcp_servers.drawio]
command = "npx"
args = ["@next-ai-drawio/mcp-server@latest"]
default_tools_approval_mode = "approve"

若只想批准部分工具，请改用 [mcp_servers.drawio.tools.<tool name>] 并设置 approval_mode = "approve"。

VS Code（.vscode/mcp.json）

{
  "servers": {
    "drawio": { "type": "stdio", "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] }
  }
}

Cursor、Claude Desktop、Cline 和大多数其他客户端（~/.cursor/mcp.json、claude_desktop_config.json、cline_mcp_settings.json）

{
  "mcpServers": {
    "drawio": { "command": "npx", "args": ["@next-ai-drawio/mcp-server@latest"] }
  }
}

重启客户端，然后提出请求，例如：“读取此代码库并绘制其架构”。预览会在浏览器中打开，图表也会在绘制过程中逐步显示。

功能

• 根据项目绘制：Agent 使用自身的工具读取代码和文档。使用 load_diagram 打开现有的 .drawio 和 .drawio.svg 文件。
• Web 应用的画布：AI 所做的更改会以轮廓标出数秒（导出时不会显示），按一次 Ctrl+Z 即可撤销。选中形状后说“这些”（get_selection）。AI 再次编辑前会先读取你手动所做的修改。
• 真实图标：使用 Web 应用的绘图规则和形状库（AWS、Azure、GCP、Kubernetes、Cisco 等），因此 AI 会使用真实的图标名称。
• 自检：AI 可以查看渲染后图表的屏幕截图并修复重叠（设置 screenshot: true，或使用 screenshot_diagram）。
• 版本：画布旁以卡片形式显示最近 20 个版本；可恢复或比较版本，也可让 AI 撤销更改（restore_version）。
• 页面和导出：支持多页图表；可保存为 .drawio、.png、.svg 或 .drawio.svg。图像四周会留出 20 px 的边距，PNG 背景为白色（设置 transparent: true 可设为透明）。
• 离线使用：draw.io 编辑器已打包在此软件包中。

选择 draw.io MCP 服务

有多个 MCP 服务可以绘制 draw.io 图表。截至 2026 年 10 月，它们的区别如下：

服务	如何查看和修改图表	适用场景
本服务，@next-ai-drawio/mcp-server	在浏览器中显示实时 draw.io 画布。AI 会读取画布内容，包括你手动进行的编辑和选择；AI 的修改会用轮廓标出，按 Ctrl+Z 可撤销，还可以恢复到较早版本	你和 AI 轮流编辑同一张图表
draw.io 官方的 @drawio/mcp	从 XML、CSV 或 Mermaid 文件打开每张图表，并在新标签页中使用 draw.io 编辑器；没有工具会读取图表	你想在完整的 draw.io 编辑器中查看图表，并自行在其中编辑
draw.io 托管的 MCP 应用，https://mcp.draw.io/mcp	在 Claude.ai、ChatGPT、VS Code 或 Cursor 的聊天中显示图表，无需安装任何内容；图表会发送到 draw.io 的服务	你在聊天应用中工作，并想在对话中查看图表
draw.io 的 Claude Code、Codex CLI 和 Copilot CLI 插件	一种可写入 .drawio 文件的技能；导出 PNG、SVG 和 PDF 需要 draw.io Desktop	你想在代码库中保存图表文件，而不使用 MCP 服务
lgazo/drawio-mcp-server	在 localhost 上运行 draw.io 编辑器，或通过浏览器扩展连接你自己的 draw.io；工具可以创建、读取、更新和删除单个形状、图层和页面	你需要精细控制的工具、同时处理多个文档，或导入 Mermaid

已保存的图表

每次修改都会保存到 ~/.next-ai-drawio/<session-id>.drawio，并保留最近 20 个版本；最新的 50 张图表会被保留。要在之后的对话中继续编辑某张图表，请让 AI 找到它：AI 会通过 list_saved_diagrams 查找图表，并通过 start_session 重新打开。

自定义绘图规则

将规则写入 ~/.next-ai-drawio/instructions.md，例如“始终使用简约风格”。每次调用时，这些规则都会添加到绘图指南中，因此修改后无需重启即可生效。最多使用前 5000 个字符。

工具

工具	功能
start_session	打开预览并返回绘图指南；通过 session_id 继续编辑已保存的图表
create_new_diagram	根据 mxCell XML 绘制新图表
edit_diagram	按 id 添加、更新或删除单元格；要么全部成功，要么全部不做
get_diagram	获取当前 XML，包括你在浏览器中的编辑
get_selection	获取你在预览中选中的形状
screenshot_diagram	获取页面的 PNG 图片，供 AI 检查
load_diagram、export_diagram	打开 .drawio 或 .drawio.svg 文件；保存为 .drawio、.png、.svg 或 .drawio.svg
restore_version	恢复到较早的版本；仍可重做
list_saved_diagrams	列出之前会话保存的图表，按最新优先排序
get_drawing_guide、get_shape_library	再次获取绘图规则；查看 aws4 等库中的图标样式
list_pages、add_page、rename_page、delete_page	管理页面（标签页）

配置

在客户端为服务设置环境变量，放在 env 中：

变量	默认值	作用
PORT	6002	预览端口；如果被占用，则使用下一个空闲端口，最高为 6020
DRAWIO_DATA_DIR	~/.next-ai-drawio	保存图表和 instructions.md 的文件夹；设为 off 可关闭保存
DRAWIO_AUTO_SCREENSHOT	未设置	true 会在每次创建和编辑的结果中附加截图（每次调用耗时 2 到 10 秒）
DRAWIO_BASE_URL	捆绑的 draw.io	使用其他 draw.io，例如自托管版本（见下文）
DRAWIO_LANG	未设置	固定编辑器和预览语言：en、zh、zh-tw、ja、de 等
DRAWIO_UI	未设置	固定 draw.io 主题：kennedy、atlas、dark、min、sketch 或 simple
DRAWIO_DARK	auto	1 以深色模式启动，0 以浅色模式启动，auto 跟随系统设置
BROWSER	未设置	none 表示不自动打开预览；start_session 仍会返回 URL
DRAWIO_PREVIEW_UI	shell	classic 会打开旧版预览页面，不含轮廓、Ctrl+Z 或 get_selection
DEBUG	未设置	true 会将调试消息写入 stderr

自托管 draw.io

docker run -d -p 8080:8080 jgraph/drawio

然后设置 DRAWIO_BASE_URL=http://localhost:8080。预览页面无法访问其他来源的 draw.io，因此不会为 AI 的更改显示轮廓，Ctrl+Z 也无法撤销这些更改（请使用版本卡片），且 get_selection 不起作用。捆绑版本省略了少数按需加载代码的功能，例如组织结构图布局。它也没有图像代理，因此导出的图像会遗漏通过网址插入的图片；请参阅离线部署。

故障排除

• VS Code Simple Browser 或 Cursor 浏览器中的预览空白：此页面拒绝嵌入其他页面。请在常规浏览器中打开该 URL。
• 截图或 PNG/SVG 导出超时：预览标签页负责渲染这些内容，而浏览器会降低后台标签页的运行速度。请将该标签页切换到前台，然后重试。
• “No active session”：AI 必须先调用 start_session。
• 预览未更新：请打开 start_session 返回的 URL；其中的 ?mcp= 部分会将页面连接到会话。

工作原理

服务通过 stdio 与 Agent 通信，并在 127.0.0.1 上运行 HTTP 服务，以提供预览页面和捆绑的 draw.io；页面会轮询该服务以获取更改。每个 /api 请求都需要一个只有预览页面持有的令牌，因此其他网站无法读取或更改你的图表。

许可证

Apache-2.0