React Flow

当需要为工作流构建器、无代码应用、图像处理或可视化工具添加可拖拽节点与连线时，React Flow 提供开箱即用的 React 组件，支持自定义节点、边缘、主题及多人协作。

核心能力

React Flow 内置拖动节点、缩放、平移、多选及增删元素等基础交互，无需额外开发。节点本质为 React 组件，可与 Tailwind 或普通 CSS 配合实现任意样式。官方提供 Background、MiniMap、Controls、NodeToolbar 和 NodeResizer 等内置组件，支持背景网格、小地图导航、缩放控件、节点工具栏与尺寸调整。边缘支持贝塞尔、平滑步进、直线等多种类型，并可添加标签、动画 SVG 与自定义连接线。

• 辅助线对齐：自动捕捉与参考线帮助精确定位节点（官网子页示例）
• 句柄系统：Handle 组件支持基本句柄、带标签句柄、按钮句柄，控制连接点行为
• 子流程：支持节点分组与父子层级关系，可折叠/展开
• 布局算法：集成 Dagre 与 Elkjs 实现自动布局，支持力导向与动态布局
• 多人协作：提供多人游戏与白板功能示例，支持实时协同编辑

收费与订阅

React Flow 核心库采用 MIT 开源许可，永久免费商用。官方提供 Pro 订阅计划用于支持库的持续维护，订阅费用直接投入开发并保持库的独立性。Pro 分为入门版（$139/月）、专业版（$269/月）与企业版（需询价），均包含 Pro 示例访问、优先处理 GitHub 问题、团队成员邀请及 MIT 许可维护。专业版额外提供每月 1 小时个人邮件支持及与创建者之一的介绍通话；企业版支持语音/视频支持、定制采购流程与 10 人团队。

• 入门版：$139/月，邀请 1 名团队成员
• 专业版：$269/月，邀请 5 名团队成员，每月 1 小时邮件支持
• 企业版：询价，永久访问 Pro 示例，邀请 10 人，每月 1 小时语音/视频/邮件支持
• 所有订阅均用于维护 MIT 许可库，无开源版本功能阉割

适用场景与案例

React Flow 被 Stripe、LinkedIn、OneSignal、Carto 等组织用于生产环境。官方案例包括：DoubleLoop 用地图跟踪业务目标，OneSignal 构建工作流构建器自动执行客户互动，Carto 用无代码管道编辑器分析空间数据。社区还基于它开发了 AI 工作流编辑器、思维导图应用、网络音频 API 可视化、幻灯片应用等。

• 工作流构建器：拖拽节点定义流程，支持条件分支与循环
• 无代码应用：可视化搭建逻辑，节点对应操作，边缘表示数据流
• 图像处理管线：节点代表滤镜/变换，连线定义处理顺序
• 数据库架构图：自定义节点展示表结构，句柄表示字段关系
• 白板功能：支持橡皮擦、套索选择、矩形选择与自由绘制

快速上手

通过 npm install @xyflow/react 安装，然后引入 ReactFlow 组件并传入 nodes 和 edges 数组即可。官方提供完整快速入门指南，支持 TypeScript 类型定义。开发者可参考 40+ 示例（如添加节点、自定义边缘、拖放、撤销/重做、子流程、布局等）快速实现功能。

• 安装命令：npm install @xyflow/react
• 核心概念：节点（node）、边缘（edge）、句柄（handle）、视口（viewport）
• Hooks 体系：useNodesState、useEdgesState、useReactFlow、useKeyPress 等 20+ 钩子
• 实用函数：addEdge、applyNodeChanges、getBezierPath、getConnectedEdges 等
• 服务器端渲染：支持 SSR 与图片生成（Server Side Image Creation）

常见问题

Q1：React Flow 是否支持 TypeScript？

A1：支持。官方提供完整的 TypeScript 类型定义，包括 Node、Edge、Connection 等核心类型，以及所有 Hooks 与组件的类型声明。

Q2：React Flow Pro 订阅后能获得哪些具体权益？

A2：Pro 订阅者可以访问所有 Pro 示例（如高级自定义节点、边缘交互、多人协作等），获得 GitHub 问题优先处理，邀请团队成员（入门版1人、专业版5人、企业版10人），以及维护 MIT 许可的库。专业版及以上还包含每月1小时个人支持（邮件/语音/视频）。

Q3：React Flow 能否与 Tailwind CSS 一起使用？

A3：可以。官方明确说明节点是 React 组件，可与 Tailwind 和普通 CSS 配合。社区示例中也有 Tailwind 主题的 Turbo Flow 示例。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。