1 什么是 ReactFlow
ReactFlow 是一个基于 React 的高度可定制组件库，用于构建节点式编辑器和交互式流程图。它由 xyflow 团队开发维护，目前在 GitHub 上拥有 30.6K Stars 和每周 1.66M 的安装量，被 Stripe、Typeform、Railway 等众多企业广泛采用。
该库的核心优势在于：
- 开箱即用的交互功能：拖拽节点、缩放平移、多选元素、添加/删除连接等
- 完全自定义的节点系统：支持嵌入表单、图表等任何 React 组件
- 丰富的插件生态：包括小地图(Minimap)、控制面板(Controls)、背景网格等
- 灵活的样式定制：兼容 Tailwind 和原生 CSS
ReactFlow 适用于构建数据处理工具、聊天机器人编辑器、机器学习可视化、音乐合成器等复杂交互应用。
2 安装与环境配置
2.1 创建 React 项目
推荐使用 Vite 创建新项目：
npm init vite my-react-flow-app -- --template react
cd my-react-flow-app
2.2 安装 ReactFlow
使用 npm 或其他包管理器安装核心依赖：
npm install @xyflow/react
注意：ReactFlow 已将包名从
react-flow-renderer更改为@xyflow/react，请使用最新包名以获取最新特性和修复。
3 核心概念与基础示例
3.1 核心组件与数据结构
ReactFlow 的核心由以下部分组成：
-
<ReactFlow />：主容器组件 -
节点(Nodes)：表示流程图中的元素，包含
id、position和data等属性 - 边(Edges)：连接节点的线条，包含
