在日常开发中，技术文档的架构图、时序图、流程图绘制一直是高耗时且低创造性的工作。本文将深度解析一款开源项目 TopBeeAi Draw，它通过将 LLM 与 draw.io 深度集成，实现了用自然语言描述即可自动生成专业技术图表的能力。文章将重点分析其技术架构、AI Tool Call 设计模式以及多模型接入方案。

在线体验：TopBeeAI - 医学科研AI智能写作平台 | 文献综述·SCI论文·科研绘图·基金申请 登录后 点击  AI绘图工具 -> 高级流程图绘制 

---

一、项目概览

技术栈

层级	技术选型
前端框架	Next.js 16 (App Router) + React 19
样式方案	Tailwind CSS 4 + Radix UI + Lucide Icons
AI SDK	Vercel AI SDK v6 (ai + @ai-sdk/*)
绘图引擎	draw.io (react-drawio 封装)
图表格式	draw.io XML (mxGraph)
数据压缩	pako (zlib/gzip/deflate)

核心能力

• 自然语言描述 → 专业图表生成（流程图、架构图、时序图、ER 图、思维导图等）
• 对话式图表编辑（”把用户服务改成蓝色”、”在第 2 步和第 3 步之间插入一个审批节点”）
• 截图/PDF 上传 → AI 复刻图表
• 图表版本快照与历史回溯
• MCP Server 形态，可被 Claude Desktop、Cursor、VS Code 调用

---

二、架构设计：AI 与绘图引擎的交互模型

2.1 整体架构

1. 用户浏览器
2. ├── Chat Panel (useChat / AI SDK)
3. │ ├── 用户输入 → POST /api/chat → LLM Stream
4. │ └── LLM 返回 Tool Call → 客户端执行绘图操作
5. ├── DiagramContext (React Context)
6. │ └── chartXML 状态 → react-drawio iframe 渲染
7. └── localStorage 持久化
8. ├── 对话历史
9. ├── 图表 XML
10. └── 版本快照（最多 20 个）

核心设计思想：LLM 不直接操作 DOM，而是通过 Tool Call 生成符合 draw.io XML Schema 的结构化数据，由客户端统一处理后注入嵌入式 iframe。

2.2 三种 AI Tool 的职责划分

项目定义了三种独立的 AI Tool，分别对应不同的绘图场景：

1. display_diagram — 全量替换

用于初次生成图表，或需要整体重新布局的场景。AI 生成完整的 mxCell XML 节点集合，客户端用 wrapWithMxFile() 包裹为合法的 mxfile 结构后替换当前图表。

1. // 核心处理流程
2. const wrappedXml = wrapWithMxFile(mxCells) // 包裹 mxfile/root 结构
3. const fixedXml = autoFixXml(wrappedXml) // 自动修复常见 XML 问题
4. setChartXML(fixedXml) // 注入 iframe

2. edit_diagram — 精确节点编辑

用于增量修改场景，是最体现技术功力的部分。基于 draw.io 的 mxCell ID 体系，AI 通过 JSON 描述具体的编辑操作（修改属性、添加子元素、删除节点等），避免对 XML 做脆弱的正则替换。

1. {
2. "operations": [
3. { "action": "update", "cellId": "3", "style": "fillColor=#1E90FF" },
4. { "action": "add", "parentId": "1", "mxCell": "<mxCell .../>" },
5. { "action": "delete", "cellId": "5" }
6. ]
7. }

3. append_diagram — 续写补充

当 LLM 单次输出超出 token 限制导致 XML 被截断时触发。客户端检测 isMxCellXmlComplete() 判断是否截断，若截断则自动发起续写请求（最多重试 2 次）。

2.3 XML 处理管线

1. LLM 输出 (裸 mxCell)
2. → jsonrepair (修复截断 JSON)
3. → validateMxCellStructure (校验结构)
4. → autoFixXml (自动修复)
5. → wrapWithMxFile (包裹标准格式)
6. → 注入 draw.io iframe

这套管线保证了即使 LLM 输出存在小幅偏差（这在长文本生成中极为常见），系统依然能稳定产出合法可渲染的图表。

---

总结

TopBeeAi Draw 是一个设计思路清晰的开源项目——它没有重新发明绘图引擎，而是在成熟的 draw.io 之上叠加了 AI 交互层。这种”AI 增强已有工具”的思路，比起从零构建 AI-Native 绘图工具，在实用性和生态兼容性上都有天然优势。

对于经常需要绘制技术图表的开发者和架构师而言，这个工具能显著减少”画图”这种低创造性的机械劳动，把精力真正花在”画什么”而非”怎么画”上。