我试了这个开源 AI 作图工具后，再也不想打开 draw.io 了…… （实测真香）

[!info] 阅读导览
核心流程：① 一句话描述需求 → ② AI 生成 draw.io 图表 → ③ 自然语言调整优化 → ④ 版本历史随时回滚 → ⑤ 导出或演示。文章依次介绍核心能力（1）、适用角色（2.0）、两种部署方式（2.1）、与商业工具对比（2.2）。

flowchart LR
    A[一句话描述需求] --> B[AI 生成 draw.io 图表]
    B --> C[自然语言调整优化]
    C --> D[版本历史随时回滚]
    D --> E[导出 / 动画演示]
    F[上传图片 / PDF / 文档] --> B

Draw.io 作为一款功能强大的开源图表绘制软件，大家日常的开发工作中可能都有了解或使用过。

我想对大部分的开发者来说，都不太喜欢在工作中去画各种流程图结构图等等之类的，虽然 Draw.io 已经提供非常全面的图表类型支持、直观的操作界面和出色的跨平台兼容性，但是涉及到复杂的结构图，以及对于所需要的画图组件使用还是具备一定的入门门槛，可能连个线能调半小时，流程一改版又得重排布局！

但最近我发现了个一经发布，热度就一路飙升的开源项目 next-ai-draw-io，它把 AI 能力 和 draw.io 引擎 做了完整的融合。

next-ai-draw-io项目界面
在继承了 draw.io 本身强大的画图能力下，让我们只要一句话描述需求，AI 就能自动生成、调整、优化所需要的图表，让我们不再需要去拖组件、对齐框以及处理分层逻辑等，让我们可以聚焦在具体的逻辑或内容中去。

GitHub热度图表
GitHub 热度暴涨

1. 核心能力

1.1. 多模型适配

目前项目支持 AWS Bedrock (default)、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama、OpenRouter、DeepSeek、SiliconFlow，其中除 AWS Bedrock 和 OpenRouter 外，所有提供商均支持自定义端点。

所有的模型都可以在 .env 中进行配置。

对于云架构图，它还针对 AWS / GCP / Azure 做了自适应优化，比通用型作图工具识别得更准。

1.2. 自动版本记录

每一步修改都会保留历史版本，随时回滚。不再用 “xxx-final.drawio” “xxx-final-v2.drawio” “xxx-final-really-final.drawio” 这样折磨。

1.3. 自然语言画图

有针对架构设计的 “AWSArchitecture” 场景：

我这边直接输入：根据电商场景，帮我画一个云端的系统架构图

电商云端系统架构图示例

有针对流程图的 “Replicate Flowchart” 场景：

我这边直接输入：画一个支付系统的业务流程图

支付系统业务流程图示例

有针对创意绘画的 “CreativeDrawing” 场景：

我这边直接输入：帮我画一个猫咪

猫咪创意绘画示例

1.4. 内容提取画图

不止从文本生成图，还能上传：图片、PDF、纯文本文档，可以使用 “Paper to Diagram” 场景。

AI 会自动提炼内容结构，生成对应图表。这对技术文档、产品流程、教学示意图特别省时间。

我这边上传了一个 DeepSeek 完整的技术报告文档，让他根据文件内容画个图表。

技术报告文档解析中

可以看到效果还是很不错的，解析生图的速度还是很快的。

文档解析生成图表结果

1.5. 动态连接器

可以通过 “Animated Diagram” 场景构建动画连接线，让架构逻辑更清晰，演示时比静态图好理解很多。

通过我的输入：

创建一个新的动画连接器图，展示图神经网络（GNN）的架构

呈现了如下结果：

图神经网络架构动画演示

2. 适用于几乎所有技术角色

  • 云架构师：快速产出合规、标准化的云服务拓扑
  • 后端 / 全栈开发：写文档时秒出配图
  • 产品经理：改流程图不再重排布局
  • 教师 / 培训者：教学示意图非常省时

2.1. 部署方式

2.1.1. Docker 本地部署

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

或者使用环境变量文件：

cp env.example .env
# Edit .env with your configuration
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

2.1.2. 本地开发模式

克隆仓库：

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

安装依赖项：

npm install

配置 AI 提供商：

cp env.example .env.local

和 Docker 一样，配置你选用的模型的 key。

运行服务：

npm run dev

两种部署方式都可以。部署成功后，在浏览器中打开 http://localhost:3000（Docker 部署）或 http://localhost:6002（本地开发模式）就可以进行使用了。

应用界面展示

2.2. 和 Whimsical AI、Lucidchart AI 的差别？

能力 next-ai-draw-io 商业 AI 绘图工具
开源 是 否
私有化部署 支持 很多不支持
支持 9 家模型提供商 是 通常 1～2 家
图表版本历史 完整支持 部分限制
文档/PDF/图片解析 支持 有的需要付费
价格 免费 付费/订阅

实用性还是很强的！

2.3. 结语

如果你经常需要画技术图表，非常建议试试这个项目。设定的一个场景也是对准了技术人员最需要的那几个点。目前亲测之后，我已经不太想回到手动拖拽一点点画图的方式了！

作者使用体验分享

[!success] 核心要点

  • 一句话画图：自然语言直接生成 draw.io 图表，覆盖架构图、流程图、创意绘画
  • 多模型适配：支持 AWS Bedrock、OpenAI、Anthropic、DeepSeek、Ollama 等 9+ 家提供商
  • 内容提取：上传图片 / PDF / 文档，AI 自动提炼结构生成图表
  • 版本回滚：每一步修改自动记录历史版本，随时恢复
  • 部署灵活：Docker 一行命令或本地开发模式，均可私有化部署
  • 开源免费：Apache-2.0 协议，对比 Whimsical / Lucidchart 等商业工具更具性价比

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