next-ai-draw-io: AI集成draw.io的图表生成与编辑工具

先上效果图！👇

你有没有过这种经历——脑子里明明已经有完整的流程图了，可一打开绘图工具，手就开始忙活：拉方框、对齐、连线、改文字、补图标、调布局……一个本来10分钟能讲清楚的事儿，最后花了1小时还没画顺眼。

更崩溃的是，需求一改、老板一看、技术方案一调整，都得重画。这时候，你是不是特别希望有个工具：你说一句“帮我画个用户登录+MFA+会话管理的流程图”，它就能直接出图；再说一句“把数据库单独拆出去，顺便标一下缓存层”，它还能继续改？

最近我发现了一个开源项目，刚好就在解决这个问题：next-ai-draw-io。
它不是“给你一个AI聊天框自己折腾”，而是把AI和draw.io真正融合在一起。你可以直接聊天画图、改图、看历史版本，甚至能接入Claude、Cursor、VS Code这类Agent工作流里，当成一个会出图的外接大脑。

截至2026年5月23日，它在GitHub上已拿到29.6k Star，最新版本是2026年5月21日发布的0.4.16。

一、它到底解决什么痛点？

很多画图工具的问题不是“不能画”，而是太依赖手动操作——你本来是想用它表达想法，最后却把大量时间花在了排版上。

next-ai-draw-io的思路很直接：让你先说清楚，再让AI把图做出来。
它底层仍然基于draw.io的图形引擎，所以生成的不是“像图而已”的截图，而是可以继续编辑、迭代的矢量图。

这点很关键！因为不少AI画图产品，第一次看很惊艳，第二次要改就痛苦了。
但做方案图、业务图、架构图的人都知道：真正有价值从来不是“第一次生成”，而是“第十次修改还能不能接着干”。

二、它能做什么？不止是画几个框

看完它的README，我发现这个项目做得比想象中完整。它不只是“文本生成图”，而是一套围绕图表生产的工作流：

• 用自然语言创建和修改draw.io图表
• 上传现有图片，让AI复刻并增强
• 上传PDF或文本文件，从资料中提炼内容再出图
• 支持查看图表历史版本，方便回退
• 边聊天边迭代，不满意就继续改
• 对云架构图有专门支持（AWS、GCP、Azure等）
• 支持animated connectors，适合做展示感强的结构图

它README里的示例也很接地气：

• 画Transformer架构图
• 画聊天应用的RAG架构图
• 画React+AWS的认证流程
• 甚至还能顺手画只猫🐱

定位很清楚：既能干正经活，也保留了足够低的上手门槛。

三、最值钱的不是“能画图”，而是“能进入工作流”

现在“AI能生成点什么”已经不稀奇了。我更看重的是：它有没有真的融入日常工作流程。

next-ai-draw-io有三个地方我觉得特别实用：

1. 不是一次性生成，而是可持续修改

你不用每次从零开始。第一次出草图，第二次调结构，第三次补节点，第四次换成汇报版式……更像在带一个会画图的助手，而不是在抽卡。

2. 支持MCP，可接入Agent环境

项目已提供MCP Server，能接入Claude Desktop、Cursor、VS Code，甚至Claude Code CLI。
这意味着以后让Agent帮你写方案、拆需求、整理架构时，它不只是输出文字，还能顺手把图一起生成，并实时出现在浏览器里。

文字、结构、图表开始变成一条流水线——这不是“AI画图工具”，而是接近真正的生产工具。

3. 模型和部署方式开放

支持的模型很多：OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、DeepSeek等，还默认支持AWS Bedrock。
部署方式也灵活：在线Demo、桌面应用、Docker本地跑、Vercel/Cloudflare Workers部署……不管你是普通用户、开发者还是想团队自建，路都铺好了。

四、适合谁用？

如果你只是偶尔画一张简单流程图，可能不需要专门换工具。
但下面这几类人，会觉得它明显提效：

• 常写技术方案、系统设计、接口流程的人
• 做产品、运营、咨询，需要把复杂逻辑讲清楚的人
• 习惯用Claude、Cursor、Copilot等Agent工具串联工作流的人
• 想把“文档整理”升级为“文档+图表一起生成”的人

尤其是最后一类：很多时候卡住沟通的不是你没想法，而是你只有文字，没有一张能让别人秒懂的图。

五、怎么上手？门槛没你想的高

项目提供了几种入门方式，最省事的有两种：

第一种：直接试在线Demo
不折腾环境，进去就能玩。支持自带API Key，数据只存本地浏览器。

第二种：下载桌面版
已提供Windows、macOS、Linux版本，免去自部署的麻烦。

如果你想自己折腾，也可以走开发者路线：

git clone 项目
npm install
复制 env.example 为 .env.local
npm run dev
# 浏览器打开 http://localhost:6002

若要接入Agent工作流，README里有MCP Server配置方式，一行命令即可启动：

npx @next-ai-drawio/mcp-server@latest

接通后，玩法会比单独打开网页丰富得多。

六、用之前，先想清楚一件事

不要把它当成“自动替你思考”的工具。
它更像一个帮你把已知想法快速整理成图的工具——你思路越清楚，它给你的结果就越好。

比如，别只说“帮我画个系统图”，尽量说清楚：

• 这是业务流程图、技术架构图还是部署图？
• 核心模块有哪些？
• 模块之间怎么连接？
• 偏向汇报展示，还是工程实现？

你给的是结构化需求，它返回的就不是“差不多”，而是“能直接拿去用”。

七、最后说结论：这不是玩具，是真能省时间

这个项目没停在“AI+白板”的概念层面，而是真的往可编辑、可集成、可部署的方向走。
这三件事一旦同时成立，它就不再只是个Demo，而是一个能进入日常工作的工具。

如果你经常画流程图、架构图、业务图，或者已经在用Agent帮你写东西、做分析、搭方案，那next-ai-draw-io很值得你抽20分钟试试。

很可能试完后，你会开始不想再手动画那么多框了。✨