React Flow

认领

React Flow 是一款 MIT 许可的 React 库，用于构建交互式节点式界面、流程编辑器和图表构建器，提供内置交互、可自定义节点与边，以及适用于 React 应用的主题设置选项。

AI图表生成器

访问网站

概述

React Flow 是一款 MIT 许可的开源库，用于在 React 中构建基于节点的用户界面。它专为交互式流程图而设计，其中节点通过边连接，并且图表可以直接在浏览器中编辑。

该库提供了流程编辑器和图表构建器所需的核心组件，包括拖拽、缩放、平移和多选等内置交互。它还提供用于自定义节点和辅助 UI 的 React 组件，因此团队可以构建工作流搭建器、无代码工具、可视化器以及其他交互式图表体验。

核心能力

基于节点的图表框架

使用由节点和边连接而成的交互式流程图进行构建，并采用适合现有 React 应用的 React 组件模型。

开箱即用的交互式编辑

无需自己从头搭建基础功能，即可使用内置的拖拽、缩放、平移、多选以及添加/移除行为。

自定义节点组合

将自定义节点创建为普通 React 组件，包括交互控件、可视化内容和多个连接句柄。

灵活的边支持

使用内置边类型，例如 bezier、smoothstep、step 和 straight，然后按需自定义路由与外观。

内置 UI 组件

通过 Background、Controls、MiniMap、Panel、NodeToolbar 和 NodeResizer 等组件为图表添加交互辅助。

多种主题设置路径

使用默认 CSS、自定义 CSS、内联样式、CSS 变量或兼容 Tailwind 的主题设置来为流程图设置样式。

常见用例

工作流构建器
创建内部或面向客户的工作流，让用户在浏览器中直接连接步骤、移动节点并检查图表。
无代码应用
在不从零编写每个编辑器原语的情况下构建应用体验，以自定义节点和内置交互作为基础层。
交互式可视化器
用于数据处理、流程文档或调查逻辑可视化等任务，展示并操作图表。
自定义领域编辑器
组合聊天机器人构建器、机器学习工具或音乐合成器等专用编辑器，其中连接的节点代表系统中可配置的部分。
品牌化图表 UI
利用主题设置和 CSS 钩子，使图表适配现有产品 UI 或设计系统。

Pros and Cons

Pros

开源且采用 MIT 许可证。
拖拽、缩放、平移、多选以及元素添加/移除等核心交互均已内置。
支持自定义节点、自定义边，以及多个内置图表组件，可构建更丰富的编辑器。
支持普通 CSS 和 Tailwind，便于适配不同的设计系统。
提供快速开始、示例和模板，帮助更快上手。

Cons

导航栏链接到的定价页面未提供定价详情；在收集到的证据中，该页面返回 404。
高级样式和行为通常依赖于构建自定义节点、自定义边，或使用文档中描述的更底层 API。

FAQ

如何开始使用 React Flow？

React Flow 作为 `@xyflow/react` 包进行安装，并在现有 React 项目中使用。快速开始示例展示了如何导入该包、渲染 `<ReactFlow />` 组件，以及提供节点、边和变更处理函数。

我可以从模板或在线示例开始吗？

文档展示了一个使用核心 `<ReactFlow />` 组件以及节点和边状态创建的基础 React Flow 应用。为了更快上手，网站还提供了一个 Vite 模板和 CodeSandbox 入门项目。

React Flow 可以调整样式以匹配应用的设计系统吗？

可以。主题设置文档说明 React Flow 自带一个简洁的默认主题，并且你可以通过 CSS、内联样式属性、CSS 变量，或使用 Tailwind CSS 来自定义外观。

有哪些内置交互？

React Flow 包含内置交互模式，例如拖拽节点、缩放、平移、选择多个节点，以及添加或移除元素。它还支持自定义节点和边，以实现更高级的行为。

React Flow 提供哪些构建模块？

文档表明，该库围绕节点、句柄、边、视口，以及 Background、Controls、MiniMap、Panel、NodeToolbar 和 NodeResizer 等内置组件构建。

Quick Facts

类别: 开发者工具
产品类型: React 库
许可证: MIT
包: @xyflow/react
来源域名: reactflow.dev
维护方: xyflow