2.7 万 Star!这个 AI 画图工具,产品经理和开发者都在用

2.7 万 Star！这个 AI 画图工具，产品经理和开发者都在用

不用拖拽、不用打开 draw.io，打一句话就能生成专业的架构图、流程图、数据可视化。初步尝试下来，从想法到图表的时间从几十分钟压缩到了几秒。

你是不是也这样？

每次要画架构图或流程图，都得折腾半天：

打开 draw.io，找组件、拖节点、连线条
调配色、对齐、间距，半小时过去了
改需求后整个图要重做
云架构图里找 AWS/Azure/GCP 图标找半天

我以前也经常这样。直到最近发现了一个开源项目，才意识到原来「画图」这件事可以用自然语言搞定。

一、Next AI Draw.io 是什么？

GitHub：DayuanJiang/next-ai-draw-io（2.7 万+ Star，2.9k Fork，Apache-2.0 开源协议）

在线体验：next-ai-drawio.jiang.jp

一句话介绍：一个用自然语言创建和编辑 draw.io 图表的 Web 应用。你只管描述，AI 帮你画图。

这个项目由 DayuanJiang 开发，核心技术栈是 Next.js + Vercel AI SDK + react-drawio，字节跳动豆包为演示站提供了 API 赞助。

核心特点：

特点	说明
自然语言画图	打一句话就能生成图表，不需要拖拽
图片还原	上传现有图表，AI 自动复制和增强
PDF/文本导入	上传文档，AI 从中提取内容生成图表
支持云架构图	专门支持 AWS、GCP、Azure 架构图
动画连接器	支持动态连接线，让图表更生动
多模型支持	OpenAI、Claude、Gemini、DeepSeek、豆包等
MCP 协议	可与 Claude Code、Cursor 等 AI 代理集成

二、它能画什么？

1. 技术架构图

Prompt：「生成一个 RAG 架构图，包含数据摄取、向量数据库、检索和生成模块」

2. 认证流程图

Prompt：「生成使用 React 和 AWS 的认证流程图，包含登录、MFA、会话管理」

3. 云架构图

Prompt：「生成 Serverless 架构图，使用 AWS Lambda、API Gateway、DynamoDB」

4. 概念模型图

Prompt：「可视化 Henry Chesbrough 的开放式创新模型」

5. 任意图形

Prompt：「给我画一只可爱的猫」

三、怎么用？

方法一：在线直接使用（零门槛）

打开 next-ai-drawio.jiang.jp
在聊天框里输入你想画的图
AI 实时生成，浏览器直接渲染

演示站有使用次数限制，你也可以点击设置图标配置自己的 API Key。

方法二：本地部署


        1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        # 克隆仓库
git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
 
# 安装依赖
npm install
 
# 配置环境变量
cp env.example .env.local
 
# 启动开发服务器
npm run dev
 
# 浏览器打开
http://localhost:6002

方法三：Docker 部署

项目提供了完整的 Docker 部署指南，适合团队内部部署。

方法四：MCP 集成（和 AI 代理联动）

如果你用 Claude Code 或 Cursor，可以通过 MCP 协议集成：


        1
2
        # 添加 MCP 服务器到 Claude Code
claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

然后在 Claude Code 里直接说：


        1
        帮我画一个用户认证流程图，包含登录、MFA、会话管理

图表会实时在浏览器中生成！

四、产品经理实战演示

场景 1：画一个产品架构图

传统做法：

打开 draw.io（5 分钟）
找组件、拖节点、连线（15 分钟）
调配色、对齐、间距（10 分钟）
总计：约 30 分钟

用 AI 的做法：

打开 next-ai-draw.io
输入：「生成一个产品架构图，包含用户端、API 网关、业务服务层、数据库层、AI 服务层」
等 10-30 秒，图表自动生成
总计：约 1 分钟

场景 2：根据 PRD 生成流程图

把 PRD 文档上传（支持 PDF 和文本文件），告诉 AI：


        1
        根据这份 PRD，生成用户注册的完整业务流程图

AI 会自动提取关键流程，生成对应的流程图。

场景 3：根据现有图表生成可编辑版本

有一张截图或 PDF 格式的架构图，想让 AI 帮你转成可编辑的 draw.io 格式？

直接上传图片，告诉 AI：


        1
        根据这张图，生成一个可编辑的版本

五、支持哪些 AI 模型？

项目支持多种 AI 提供商：

提供商	特点
字节豆包	演示站默认，注册 ARK 平台有 50 万免费 token
Claude	云架构图最佳选择（训练过 AWS/Azure/GCP 图标）
GPT-5.1	长文本生成能力强，适合复杂图表
Gemini 3 Pro	多模态理解好，图片还原能力强
DeepSeek	性价比高
OpenRouter	多模型聚合
SiliconFlow / ModelScope	国内可用

注意：生成 draw.io XML 需要较强的长文本生成能力，推荐用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1 等。

六、效果对比

场景	传统方式	AI 辅助
简单流程图	15-20 分钟	30-60 秒
技术架构图	30-60 分钟	1-3 分钟
云架构图	1-2 小时（找图标+排版）	2-5 分钟
概念模型图	20-40 分钟	1-2 分钟
根据文档生成	1-2 小时（阅读+提取+画图）	2-5 分钟

初步尝试下来，对于「快速出图、不需要像素级精确」的场景，用 AI 确实能大幅节省时间。

七、和传统画图的对比

维度	draw.io	Next AI Draw.io
操作方式	拖拽节点、连线	自然语言描述
学习成本	需要熟悉界面	会说话就行
出图速度	取决于熟练度	几秒到几分钟
云架构图	手动找图标	AI 自动生成，支持 AWS/GCP/Azure
动画效果	不支持	支持动态连接线
精细编辑	强（可精确调整）	弱（AI 生成后需手动调）
适合场景	精确定稿	快速出原型、头脑风暴

核心差异：draw.io 是「更好的画图工具」，Next AI Draw.io 是「让画图这层消失」。

八、适合谁用？

人群	推荐理由
产品经理	快速出产品架构图、流程图，不用等设计
技术管理者	团队架构图、技术路线图，几秒搞定
架构师	系统架构图、云架构图，AI 帮你搭骨架
前端/后端开发	数据流图、接口图、部署图
技术写作者	技术文档里的示意图，不用再打开画图工具

九、注意事项

限制 1：精细编辑能力有限

说明：AI 生成的图表是初稿，如果需要精确调整节点位置、颜色细节，还是需要在 draw.io 里手动编辑。

建议：先用 AI 出初稿，再手动微调。

限制 2：复杂图表需要多轮对话

说明：非常复杂的图表可能需要和 AI 多轮对话来调整细节。

建议：分步骤描述需求，先生成整体框架，再逐步补充细节。

限制 3：模型能力影响生成质量

说明：生成 draw.io XML 需要较强的长文本生成能力，小模型可能效果不佳。

建议：使用 Claude、GPT、Gemini 等大模型，效果最好。

十、总结

核心要点：

自然语言画图：打一句话就能生成图表，不需要打开任何画图工具
2.7 万+ Star 验证： Apache-2.0 开源协议，社区活跃
多模型多部署：支持主流 AI 提供商，可在线/本地/Docker/MCP 部署
适合快速出图场景：架构图、流程图、云架构图、概念模型

立即行动：

在线体验：next-ai-drawio.jiang.jp
Star 仓库：github.com/DayuanJiang/next-ai-draw-io
试试输入：「生成一个 RAG 架构图」
等 30 秒，拿回一张专业架构图

这是我目前的学习笔记，还在持续探索中。如果你也有用 AI 画图的实战经验，欢迎在评论区交流。

免责声明：本文内容仅为个人学习分享，提及的工具/服务仅限合法合规使用。该项目为 Apache-2.0 开源协议，遵守对应许可条款即可使用，如有侵权请联系删除。

感谢你的阅读。

如果这篇文章对你有帮助，欢迎：

点赞支持
分享给朋友
在评论区分享你的想法

关注「AI 工程化实战派」，不空谈虚概念，只输出务实干货。

期待和你的交流！