15k star的开源项目 Next AI Draw.io：AI 加持下的图表绘制工具

上期和大家分享了我们精心打磨的协同AI文档 JitWord：

作为一名长期关注开源和AI技术的技术博主，我最近发现了一个非常有意思的开源AI项目 ------Next AI Draw.io。

它巧妙地将 AI 能力与 draw.io 图表工具结合，解决了很多人在绘制图表时的痛点。号称++只需要一句话，或者上传一个文件，就能生成各种你想要的图表。++

之前有很多粉丝问我如何画高质量的架构图，如何生成精美的流程图，现在我想说，使用 Next AI Draw.io就够了**。**

今天，我就带大家，来好好聊聊这个 github 上近 15k star 的AI项目。

同时，我在文章中会写完整的本地部署教程，即使你不懂代码，跟着我的步骤，也能轻松部署， ++让自己拥有一个会画各种图表的AI助手++****。

老规矩，先上地址。

++github地址：++****++https://github.com/DayuanJiang/next-ai-draw-io++

Next-AI-Draw.io 是什么

简单来说，Next AI Draw.io 是一个 AI 驱动的图表创建工具。它就像给强大的 draw.io 图表装上了一个AI大脑，让我们可以++通过自然语言与它交流，轻松完成图表的创建、修改和优化++。

在日常工作中，我们绘制图表时往往会遇到如下问题：

想画一个专业图表，却不知道从何下手，各种元素排版让人头疼；
已有一张手绘的草图或图片，想把它变成精美的图表，但是重新绘制又太费时间；
面对一份复杂的文档，想从中提取关键信息生成图表，手动整理效率低下；
使用专业图表工具时，记不住各种操作命令，操作起来不够流畅。

而 Next AI Draw.io 正是为解决这些痛点而来。它让我们可以用自然语言告诉 AI 我们想要什么样的图表，AI 会帮我们完成大部分工作，大大降低了图表制作的门槛和时间成本。

同时，AI画完之后，我们还能二次编辑，最终一键导出。

功能亮点

我总结了一下这个项目的亮点，供大家参考。

1. 支持 LLM 驱动的图表创建

我们可以直接用自然语言命令让 AI 创建和操作 draw.io 图表，不需要手动拖拽各种元素，对于不熟悉图表工具的人来说非常友好。

**2.**支持图片，PDF 和文本文件的上传

我们只需上传现有的图表或图片，AI 就能自动复制并增强它们，把一张不太规范的图变成专业图表。

同时支持PDF等文件上传，AI 会从这些文档中提取内容，生成相应的图表，这对于从大量文字中梳理逻辑关系非常有用。

3. 支持图表历史记录功能

能跟踪所有更改，让我们可以查看和恢复之前的版本，不怕误操作。交互式的聊天界面让我们能实时与 AI 沟通，不断完善图表。

值得一提的是，它对云架构图有专门支持，像 AWS、GCP、Azure 这些主流云平台的架构图都能很好地生成。还有动画连接器功能，让图表元素之间的连接更生动，可视化效果更好。

技术架构分析

要理解 Next AI Draw.io 的技术架构，我们可以从它的工作原理和项目结构两方面入手。

从工作原理来看，这款开源项目主要依靠三种技术：

Next.js 负责前端框架和路由，让整个应用能够顺畅地运行和跳转；
Vercel AI SDK（包括 ai 和 @ai-sdk/*）提供流式 AI 响应和多提供商支持，这是实现 AI 功能的核心；
react-drawio 则负责图表的表示和操作，让 draw.io 的功能能在应用中发挥。

而图表在这个应用中是以 XML 格式存在的，这种格式能被 draw.io 识别和渲染。当我们发出命令时，AI 会处理这些命令，然后生成或修改对应的 XML，从而实现图表的变化。

再看项目结构，它采用了 Next.js 的 App Router 架构：

app/

目录下有 API 端点和主页面，api/chat/ 是带 AI 工具的聊天 API 端点，page.tsx 是嵌入了 DrawIO 的主页面；
components/

里是各种 React 组件，像聊天面板、用户输入组件、历史查看器等都在这里；
contexts/

包含 React 上下文提供者，其中 diagram-context.tsx 负责全局图表状态管理；
lib/

目录有各种工具函数和辅助程序，ai-providers.ts 用于多提供商 AI 配置，utils.ts 则处理 XML 相关的操作；
public/

存放静态资源，包括示例图片等。

这样的架构设计，让整个项目层次清晰，各部分职责明确，便于维护和扩展。

核心技术栈清单

项目用到的核心技术栈，我总结了一下，大家在做项目的时候也可以参考：

Next.js 16.x

前端框架，负责页面构建和路由管理 🚀（暗示字节跳动，其很多产品使用类似的前端技术栈）
React 19.x

构建用户界面的 JavaScript 库 ⚛️（暗示 Facebook/Meta，React 的缔造者）
Vercel AI SDK

包括 ai 和 @ai-sdk/*，提供 AI 相关功能支持 🤖（暗示 Vercel 公司）
react-drawio

处理 draw.io 图表的 React 组件 📊
Docker

用于容器化部署 🐳
各种 AI 模型

如 OpenAI 的 gpt-4o、Anthropic 的 Claude 等 🔍（暗示谷歌、微软等在 AI 领域深耕的公司）

应用场景

Next AI Draw.io 的应用场景非常广泛：

对于程序员来说，可以用它快速绘制系统架构图、流程图，在做技术分享或写文档时能节省不少时间；

从产品经理的角度，可以用它根据需求文档生成产品流程图，更直观地展示产品逻辑；

教学的角度，学生在做课题报告时，能轻松制作各种示意图，让报告更专业；

市场人员也能利用它制作演示用的图表，让演示更有说服力。

特别是在云架构设计方面，它能专业生成 AWS、GCP、Azure 等云平台的架构图，对于云计算相关的从业人员来说也是非常实用的。

优缺点分析

任何项目我都喜欢批判性的分析，Next AI Draw.io 也不例外。

优点方面，它最大的亮点我觉得就是将 AI 与图表工具深度结合，操作简单，用自然语言就能生成和修改图表，大大降低了使用门槛。

同时它支持多种 AI 提供商和模型，用户可以根据自己的需求选择。功能丰富，不仅能创建图表，还能复制图像、从文档提取信息生成图表等。而且它是开源项目，我们可以根据自己的需求进行二次开发。

缺点方面，由于依赖 AI 模型，生成图表的质量在一定程度上受 AI 模型能力的影响，对于一些非常复杂、特殊的图表，可能还需要手动调整。

另外，虽然有在线演示，但由于访问量较大，演示站点使用的模型可能不是最优的，要获得最佳效果可能需要自行部署并配置更好的模型。

还有，第一次使用时，需要花一点时间熟悉它的操作逻辑。

本地部署教程

下面我来和大家分享一下如何在本地部署 Next AI Draw.io，这里推荐使用 Docker 方式，简单方便。

Docker 部署（推荐）

首先，确保你的电脑上已经安装了 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

注意把 your_api_key 换成你自己的 OpenAI API 密钥。

如果你想使用 env 文件来配置，可以先复制一份示例 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 就能使用了。

手动安装部署

克隆仓库：

git clone https://github.com/DayuanJiang/next-ai-draw-iocd next-ai-draw-io
安装依赖：

npm install
配置 AI 提供商，创建 .env.local 文件：

cp env.example .env.local

编辑 .env.local 文件，设置你选择的 AI 提供商、模型和 API 密钥等信息。

运行开发服务器：

npm run dev
在浏览器中打开 http://localhost:3000 即可查看应用。

总结

Next AI Draw.io 是一个非常有创意和实用价值的开源项目。它通过将 AI 技术与传统的图表工具结合，彻底改变了我们创建和编辑图表的方式。无论是对于技术人员还是非技术人员，都能大大提高图表制作的效率和质量。

虽然它还有一些可以改进的地方，但作为一个开源项目，它的潜力是巨大的，从它github的使用人数来看，还是有非常多的关注的。

大家经常需要制作各种图表，不妨试试这个工具，相信它会给你带来惊喜。

++github地址：++****++https://github.com/DayuanJiang/next-ai-draw-io++

如果项目对大家有帮助，不妨点个 star 支持一下哦～