从0到1搭建 Next AI Draw.io：避坑指南与完整安装流程
从0到1搭建 Next AI Draw.io：避坑指南与完整安装流程
作为一名开发新手，最近尝试搭建 Next AI Draw.io（一款能通过自然语言生成图表的工具）时，踩了不少系统配置和依赖安装的坑。最终成功运行后，整理了这份「问题+解决方案+完整步骤」的实战记录，希望能帮到同样刚入门的朋友。
一、先明确：你需要提前准备这些工具
在开始前，确认电脑安装了以下基础工具（没装的话跟着后面步骤补就行）：
- Git：用于克隆项目代码（若没装，后面会教如何检查和安装）
- Node.js（v18+）：提供 npm 包管理工具，是项目运行的核心依赖
- PowerShell/终端：Windows 用 PowerShell，macOS/Linux 用自带终端
- 文本编辑器：记事本、VS Code 均可（用于修改配置文件）
二、完整安装流程：跟着做就能成
步骤1：检查并安装 Git（项目克隆必需）
一开始我不确定自己有没有装 Git，后来发现用一条命令就能验证：
- 打开 PowerShell（Windows 按
Win+R输入powershell），输入：git --version - 结果判断：
- 若显示
git version 2.xx.xx：说明已装 Git，直接跳步骤3； - 若显示
'git' 不是内部或外部命令：需要安装 Git，步骤如下：- 去 Git 官网下载 Windows 安装包：https://git-scm.com/download/win
- 双击安装包，一路默认下一步（注意勾选「Git Bash Here」，方便后续操作）
- 安装完成后重启 PowerShell，再输
git --version验证，显示版本号即成功。
- 若显示
步骤2：克隆 Next AI Draw.io 项目代码
- 先切换到想存放项目的目录（我选了 Downloads 目录，方便查找）：
cd C:\Users\lisha\Downloads - 克隆项目仓库（复制这条命令，粘贴到 PowerShell 回车即可）：
git clone https://github.com/DayuanJiang/next-ai-draw-io - 克隆完成后，进入项目根目录：
cd next-ai-draw-io
步骤3：安装 Node.js（解决 npm 命令找不到的坑）
这是我踩的第一个大坑——执行 npm install 时，PowerShell 报错 'npm' 不是内部或外部命令，后来才知道是没装 Node.js（npm 是 Node.js 自带的工具）。
安装 Node.js 步骤：
- 去 Node.js 官网下载 LTS 版（长期支持版，稳定性好）：https://nodejs.org/zh-cn/download/
- 双击安装包，关键配置注意两点：
- 安装路径默认即可（或自定义，不要含中文）；
- 务必勾选「Automatically install the necessary tools」（自动安装依赖工具，避免后续报错）；
- 安装完成后，必须重启 PowerShell（不重启系统识别不到新命令），输入以下命令验证：
# 检查 Node.js 版本 node --version # 检查 npm 版本 npm --version - 若分别显示
v24.11.1和11.6.2这类版本号，说明 Node.js 安装成功。
步骤4：解决 PowerShell 脚本执行权限问题（npm 报错 EPERM）
刚装完 Node.js，执行 npm --version 又报错：
无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本
这是 Windows 安全策略限制，修改执行策略就能解决：
- 以「管理员身份」打开 PowerShell：
- 按
Win键，搜索「PowerShell」，右键选择「以管理员身份运行」； - 弹出「用户账户控制」时点击「是」；
- 按
- 输入以下命令，修改执行策略：
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser - 提示「是否要更改执行策略」时，输入
Y回车确认； - 关闭所有 PowerShell 窗口，重新打开普通窗口，再输
npm --version，显示版本号即解决。
步骤5：安装项目依赖（避坑：权限+网络超时）
进入项目目录执行 npm install 时，又遇到两个问题：
-
问题1：权限不足（EPERM: operation not permitted）
原因是 Downloads 目录可能有文件占用，解决方案：把next-ai-draw-io文件夹剪切到桌面（桌面权限更宽松），再用 PowerShell 切换到桌面目录：cd C:\Users\lisha\Desktop\next-ai-draw-io -
问题2：网络超时（EIDLETIMEOUT）
原因是 npm 默认连接国外仓库，下载慢易超时，换成国内淘宝镜像即可：# 设置淘宝镜像（仅需执行一次） npm config set registry https://registry.npmmirror.com/ # 验证镜像是否设置成功 npm config get registry -
最终执行依赖安装：
npm install等待1-3分钟（视网络速度），看到
added 565 packages这类提示，说明依赖安装成功（黄色 warn 警告不用管，不影响运行）。
步骤6：配置 AI 供应商（以 DeepSeek 为例）
Next AI Draw.io 需要对接 AI 服务才能生成图表，我用的是 DeepSeek，配置步骤如下：
- 在项目目录找到
env.example文件（官方模板），右键「复制」→「粘贴」，生成「env.example - 副本」； - 右键重命名副本为
.env.local（前面加个点，系统提示“是否更改扩展名”时选“是”）； - 双击
.env.local用记事本打开，删除原有内容，粘贴以下配置（替换成你的 API 密钥）：# AI 供应商选择 DeepSeek AI_PROVIDER=deepseek # DeepSeek 对应的模型 AI_MODEL=deepseek-chat # 你的 DeepSeek API 密钥（替换成自己的） DEEPSEEK_API_KEY=sk-XXXXXX - 按
Ctrl+S保存文件，配置完成。
步骤7：启动项目，终于成功！
- 在 PowerShell 中确保处于项目目录，输入启动命令：
npm run dev - 等待几秒，终端显示
ready - started server on 0.0.0.0:3000, url: http://localhost:3000，说明启动成功； - 打开浏览器，输入
http://localhost:3000，就能看到 Next AI Draw.io 的界面！在聊天框输入“生成一个用户登录流程图”，AI 会自动生成图表，完美运行～
![image]()
三、我遇到的5个核心问题与解决方案（避坑重点）
| 遇到的问题 | 报错关键词 | 解决方案 |
|---|---|---|
| 切换带空格的目录失败 | 无法将“x86”项识别为 cmdlet |
路径用英文双引号包裹，如 cd "C:\Program Files (x86)" |
| npm 命令找不到 | 'npm' 不是内部或外部命令 |
安装 Node.js 并重启 PowerShell |
| PowerShell 禁止运行脚本 | UnauthorizedAccess / PSSecurityException |
以管理员身份打开 PowerShell，执行 Set-ExecutionPolicy RemoteSigned -Scope CurrentUser |
| 依赖安装权限不足 | EPERM: operation not permitted |
把项目文件夹移到桌面（权限更宽松），删除 node_modules 和 package-lock.json 后重新安装 |
| 依赖下载超时 | EIDLETIMEOUT |
切换国内 npm 镜像：npm config set registry https://registry.npmmirror.com/ |
四、总结：新手搭建的3个关键提醒
- 命令执行后必看反馈：遇到红色报错不要慌，先看关键词（如
EPERM、timeout），大概率是权限或网络问题，针对性解决即可； - 配置文件别漏“点”：
.env.local前面的点必须加，否则项目识别不到 AI 密钥； - 重启 PowerShell 是神器：安装 Node.js、修改执行策略后，一定要重启 PowerShell，否则系统不会加载新配置。
浙公网安备 33010602011771号