把 draw.io 扔了!这个开源项目一句话生成架构图!已24.4k stars!

问AI · AI如何理解自然语言生成专业图表?

做开发、产品、运营的小伙伴,谁没被画图折磨过?

想画个微服务架构图,对着 Draw.io 满屏按钮一脸懵;

产品手绘的业务流程图,要手动描成标准矢量图,一调就是半小时;

改图时手滑删了关键元素,找不回原版本只能重画……

图片

要是能直接跟 AI 说一句

 “画个电商下单流程图,包含下单、支付、发货、确认收货”

AI 就直接生成专业的 Draw.io 图,还能对话式改图,是不是想想都爽?

今天就给大家安利一个开源项目 ——next-ai-draw-io

一句话生成专业的架构图表!

再也不用手动拖框了,说句话图就出来了

这绝对是最核心的功能,也是最颠覆的一点。

以前用draw.io,你得自己找图标、拖元素、对齐、连线,一个复杂点的架构图,没俩小时根本搞不定。

现在呢?你只要在左边的聊天框里,用大白话描述你的需求就行。

图片

下面是官方的一些例子

图片
图片
图片
图片

它的底层技术,本质是把 AI 大模型和老牌专业绘图工具 draw.io 做了一次 “无缝嫁接”

它没有从零造一个画图引擎,而是利用 draw.io 原生的 XML 图表格式 —— 这种格式会精确记录每个图形的位置、样式、连接关系等信息 —— 让 AI 学会 “读懂并生成” 这段 XML 代码。

当你用自然语言描述 “画一个带数据库的用户注册流程图”,或是上传一张手绘架构图时,AI 会先理解你的业务逻辑和视觉需求,再输出符合 draw.io 规范的 XML 片段

最后通过 react-drawio 库把这段代码渲染成可拖拽、可编辑的可视化图表;

图片

同时它用 Next.js 搭建前端界面保证流畅体验,通过 Vercel AI SDK 对接不同大模型,确保生成的图表稳定可用,甚至封装成可嵌入 VS Code、Cursor 等编辑器的 MCP 服务,让 “用对话画图” 变成开发和设计 workflow 里的顺手工具。

5 分钟上手,三种方式随便选

方式一:在线试用(零门槛,打开就用)

如果你只是想试试水,不用装任何东西,直接访问官方的演示站点就行:

https://next-ai-drawio.jiang.jp/zh

方式二:Docker 一键部署(推荐,本地用最方便)

要是想长期用,或者担心数据安全,本地部署也超级简单,一条命令就行:

docker run -d -p 3000:3000 \
-e AI_PROVIDER=openai \
-e AI_MODEL=gpt-4o \
-e OPENAI_API_KEY=你的API Key \
ghcr.io/dayuanjiang/next-ai-draw-io:latest


执行完之后,打开浏览器访问 http://localhost:3000 就能用了,不用折腾任何环境依赖,一键搞定。

方式三:源码部署(适合二次开发)

如果你想自己改改功能,或者做二次开发,也可以直接拉源码跑:

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
# 编辑.env.local配置你的API信息
npm run dev


启动之后访问 http://localhost:6002 就可以了。

项目地址:

https://github.com/DayuanJiang/next-ai-draw-io


0、国产版NotebookLM效果炸裂!我用它来分析了特朗普对伊朗的宣战声明,有一些发现...

1、真实测评!号称“预测万物”,盛大3000w投资,中科大学生的AI 开源项目:MiroFish!

2、小白也能懂!通俗介绍一下Deepseek最新开源进展:Engram!让AI也有了“记忆”!

3、1.5W星!开源就火爆的免费量化项目:Lean!

4、华为开源了个 “图片处理小能手”!OCR时延 160ms,落地场景超实用!

5、豆包手机用不了?可以试试智谱这个开源项目,打造自己的AI手机!

6、中美AI大模型激战美股!Alpha Arena 1.5来了!看看中美模型表现如何!

7、逼迫巨头降价80%!AI桌面智能体Openwork火了!(内附地址)

8、全网各种好用的skill仓库整理一下(编程、科研、写作等等)

9、LangChain 发布 Deep Agents:自主智能体框架

10、深度解构 | AI 视频生成模型Seedance 2.0 的爆火

如果你们喜欢作者的文章,希望欢迎关注、点赞和分享!

作者声明:个人观点,仅供参考