[TOC] > [home](https://reactflow.dev/) ## 概述 **React Flow** 是一个基于 React 的可视化编排组件库，专注于构建 **节点（Node）+ 边（Edge）** 类型的图形界面。它适用于构建： * 工作流编辑器（Workflow Editor） * 流程图（Flowchart） * DAG 图（有向无环图） * 思维导图（Mind Map） * 可视化函数调用、数据流、状态图等 **核心特性** | 特性 | 描述 | | --- | --- | | 🌐 完全基于 React | 与 React 生命周期无缝结合，组件化开发，易于集成 | | 🧩 支持自定义节点/边 | 通过自定义组件渲染节点内容和边样式 | | 🔁 拖拽与缩放 | 支持节点拖拽、画布缩放和平移、自动布局等 | | 🪢 状态管理 | 内部使用 Zustand 管理状态，可选择外部控制 | | 🧰 多种交互工具 | 支持吸附、选择、连接、右键菜单、快捷键等高级交互 | | ⚙️ 节点连接规则控制 | 支持连接前验证、动态连线限制、连接模式选择 | ## 示例代码 安装 ``` npm install reactflow ``` 使用 ```js import ReactFlow from 'reactflow'; import 'reactflow/dist/style.css'; const initialNodes = [ { id: '1', position: { x: 0, y: 0 }, data: { label: '节点 A' }, type: 'default' }, { id: '2', position: { x: 150, y: 100 }, data: { label: '节点 B' }, type: 'default' }, ]; const initialEdges = [ { id: 'e1-2', source: '1', target: '2', type: 'default' }, ]; function Flow() { return ( <div style={{ width: '100%', height: 500 }}> <ReactFlow nodes={initialNodes} edges={initialEdges} /> </div> ); } ```