一款用AI自动绘制流程架构图的开源神器

在写技术文档、设计系统架构时，我们往往需要借助绘图工具，反复拖拽调整那些方框和线条，非常耗时，且常常打断思考的连贯性。有没有一种可能，我们只需要“描述”想法，一张清晰的图表就能自动呈现？

今天介绍的开源项目 Next AI Draw.io，替我们实现了这个想法。它将自然语言交互的能力融入我们熟悉的绘图环境，基于AI大模型，可以让我们通过对话来创建和修改图表。

简介

Next AI Draw.io是一个基于 Next.js 的 Web 应用程序，它将 AI 功能与 draw.io 图表集成在一起。用户可以通过自然语言命令和 AI 辅助可视化来创建、修改和增强图表。

核心特征

利用大型语言模型创建图表： 通过自然语言命令直接创建和操作 draw.io 图表。

基于图像的图表复制： 上传现有图表或图像，让AI自动复制并增强它们。

PDF 和文本文件上传： 上传 PDF 文档和文本文件，以从现有文档中提取内容并生成图表。

AI推理显示： 查看支持的模型（OpenAI o1/o3、Gemini、Claude等）的AI思维过程。

图表历史记录： 全面的版本控制，可跟踪所有更改，允许查看和恢复 AI 编辑之前的图表版本。

交互式聊天界面： 与人工智能实时沟通，优化图表

云架构图支持： 提供专门的云架构图生成支持（AWS、GCP、Azure）

动态连接线： 在图表元素之间创建动态动画连接线，以提高可视化效果。

快速开始

使用Docker运行（推荐）

如果在本地运行，最好的方法是使用 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

或者使用env文件：

cp env.example .env
# 编辑 .env 填写您的配置
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

在浏览器中打开
http://localhost:3000。

本地安装

1.克隆仓库：

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

2.安装依赖：

npm install

3.配置大模型提供商：

在根目录创建
.env.local文件：

cp env.example .env.local

编辑 
.env.local 并配置您选择的提供商：

将 
AI_PROVIDER 设置为您选择的提供商（
bedrock, 
openai, 
anthropic, 
google, 
azure, 
ollama, 
openrouter, 
deepseek, 
siliconflow）

将 
AI_MODEL 设置为您要使用的特定模型

添加您的提供商所需的API密钥


TEMPERATURE：可选的温度设置（例如 0 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置。


ACCESS_CODE_LIST 访问密码，可选，可以使用逗号隔开多个密码。

警告：如果不填写 
ACCESS_CODE_LIST，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。

4.运行开发服务器：

npm run dev

5.在浏览器中打开 
http://localhost:3000 查看应用。

演示

1.使用GCP图标生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。

2.使用AWS图标生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。

3.使用Azure图标生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。

4.给我画一只可爱的猫。

开源地址

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