基于节点的图表框架
使用由节点和边连接而成的交互式流程图进行构建，并采用适合现有 React 应用的 React 组件模型。
概述
React Flow 是一款 MIT 许可的开源库，用于在 React 中构建基于节点的用户界面。它专为交互式流程图而设计，其中节点通过边连接，并且图表可以直接在浏览器中编辑。
该库提供了流程编辑器和图表构建器所需的核心组件，包括拖拽、缩放、平移和多选等内置交互。它还提供用于自定义节点和辅助 UI 的 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
React Flow 替代品
ChartAI
ChartAI 是一款基于网页的 AI 工具，可快速生成图表、流程图、信息图及其他视觉内容，适合演示、论文、项目和相关工作流。
Docuopia
Docuopia 是一款 AI 文档助手，用于撰写和编辑产品需求、帮助文档、wiki 页面和图表。支持协作编辑、版本历史，并提供免费版本体验工作流。
Pixso
Pixso is a cloud-based product design collaboration tool with AI-assisted UI creation, whiteboarding, prototyping, and developer handoff. It supports teams that need to plan, design, and deliver product work in one shared environment.
Xmind
Xmind is a mind mapping and visual thinking tool for organizing ideas, planning projects, and building presentations on the web, desktop, and mobile. It adds AI-assisted editing, collaboration, and export workflows for individual and team use.
Stempad
Stempad 是一款基于浏览器的科学写作编辑器，适用于笔记、文档和技术流程。支持键盘驱动块编辑、数学、图表、化学、代码与绘图，并提供导出、协作和 AI 功能。
BioRender
BioRender 是面向研究人员、学生和生命科学团队的网页版科研图示与插图平台，可制作期刊风格图表、幻灯片、流程图、实验流程和时间线，付费方案支持发表与协作。