在写技术文档、设计系统架构时，我们往往需要借助绘图工具，反复拖拽调整那些方框和线条，非常耗时，且常常打断思考的连贯性。有没有一种可能，我们只需要“描述”想法，一张清晰的图表就能自动呈现？
今天介绍的开源项目 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
构建高质量的技术交流社群，欢迎从事编程开发、技术招聘HR进群，也欢迎大家分享自己公司的内推信息，相互帮助，一起进步！
文明发言，以
交流技术、职位内推、行业探讨为主
广告人士勿入，切勿轻信私聊，防止被骗
点下方的“❤”支持我们，非常感谢！