react-flow
学习都是从官方文档开始的
快速开始
直接使用官方提供好的模板
pnpm dlx degit xyflow/vite-react-flow-template 001.app-name
// 安装依赖
cd 001.app-name && pnpm install
// 运行项目 查看效果
pnpm dev
已有项目引入@xyflow/react
// 1. 已有的项目 暂时先使用vite创建一个空的项目
pnpm create vite 002.my-react-flow-app --template react-ts
// 2. 添加 xyflow
pnpm add @xyflow/react
// 3. 引入 ReactFlow 组件
<ReactFlow
nodes={nodes}
edges={edges}
/>
// 4. 添加一些交互
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
// 5. 添加一些额外的组件
<Controls />
<MiniMap />
<Background variant="dots" gap={12} size={1} />
// 6. 运行项目查看效果
pnpm dev
// tips
// 1. 要引入 style.css
// 2. <ReactFlow />的包裹元素必须有宽高
