再见了，Visio！一键生成各类复杂专业图表

作为一名开发者，在编辑技术文档的时候，为了更加直观介绍底层原理，经常需要画各种架构图、流程图。

明明脑子里有大致的想法，但用 Draw.io 或者 Visio 工具时，一个框一个框地拖，一根线一根线地连，反复调整位置，实在是耗时耗力。

无独有偶，前几天在 GitHub 上发现了一个叫 next-ai-draw-io 的开源项目，把 AI 能力整合进了 Draw.io。

当时我第一反应是，这不就是那种自动生成模板的功能吗？结果点进去看了看，发现完全不是那么回事。

它真正妙的地方在于，我们可以直接用聊天的方式来画图。

比如说 “帮我画一个电商系统的架构图，包含用户服务、订单服务和支付网关”。

它能完全理解我们的意思，直接一键生成对应的 Draw.io 图表，第一次看到画的图表有些框内文字重叠在一起。

但没关系，我们还能继续对话修改：“架构图当中有些框内的文字出现了重叠，请调整修复”，瞬间就调整完成。

聊天式画图，不用再拖拖拽拽

正如上面的演示，我们只需自然语言描述想要的图表结构，AI 就会把这些描述转换成 Draw.io 的 XML 格式，然后直接渲染出来。

它的底层就是用到大语言模型来理解我们的需求，目前已支持 OpenAI、Google、Anthropic 等主流 AI 模型供应商。

对比传统的画图工具，我们得先想好用什么形状，然后找到对应的图标，拖到画布上，再一个个连线。

而这个工具，我们只需要把脑子里的想法说出来就行了。

比如 “画一个 AWS 架构图,用户通过 CloudFront 访问前端，前端调用 API Gateway，后端用 Lambda 处理请求”，这么一段话下去，图就出来了。

更实用的是，它支持对图表进行局部修改。如果你只想调整某个部分，不用重新生成整个图，AI 会定向编辑对应的 XML 片段。

这个设计相当巧妙，既保证了修改的精准度，也避免了每次都要等 AI 重新生成整张图的尴尬。

上传图片就能复制，手绘草图也能识别

除了文字描述之外，这个工具还可以根据我们上传的图片来生成图表。

我们可以把现有的架构图截图上传，或者手绘的草图拍照上传，AI 会识别里面的元素和关系，然后生成对应的 Draw.io 版本。

这个功能对于需要把白板上的讨论结果转成正式文档的场景特别有用。

想象一下，当开完技术研讨会，拍下老大在白板上画下的架构草图，只需上传一下，一份标准的架构图就出来了。

其他实用功能

版本历史：每次修改都会自动保存，可以随时查看之前的版本，也能一键恢复到任何历史记录；

AWS 架构图支持：专门优化了 AWS 相关的图标和布局，非常适合画云架构图；

动画连接线：可以给连接线加上动态效果，做演示的时候更直观；

多 AI 模型支持：除了 OpenAI，还支持 Google、Anthropic、Ollama 等多家的模型，建议用 Claude Sonnet 4.5 模型。

安装过程不复杂

这个项目是基于 Next.js 开发的，安装起来比较简单，开发者提供了两种使用方式。

一种是在本地安装使用，另一种部署到 Vercel 平台，在 README 文件上提供了部署入口。

如果不想动手部署，还可以直接访问开发者已经部署好的演示站点使用。

写在最后

对于经常需要画技术图表的朋友来说，这个工具确实能省不少时间。尤其是那种需要频繁修改、迭代的场景，用对话的方式调整图表,比手动拖拽快多了。

不过它也有一些局限。毕竟 AI 生成的图表不一定完全符合你的审美，有时候还是需要手动微调。

另外，复杂的图表可能需要多轮对话才能达到理想效果，描述得越详细，生成的结果越准确。

总的来说，如果你经常要画流程图、架构图之类的东西，可以试试这个工具。

GitHub 项目地址：https://github.com/DayuanJiang/next-ai-draw-io

今天的分享到此结束，感谢大家抽空阅读，我们下期再见，Respect！