一、背景

draw.io作为一款免费开源的图表绘制工具，相信很多同学在日常工作中都用过它来画各类流程图、架构图、时序图等等。但是在AI时代，再一个图形一个图形的手搓出架构图，多少会显得有那么一点呆。

那么有没有通过AI，一句话就帮我们自动帮我画图的工具了？答案是有的，就是最近在github大火的AI画图工具：next-ai-draw-io，目前已经收获了13.7K star，并且完全开源免费：

我们先直接展示效果，输入一句话：画一个登录的流程图，看看next-ai-draw-io给我们生成出来的流程图效果：

是不是和你辛辛苦苦手搓出来的几乎没有任何区别？甚至不同模块还用颜色给你做了区分！

那么接下来我们就盘一下这款工具应该如何下载、部署、配置、使用，以及使用过程中的经验分享，从此摆脱手搓图表的痛苦~

二、下载安装

2.1 下载地址

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

项目支持在线体验：https://next-ai-drawio.jiang.jp/

在线体验地址仅用于体验，因此会有使用次数限制，多用几次之后再发起对话就会被拒绝请求。

可以点击在线体验地址右上角的setting图标，配置你自己的AI服务的API key来绕过演示站点的用量限制：

但是个人还是更建议直接下载开源代码到本地，本地部署配置运行起来，自己用或者提供给团队同学用，会更加的灵活方便。

2.2 本地部署-前置工作

首先从github下载项目代码到本地，可以通过Git clone下载，没有Git的同学也可以直接下载zip文件下来后直接解压使用：

有了项目文件后，Windows下可以直接打开 PowerShell（Windows 按 Win+R 输入 powershell），进入到项目文件目录下操作：

由于next-ai-draw-io本质上是一个前端项目，因此有做过前端开发的同学，也可以直接用vscode来运行项目。

既然是本质上是前端项目，那么不管是用PowerShell运行，还是vscode运行，node.js都是必须要安装的。

官网下载地址：https://nodejs.org/zh-cn/download/

下载后双击安装包，注意两点：

• 安装路径默认即可（或自定义，不要含中文）；
• 勾选【Automatically install the necessary tools】，自动安装依赖工具，避免后续报错；

安装完成后，重启 PowerShell，验证是否安装成功：

# 检查 Node.js 版本
node --version
# 检查 npm 版本
npm --version

node.js安装完毕之后，就可以到项目目录下，运行npm命令安装项目依赖了：

npm install 

安装依赖成功，会看到added xxxx packages的提示信息：

如果安装的过程很慢，甚至超时了，是由于npm默认是从国外的镜像仓库拉取的依赖包，可以通过国内的镜像源地址拉取依赖包，会发现速度快很多：

# 使用淘宝镜像安装依赖（单次有效）
npm install --registry=https://registry.npmmirror.com

到这里，本地部署的前置工作就做完了，核心就两步：安装node.js + npm install 安装依赖包。

2.3 本地部署-AI服务配置

接下来就是在next-ai-draw-io中配置我们自己的AI服务，我这里用的是硅基流动。硅基流动是一站式大模型云服务平台，可以在上面选择各类大模型（DeepSeek、Qwen 等）来使用。

硅基流动网站地址：https://cloud.siliconflow.cn/me/models

在硅基流动模型广场上，选择你要用的大模型，我这里选的Deepseek V3.2:

然后左侧目录下找到“API 密钥”， 新建自己的密钥：

接下来就是在next-ai-draw-io项目文件根目录下，找到env.example文件（官方模板），复制这个文件并将复制后的文件更名为：.env.local （注意文件名前面的. 不要忘了）

.env.local文件中，删掉原有的所有内容，配置以下的内容：

# 指定服务商，我使用的硅基流动平台
AI_PROVIDER=siliconflow
# 对应的模型
AI_MODEL=deepseek-ai/DeepSeek-V3.2
# 你的 DeepSeek API 密钥（替换成自己的）
SILICONFLOW_API_KEY=your api key
# API 基础地址，中国区用https://api.siliconflow.cn/v1
SILICONFLOW_BASE_URL=https://api.siliconflow.cn/v1

配置参数说明：
1、因为我用的硅基流动作为服务商，所以AI_PROVIDER的值为：siliconflow，如果你要用DeepSeek, 值为：deepseek。要用其他的服务商，参看原来的evn.example中的说明去配置。

2、AI_MODEL的值，来源于在硅基流动模型广场上，选择你要用的大模型后，右侧弹窗里面的模型名称。

3、SILICONFLOW_API_KEY的值，记得替换成前面提到的你自己建的API KEY的值。如果你要用DeepSeek，则是：DEEPSEEK_API_KEY=你的API KEY的值。

4、SILICONFLOW_BASE_URL，用硅基流动平台可以配一下这个值，用DeepSeek的话不用配置。

至此，AI服务配置就完成了，下一步就是直接运行项目体验了。

2.4 本地部署-运行程序

运行项目，使用命令：

npm run dev

启动后会看到终端显示本地访问的地址和别人远程访问你的地址：

在浏览器中打开：http://localhost:6002, 第一次启动加载会慢一点，稍等一会儿就加载完毕：

左侧区域就是画图区域，右侧就是AI对话区域，右下角直接输入你的要求，比如：画一个登录流程图，发送后AI就会开始分析并帮你画出对应的登录流程图：

可以看到这种简单通用的需求，next-ai-draw-io画出来的图几乎不用修改，直接就可以拿来使用。

整个过程底层是项目通过Vercel AI SDK调用你配置的大模型，将你输入的自然语言的需求描述转换成draw.io能理解的XML代码，然后调用开源的draw.io代码画出最终的图形效果。

因此整个过程需要花费几分钟，这个时候你可以去做其他的事情，等几分钟后回来看效果。

三、进阶使用

3.1 画复杂的架构图

前面我们尝试了一句话生成登录的流程图，但对于复杂的架构图，仅仅一句话的提示词，画出来的效果就不如人意了。

想要利用AI画出复杂的图，这个时候我们就需要套用魔法，先用AI帮我们生成对应的复杂一些的提示词，然后再用这套提示词去生图。

比如我们需要画一个电商网站的分层架构图，首先我们通过AI帮我们写提示词：

然后再复制这套提示词给next-ai-draw-io，让它给你画图，注意提示词如果过于冗长和复杂，画图会超时失败，因此上面生成提示词时注意不要过于复杂。next-ai-draw-io画出的图如下：

可以看到画出来的架构图已经比较完善了，只有个别细节的地方需要自己再手动调整一下，比如上图中的营销服务那里没有对齐。

因此对于复杂的图，AI第一次画出来的图可能并不是很完美，依然有细节需要我们手工调整。但至少可以通过AI帮助我们完成90%的工作量，然后自己完成剩下10%的优化微调工作。

调整完毕后，点击右上角的保存，即可保存为.drawio文件。然后用draw.io打开该文件，可以继续编辑、导出为你想要的文件格式（图片、PDF、HTML网页等）：

最后，作为一名软件测试方面的博主，自然是要试试让它帮我画一下压测的拓扑图，比如结算系统提交订单压测的拓扑图。同样的，先让AI生成提示词：

next-ai-draw-io第一次生成的图如下：

可以看到连接线有点乱，手工优化微调一下，最终效果图：

=======================================================================
好啦，以上就是本次的全部内容，如果对你有帮助，麻烦点赞+收藏+关注，一键三连，你的支持就是作者更新最大的动力！

欢迎关注下方我的公众号：程序员杨叔，各类文章都会第一时间在上面发布，持续分享各类测试开发知识干货，你的支持就是作者更新最大的动力。