用 MCP 让 AI 替你画图：Trae Work + drawio-mcp 完整搭建指南

从「说一句话自动生成架构图」到「Node.js 22 兼容性修复」，这篇博文记录了完整的踩坑与解决过程。

前言：当 AI 能画图

2024 年 11 月，Anthropic 开源了 Model Context Protocol（MCP），被业界称为 「AI 领域的 USB-C」。它解决了 AI 工具集成领域的经典 N×M 问题：每接入一个新数据源，都要为每个 AI 应用单独写集成代码。MCP 提供了一个统一标准，让任何 AI 应用只需实现一次 MCP Client，就能连接所有 MCP Server；任何工具只需实现一次 MCP Server，就能被所有 AI 应用访问。

一年后，MCP 已被 OpenAI、Google、Microsoft 等主流厂商采纳，生态中有 超过 6800 个 MCP Server，覆盖文件系统、数据库、浏览器自动化、绘图工具等方方面面。

本文记录的是如何在 Windows 11 上搭建 「Trae Work + drawio-mcp」 环境，让 AI 能够通过自然语言直接生成架构图、流程图，无需打开任何绘图软件。

---

一、技术背景

1.1 什么是 MCP？

Model Context Protocol（MCP） 是 Anthropic 于 2024 年 11 月发布的开放标准，用于连接 AI 应用与外部工具和数据源。其架构分为三层：

• Host（宿主）：用户直接交互的 AI 应用，如 Claude Desktop、Cursor、Trae
• Client（客户端）：Host 内部的协议层组件，负责与 Server 通信
• Server（服务器）：工具与数据的提供者，暴露 Tools、Resources、Prompts 三种能力

MCP 的通信基于 JSON-RPC 2.0，支持 stdio（本地）和 HTTP+SSE（远程）两种传输方式。相比 OpenAI 的 Function Calling，MCP 的优势在于：

特性	MCP	Function Calling
协议标准	开放规范（JSON-RPC 2.0）	OpenAI 私有 API
连接状态	有状态（持久连接）	无状态（每次请求）
工具发现	自动（tools/list）	手动传入工具清单
资源管理	原生支持	不支持
多模型支持	厂商中立	仅 OpenAI

1.2 drawio-mcp 是什么？

drawio-mcp 是一个开源 MCP Server，允许 AI 通过自然语言创建和管理 Draw.io 图表。它基于 mxGraph 引擎，直接生成 .drawio.svg 文件，无需安装 Draw.io Desktop 客户端。

项目信息：

• 作者：Sujimoshi
• GitHub：https://github.com/Sujimoshi/drawio-mcp
• 版本：v1.6.0
• npm 包：drawio-mcp
• Node 要求：≥ 18.0.0

核心工具（共 6 个，均支持批量操作）：

工具名	功能	批量支持
new_diagram	创建新图表文件	-
add_nodes	添加节点	✅
link_nodes	连接节点	✅
edit_nodes	编辑节点属性	✅
remove_nodes	删除节点	✅
get_diagram_info	获取图表信息	-

支持的节点类型：Rectangle、RoundedRectangle、Ellipse、Cylinder、Cloud、Actor、Text、Step 等。

---

二、环境准备

2.1 系统环境

• 操作系统：Windows 11
• Node.js：v22.22.3
• Trae：TRAE SOLO CN（国内版）
• npm global 路径：C:\Users\yueli\AppData\Roaming\npm-global

2.2 环境检查

在 PowerShell 中运行：

node --version
npm --version
npm config get prefix

确认 Node.js 版本 ≥ 18，npm global 路径正确。

---

三、踩坑与解决

3.1 问题一：npm registry 配置冲突

现象

执行 npm install -g drawio-mcp 时，下载卡住并报错：

npm http fetch GET https://registry.npmjs.org/drawio-mcp attempt 1 failed with ENOTFOUND
npm http fetch GET https://registry.npmjs.org/drawio-mcp attempt 2 failed with ETIMEDOUT
npm error code ETIMEDOUT

根因分析

通过 npm config list --json 检查配置：

{
  "registry": "https://registry.npmmirror.com"
}

全局配置显示使用 npmmirror（国内镜像），但实际下载却走了 registry.npmjs.org（官方源，国内被封）。

进一步检查发现 C:\Users\yueli\.npmrc 文件中写了：

registry=https://registry.npmjs.org

npm 配置优先级：用户级 .npmrc > 全局配置 > 项目级 .npmrc。用户级 .npmrc 覆盖了全局的 npmmirror 设置。

解决方案

修改 C:\Users\yueli\.npmrc，统一使用 npmmirror：

prefix=C:\Users\yueli\AppData\Roaming\npm-global
cache=C:\Users\yueli\AppData\Local\Temp\fwpack_fdf61eb6\.npm
registry=https://registry.npmmirror.com

重新安装：

npm install -g drawio-mcp

结果：✅ 86 packages，耗时约 9 秒。

---

3.2 问题二：Node.js 22 兼容性崩溃

现象

安装成功后，尝试启动 drawio-mcp：

node C:\Users\yueli\AppData\Roaming\npm-global\node_modules\drawio-mcp\dist\index.js

报错：

TypeError: Cannot set property navigator of #<Object> which has only a getter
    at file:///C:/User.../drawio-mcp/dist/mxgraph/jsdom.js:6:18

根因分析

drawio-mcp 依赖 jsdom 来模拟浏览器环境（mxGraph 需要）。其 dist/mxgraph/jsdom.js 文件包含：

import { JSDOM } from "jsdom";
const dom = new JSDOM();
global.window = dom.window;
global.document = window.document;
global.XMLSerializer = window.XMLSerializer;
global.navigator = window.navigator;  // 第 6 行，直接赋值
global.location = window.location;
global.DOMParser = window.DOMParser;

问题核心：Node.js v22 中，global.navigator 变成了只读 getter，无法通过直接赋值修改。这是 Node.js 22 的新特性，为了更好地模拟浏览器环境而引入，但与旧的 jsdom 使用方式冲突。

解决方案

用 Object.defineProperty 绕过只读限制：

import { JSDOM } from "jsdom";
const dom = new JSDOM();
global.window = dom.window;
global.document = window.document;
global.XMLSerializer = window.XMLSerializer;

// Node.js 22+: global.navigator is a read-only getter.
// Use Object.defineProperty to override it safely.
Object.defineProperty(global, 'navigator', {
    value: window.navigator,
    writable: true,
    configurable: true,
});
Object.defineProperty(global, 'location', {
    value: window.location,
    writable: true,
    configurable: true,
});
global.DOMParser = window.DOMParser;

修改文件：C:\Users\yueli\AppData\Roaming\npm-global\node_modules\drawio-mcp\dist\mxgraph\jsdom.js

验证

node C:\Users\yueli\AppData\Roaming\npm-global\node_modules\drawio-mcp\dist\index.js

ExitCode: 0，无错误输出，MCP 服务器正常通过 stdio 等待连接 ✅

---

四、配置 Trae MCP

4.1 找到配置文件

Trae CN 的 MCP 配置文件位于：

C:\Users\yueli\AppData\Roaming\TRAE SOLO CN\User\mcp.json

4.2 更新配置

打开 mcp.json，添加 drawio-mcp 条目：

{
  "mcpServers": {
    "figwright": {
      "command": "C:\\Users\\yueli\\AppData\\Roaming\\npm-global\\figwright-mcp.cmd",
      "args": [],
      "env": {}
    },
    "drawio-mcp": {
      "command": "C:\\Users\\yueli\\AppData\\Roaming\\npm-global\\drawio-mcp.cmd",
      "args": [],
      "env": {}
    }
  }
}

注意：

• Windows 路径中的反斜杠需要转义为 \\
• args 留空即可，drawio-mcp 通过 stdio 通信
• 如果之前没有 figwright，可以只保留 drawio-mcp

4.3 重启 Trae

MCP 配置更改后必须重启 Trae 才能生效。重启后，在 Trae 的 MCP 工具列表中应该能看到 6 个 drawio 相关工具。

---

五、实战使用

5.1 基础流程：三步画图

步骤 1：创建图表文件

在 Trae 中说：

"帮我创建一个系统架构图，文件名 system-architecture.drawio.svg"

Trae 会调用 new_diagram 工具创建空文件。

步骤 2：添加节点

"在 system-architecture.drawio.svg 里画一个三层架构：
- 顶层：API Gateway（矩形）
- 中层：User Service（矩形）
- 底层：PostgreSQL（圆柱体）

节点之间用箭头连接，标签分别是 'HTTP' 和 'SQL'"

Trae 会自动：

1. 调用 add_nodes 批量添加 3 个节点
2. 调用 link_nodes 批量创建连接

步骤 3：编辑完善

"把 User Service 改名为 Auth Service"
"在 PostgreSQL 右边加一个 Redis 缓存（圆柱体）"
"看看这个图里有哪些节点"

对应工具调用：edit_nodes、add_nodes、get_diagram_info。

5.2 进阶技巧

批量操作

所有核心工具都支持批量操作，减少网络开销：

"一次性添加 10 个微服务节点，从左到右排列，间距 100"

自动布局

add_nodes 支持 layout 参数：

"添加节点后自动按层级布局，方向从左到右"

支持算法：hierarchical（层级）、circle（圆形）、organic（有机）、compact-tree（紧凑树形）、radial-tree（放射树形）。

连接线样式

"从 A 到 B 画一条虚线，标签是 'async'"

link_nodes 支持：

• dashed: true：虚线
• reverse: true：反向箭头
• undirected: true：无向边（无箭头）

5.3 实战案例：电商微服务架构图

输入自然语言：

"帮我画一个电商微服务架构图，包含：
- 用户服务 User Service
- 订单服务 Order Service
- 商品服务 Product Service
- 支付服务 Payment Service
- PostgreSQL 数据库
- Redis 缓存
- Kafka 消息队列

服务之间用实线连接，数据库用圆柱体，缓存用圆柱体，消息队列用矩形。
文件保存在 architecture.drawio.svg"

Trae 执行流程：

1. 创建 architecture.drawio.svg
2. 批量添加 7 个节点（自动布局）
3. 批量创建连接关系
4. 生成完整的 SVG 文件

输出：.drawio.svg 文件，包含完整的架构图，可在 Trae 或 VSCode 中打开预览和编辑。

---

六、预览与编辑

6.1 在 Trae 中预览

直接点击 .drawio.svg 文件，Trae 会用内置 SVG 查看器显示。

6.2 用 Draw.io 插件编辑

1. 在 Trae 里安装 “Draw.io Integration” 插件
2. 右键 .drawio.svg → “Open with Draw.io”
3. 可视化拖拽编辑，保存后 AI 生成的内容不会丢失

6.3 Draw.io Desktop（可选）

虽然 drawio-mcp 不依赖 Draw.io Desktop，但如果需要更多高级功能，可以安装：

• 官网：https://www.diagrams.net/
• 安装后右键 .drawio.svg → Open with → Draw.io

---

七、常见问题

Q1: 重启 Trae 后看不到 drawio-mcp 工具？

A: 检查 mcp.json 配置是否正确，路径是否存在。查看 Trae 的 MCP 日志（通常在 C:\Users\yueli\AppData\Roaming\TRAE SOLO CN\logs）确认是否有错误。

Q2: 生成图表后打不开？

A: .drawio.svg 是标准 SVG + 内嵌 draw.io 元数据，用浏览器就能查看图片，用 draw.io 插件或 Draw.io Desktop 可以编辑。

Q3: 遇到其他 Node.js 兼容性问题？

A: 如果使用 Node.js 22+ 且遇到类似问题，尝试：

1. 检查 global.navigator、global.location 等只读属性
2. 使用 Object.defineProperty 替代直接赋值
3. 或降级到 Node.js 20.x LTS

Q4: 和 Figwright 有什么区别？

特性	Figwright	drawio-mcp
需要桌面客户端	✅ 需要 Figma Desktop	❌ 不需要
需要插件	✅ Figma 插件	❌ 不需要
输出格式	.fig（Figma 文档）	.drawio.svg（SVG）
实时预览	✅ Figma 内实时渲染	❌ 需用插件打开
复杂度	高（WebSocket 中继）	低（直接生成文件）
国内网络	需代理访问 Figma	全本地，无网络依赖

建议：

• 日常架构图/流程图 → drawio-mcp（简单快速）
• 设计稿/高保真原型 → Figwright（Figma 功能更强）

---

八、总结

本文完整记录了在 Windows 11 上搭建 Trae Work + drawio-mcp 的过程，重点解决了两个关键问题：

1. npm registry 配置冲突：用户级 .npmrc 覆盖了全局 npmmirror 配置，导致国内无法访问官方源
2. Node.js 22 兼容性：global.navigator 在 Node 22 中变为只读 getter，需要用 Object.defineProperty 绕过

搭建完成后，你可以通过自然语言让 AI 自动生成架构图、流程图，无需打开任何绘图软件。生成的 .drawio.svg 文件可以直接在 Trae 或 VSCode 中预览和编辑。

---

附录：相关资源

• MCP 官方文档：https://modelcontextprotocol.io/
• drawio-mcp GitHub：https://github.com/Sujimoshi/drawio-mcp
• drawio-mcp npm：https://www.npmjs.com/package/drawio-mcp
• Draw.io 官网：https://www.diagrams.net/
• Anthropic MCP 博客：https://www.anthropic.com/engineering/model-context-protocol

---

本文发布于 CSDN，转载请注明出处。