Claude Code CLI 集成 Next AI Draw.io 指南
通过 MCP 让 Claude 成为你的智能图表助手
目录
系统架构与数据流向
┌─────────────────────────────────────────────────────────────┐
│ 你的电脑 │
│ ┌─────────────────┐ ┌─────────────────────────────┐ │
│ │ Claude Code │────>│ @next-ai-drawio/mcp-server │ │
│ │ CLI (客户端) │ │ (运行在你本地的 MCP 服务) │ │
│ │ │<────││ │ │
│ └─────────────────┘ │ • 嵌入式 HTTP 服务器 (:6002) │ │
│ │ • 处理图表操作 │ │
│ │ • 管理浏览器会话 │ │
│ └─────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────┐ │
│ │ 你的浏览器 │ │
│ │ (实时显示图表预览) │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘详细数据流向
Claude Code CLI MCP Server (本地) 外部服务
│ │ │
│<────── stdio ──────────>│ │
│ (本地进程间通信) │ │
│ │<──── HTTP :6002 ──────>│
│ │ (本地嵌入式服务器) │
│ │ │
│ │<─── 浏览器 WebSocket ──>│
│ │ (localhost 实时预览) │
│ │ │
│<──── Anthropic API ────>│ │
│ (云端 Claude 模型) │<── embed.diagrams.net ─>│
│ │ (draw.io UI 可选自托管) │各组件说明
| 组件 | 提供者 | 运行位置 | 作用 |
|---|---|---|---|
| Claude Code CLI | Anthropic | 你的电脑 | AI 客户端，接收你的指令 |
| MCP Server | Next AI Draw.io | 你的电脑 | 本地服务，处理图表操作 |
| AI 模型 (Claude) | Anthropic API | 云端 | 理解你的自然语言描述 |
| draw.io UI | diagrams.net | 浏览器 | 渲染和编辑图表 |
安装步骤
1. 前提条件
- 已安装 Claude Code CLI
- 已配置 Anthropic API Key
- Node.js 环境（用于运行 npx）
2. 添加 MCP Server
运行以下命令将 Next AI Draw.io 添加到 Claude Code：
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest这会修改 Claude Code 的配置文件，添加 MCP 服务器配置。
3. 验证安装
配置完成后，重启 Claude Code CLI，你应该能看到 drawio 工具可用。
使用方法
基本流程
-
启动 Claude Code
cd ~/Documents/diagrams # 进入你想保存图表的目录 claude -
让 Claude 创建图表
创建一个用户登录流程的流程图，包含登录、MFA 验证和会话管理 -
图表自动在浏览器打开
- MCP Server 会启动本地 HTTP 服务器（默认端口 6002）
- 浏览器自动打开并显示实时预览
- 你可以看到 AI 逐步构建图表的过程
-
导出图表
将当前图表导出为 login-flow.drawio
支持的图表类型
- 流程图 (Flowcharts)
- 云架构图 (AWS/GCP/Azure)
- 系统架构图
- UML 图
- 网络拓扑图
- 动画连接器图表
自然语言示例
"创建一个 AWS 架构图，包含 VPC、EC2 实例、RDS 数据库和 S3 存储桶"
"画一个 Transformer 模型架构图，要有动画连接线"
"基于我上传的 PDF 文档生成一个流程图"
"修改刚才的图表，把数据库从 MySQL 改成 PostgreSQL"MCP Server 提供的工具
| 工具 | 功能 |
|---|---|
start_session |
打开浏览器，启动实时图表预览 |
create_new_diagram |
从 XML 创建新图表 |
edit_diagram |
通过 ID 操作编辑图表（更新/添加/删除元素） |
get_diagram |
获取当前图表的 XML |
export_diagram |
保存为 .drawio、.png 或 .svg 文件 |
文件保存位置
当你让 Claude 导出图表时，文件路径由你指定：
| 路径类型 | 示例 | 保存位置 |
|---|---|---|
| 相对路径 | ./diagrams/my-chart.drawio |
相对于当前工作目录 |
| 绝对路径 | /Users/xxx/Documents/chart.drawio |
指定位置 |
| 仅文件名 | my-chart.drawio |
当前工作目录 |
建议：在启动 Claude Code 前先 cd 到目标目录，这样相对路径就能保存到正确位置。
配置选项
环境变量
| 变量 | 默认值 | 说明 |
|---|---|---|
PORT |
6002 | MCP Server HTTP 端口 |
DRAWIO_BASE_URL |
https://embed.diagrams.net | draw.io UI 的基础 URL |
自定义端口
如果 6002 端口被占用：
# 方法一：MCP Server 会自动尝试 6003-6020
# 方法二：手动指定端口
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest然后在配置中添加环境变量：
私有部署（企业环境）
如果需要使用自托管的 draw.io：
使用 Docker 自托管 draw.io：
docker run -d -p 8080:8080 jgraph/drawio隐私与安全
- ✅ MCP Server 完全运行在本地，不依赖外部服务
- ✅ 你的 API Key 只在 Claude Code 配置中，用于调用 Anthropic API
- ✅ 图表数据 在本地处理
- ⚠️ 默认 draw.io UI 从
embed.diagrams.net加载（可配置自托管）
故障排除
端口被占用
MCP Server 会自动尝试 6003-6020 端口，或手动设置 PORT 环境变量。
“No active session” 错误
先调用 start_session 打开浏览器窗口，或让 Claude 自动启动会话。
浏览器不更新
检查浏览器 URL 是否包含 ?mcp= 查询参数，这是 MCP 会话 ID，用于连接浏览器和服务器。
相关链接
- 项目主页: https://next-ai-drawio.jiang.jp/
- GitHub: https://github.com/DayuanJiang/next-ai-draw-io
- MCP Server 文档: https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server
- Claude Code 文档: https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview
总结
通过 MCP 协议，Claude Code CLI 与 Next AI Draw.io 实现了无缝集成：
- 自然语言输入 → Claude 理解你的需求
- AI 生成图表 → MCP Server 处理图表操作
- 实时浏览器预览 → 直观查看生成结果
- 本地文件导出 → 保存为标准 draw.io 格式
这让 Claude 成为了一个强大的"图表助手"，特别适合快速原型设计、架构文档配图和代码可视化。