上期和大家分享了我们精心打磨的协同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 的技术架构，我们可以从它的工作原理和项目结构两方面入手。

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

1. Next.js 负责前端框架和路由，让整个应用能够顺畅地运行和跳转；

2. Vercel AI SDK（包括 ai 和 @ai-sdk/*）提供流式 AI 响应和多提供商支持，这是实现 AI 功能的核心；

3. 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 部署（推荐）

1. 首先，确保你的电脑上已经安装了 Docker，如果没有，可以去 Docker 官网 下载安装。

2. 打开终端，运行以下命令：

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 密钥。

1. 如果你想使用 env 文件来配置，可以先复制一份示例 env 文件：

cp env.example .env

然后编辑 .env 文件，填写你的配置信息，再运行：

docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

1. 部署完成后，在浏览器中打开 http://localhost:3000 就能使用了。

手动安装部署

1. 克隆仓库：

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

1. 安装依赖：

npm install

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

cp env.example .env.local

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

1. 运行开发服务器：

npm run dev

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

总结

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

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

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

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

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