代码库链接：https://github.com/DayuanJiang/next-ai-draw-io
体验Demo链接：https://next-ai-drawio.jiang.jp/zh

一、这个工具到底能干嘛？

这个叫next-ai-draw-io的工具，是用Next.js做的网页应用，核心就是把大语言模型和draw.io这个绘图工具绑在了一起，解决的就是平时我们用draw.io手动画图又慢、又得琢磨怎么排版的麻烦事。

它具体能帮我们做这些事：

1. 用大白话就能生成图表：不用自己一点点拖元素，直接输入“帮我画一个公司员工入职流程”这种话，AI就能直接生成draw.io能打开的图表；
2. 支持多种文件上传：不管是你拍的手写图、已经画好的draw.io图表，还是PDF、纯文本文件，上传之后AI都能给你复刻出来，还能优化成结构更清晰的规范图表；
3. 能追溯图表的历史版本：AI帮你修改前后的所有图表版本都能保存，后期想回看之前的版本，或者恢复到某一版，都没问题；
4. 可以跟AI互动着改细节：如果生成的图表不满意，不用重新写指令，直接在聊天框里跟AI说“把这里的连接线改成动态的”，就能一步步优化到满意。

另外提一嘴，这个工具部署起来也灵活，Docker、Vercel、Cloudflare Workers这些平台都能上，而且不挑AI模型，OpenAI、Anthropic、谷歌AI、AWS Bedrock这些主流的都能兼容。还有个MCP Preview功能可以试用，不过目前还在稳定测试阶段，可能会有小bug~

二、给大家看两个实际例子

1. 生成指令：绘制一个ReAct范式的流程图

从演示视频里能看到，一开始AI生成的连接线，对接的位置有点小问题。后来我直接跟AI说要改这个地方，还让它把普通连接线换成动态的，一轮互动下来就搞定了（当然啦，你想自己手动微调也完全可以）。

2. 生成指令：Give me a animated connector diagram of transformer’s architecture.

结果就是下面这张图，效果还是很在线的。

三、它到底是怎么实现“AI画图”的？

其实核心逻辑不复杂，就是把draw.io的图表格式和AI的文本生成能力结合在了一起，具体分两步给大家讲明白：

1. 先说说它的技术底子

• 前端界面：用Next.js搭的网页，然后把react-drawio这个组件嵌了进去，我们看到的可视化绘图界面、网页跳转这些，都是靠它实现的；
• AI交互部分：用了Vercel AI SDK这个工具，不管是调用哪个厂商的AI，都能统一对接，还能实现AI的流式响应（就是不用等半天，能看到内容一点点出来）；
• 核心关键：XML格式：大家可能不知道，draw.io里画的图表，背后其实是一串XML代码，图表里的每个元素、位置、样式、连接线，都存在这串代码里，AI就是靠和这串XML打交道，才能实现画图和改图的。
  

2. AI画图的完整流程，一步一步给你拆

1. 先理解你的需求：AI先接收你输入的大白话指令，或者解析你上传的图片、文档，搞明白你到底想画个啥样的图表；
2. 生成符合规则的XML代码：AI会按照draw.io的XML语法，把你的需求翻译成一串规范的XML文本，这串文本就是图表的“底层密码”；
3. 渲染成可视化图表+后续修改：生成的XML代码会传给react-drawio组件，然后就会变成我们能看到的可视化图表了。之后你想改细节，AI也不用重新生成整个XML，只需要针对现有代码做局部修改就行；
4. 复杂图表会“先思考再画图”：如果是比较复杂的图表，AI会用“思维链”的方式，先琢磨清楚“先画核心元素，再连连接线，最后加样式”这个逻辑，再生成XML，这样画出来的图表结构会更合理，不容易出错（就像开头视频里展示的那样）。

四、我的使用体验和小建议

1. 先说说实际用起来怎么样

我简单体验了一下，最大的感受就是：效果好坏，跟你用的AI模型关系特别大。如果用那些能力强的模型，一次性生成满意图表的概率很高。当然啦，就算生成的有点小瑕疵，在此基础上手动微调一下，也比从零开始画快太多了，还要啥自行车呢？

2. 给大家几个小建议，避坑又高效

1. 优先选这些强模型：Claude Sonnet 4.5、GPT-4o、Gemini 2.0、DeepSeek R1/V3.2这些，生成的XML格式更精准，处理复杂需求的能力也更强，不容易出格式错误；
2. 注重隐私的话，选本地部署的AI模型：如果要画的图表涉及公司机密、敏感信息，别用在线AI，选本地部署的模型更安全；
3. 指令要明确，复杂图表分步来：输入指令的时候，最好说清楚“要画什么类型的图表+核心要包含哪些元素+想要什么样式”，比如“帮我画一个电商订单支付的流程图，包含下单、支付、风控、发货四个步骤，用动态连接线”。如果是特别复杂的图表，别想着一步到位，分几次跟AI互动修改，效果会更好。