12.2K Star，让 AI 一句话画图

ahello

简介

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

如果你经常需要画架构图、流程图或 UML 图，next-ai-draw-io 是一个非常值得关注的开源工具。这个项目由 Dayuan Jiang 开发，是一个基于 Next.js 的 Web 应用，它将 AI 能力无缝融合到 draw.io（diagrams.net）图表编辑器中，让你可以通过自然语言指令直接创建和编辑图表，大幅提升图表绘制效率。

与传统拖拽绘图不同，next-ai-draw-io 支持 一句话描述你的需求，例如生成云架构图、流程图，甚至是可爱的草图，AI 会根据你的提示自动生成或修改图表。更重要的是，生成的图表仍然保留为 draw.io 可编辑的格式，你可以像平时一样手动调整细节，结合 AI 与人工共同完善作品。

该项目支持多种 AI 模型提供商，包括 AWS Bedrock、OpenAI、Anthropic、Google AI、Azure OpenAI、Ollama 等，可以按需配置 API 密钥进行智能绘图。它还具备版本历史记录功能，方便你随时回溯或恢复图表的某个版本。

从实际使用者反馈来看，这个工具在社区中获得了大量关注与好评，Star 数量快速增长，说明它确实在图表自动化领域拥有实用价值。如果你是开发者、架构师或产品经理，希望提升图表绘制效率，这个项目会是一个非常实用的选择。

核心特征

• 利用大型语言模型创建图表： 通过自然语言命令直接创建和操作 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 项目地址文末免费领取
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.给我画一只可爱的猫。

开源地址

扫码下载