一、 环境准备与项目初始化
1.首先,确保本地已安装 Node.js(建议 v18 或 v20+)和 pnpm。
版本查询指令:node -v
pnpm -v
2.我们在目标目录下使用官方脚手架创建 Umi Max 项目(这里选择了 Ant Design Pro 模板):
pnpm dlx create-umi@latest
Pick Umi App Template →Ant Design Pro
Pick Npm Client → pnpm
Pick Npm Registry → taobao
⚠️项目文件名最好不要含有中文,Umi 底层使用的打包工具(如 esbuild、swc 等)由 Rust/Go 编写,对中文路径的字符边界解析存在兼容性问题,使用中文会报错Rust编译问题。
⚠️项目文件夹移动位置后,需要删除node_modules文件,重新执行
pnpm install
二、 集成AntV X6 与 DAG 编辑器实现
1.安装依赖:
pnpm add @antv/x6 @antv/x6-react-shape
2.新建组件文件 index.tsx
- 引入核心依赖
import '@antv/x6-react-shape';
- 初始化画布Graph
- 定义节点和边

