【前端知识】React Flow : 一个基于 React 的可视化节点编辑器框架

一、React Flow 是什么？（核心概念）

React Flow 是一个基于 React 的可视化节点编辑器框架，用于构建流程图、DAG、工作流、规则引擎 UI。

它不是“画图库”，而是：

✅可交互、可编排、可工程化嵌入的节点系统

1️⃣ 核心概念速览

2️⃣ React Flow 不是什么

❌ 不是 Figma / X6 / SVG 画图工具
❌ 不自带“执行引擎”
✅只负责“可视化 + 交互”

真正的“工作流执行”需要你自己实现（或对接 LangGraph / 后端 DAG）

二、React Flow 能实现哪些功能？

✅ 1. 基础可视化能力（开箱即用）

• 节点拖拽
• 画布缩放 / 平移
• 节点多选 / 框选
• 连线吸附
• 对齐辅助线
• 键盘快捷键（删除 / 复制 / 粘贴）

👉 这是构建“工作流工具”的基础设施

✅ 2. 高度可定制节点（非常关键）

你可以把任何 React 组件作为节点：

const CustomNode = ({ data }) => ( <div className="agent-node"> <h4>{data.label}</h4> <button onClick={data.onRun}>执行</button> </div> );

✅ 意味着你可以放：

• 表单
• 状态灯
• 下拉框
• 日志面板
• AI Agent 状态

✅ 3. 状态驱动（工程化核心）

React Flow 的状态是纯 JSON：

{nodes:[{id,type,position,data}],edges:[{id,source,target}]}

✅ 可以被：

• 保存到数据库
• 从后端加载
• 与 Zustand / Redux 联动
• 与 LangGraph 状态对齐

✅ 4. 事件系统（构建“真正可用的工具”）

✅ 5. 高级能力（企业级）

• ✅ 子流程（Node 内嵌 Flow）
• ✅ 自动布局（dagre / elk）
• ✅ 撤销 / 重做
• ✅ 自定义 Edge（带箭头、动画）
• ✅ 大数据量（虚拟化）

三、React Flow 完整使用教程（工程级）

下面给你一个可直接上线使用的完整流程。

Step 1：环境准备

node-v# >= 18npmcreate vite@latest my-flow-app ----templatereact-tscdmy-flow-app

Step 2：安装依赖

npminstallreactflow zustandnpminstall-Dtailwindcss postcss autoprefixer npx tailwindcss init-p

Step 3：Tailwind 基础配置

tailwind.config.js

exportdefault{content:['./index.html','./src/**/*.{ts,tsx}'],};

Step 4：全局样式

src/index.css

@tailwindbase;@tailwindcomponents;@tailwindutilities;

Step 5：流程状态管理（Zustand）

src/store/flowStore.ts

import{create}from'zustand';import{Node,Edge}from'reactflow';typeFlowState={nodes:Node[];edges:Edge[];setNodes:(nodes:Node[])=>void;setEdges:(edges:Edge[])=>void;};exportconstuseFlowStore=create<FlowState>((set)=>({nodes:[],edges:[],setNodes:(nodes)=>set({nodes}),setEdges:(edges)=>set({edges}),}));

Step 6：自定义节点

src/nodes/AgentNode.tsx

import { Handle, Position } from 'reactflow'; export function AgentNode({ data }: any) { return ( <div className="bg-white border p-3 rounded shadow min-w-[180px]"> <Handle type="target" position={Position.Top} /> <h4 className="font-bold">{data.label}</h4> <div className="text-xs text-gray-500 mb-2">{data.model}</div> <button className="bg-blue-500 text-white px-2 py-1 rounded" onClick={data.onRun} > 执行 </button> <Handle type="source" position={Position.Bottom} /> </div> ); }

Step 7：注册节点类型

constnodeTypes={agent:AgentNode,};

Step 8：主画布

src/pages/FlowEditor.tsx

import ReactFlow, { Controls, Background } from 'reactflow'; import 'reactflow/dist/style.css'; import { useFlowStore } from '../store/flowStore'; import { nodeTypes } from '../nodes'; export default function FlowEditor() { const { nodes, edges, setNodes, setEdges } = useFlowStore(); return ( <div className="h-screen w-full"> <ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodesChange={(changes) => setNodes( changes.reduce((acc, c) => { if (c.type === 'position') { return acc.map((n) => n.id === c.id ? { ...n, position: c.position! } : n ); } return acc; }, nodes) ) } onEdgesChange={(changes) => setEdges( changes.reduce((acc, c) => { if (c.type === 'remove') { return acc.filter((e) => e.id !== c.id); } return acc; }, edges) ) } fitView > <Controls /> <Background /> </ReactFlow> </div> ); }

Step 9：初始化流程数据

useFlowStore.setState({nodes:[{id:'1',type:'agent',position:{x:100,y:100},data:{label:'LLM Agent',model:'GPT-4o',onRun:()=>{}},},],edges:[],});

Step 10：构建 & 部署

npmrun build

✅ 可部署到：

• Vercel
• Netlify
• Docker + Nginx

四、使用 React Flow 构建 AI 工作流工具（实战）

✅ 一个典型的 AI 工作流结构

用户输入 ↓ 意图识别 Agent ↓ 工具选择 ↓ 工具执行 ↓ 结果聚合

✅ 节点设计（推荐）

✅ 与 LangGraph / MCP 的关系

✅ React Flow 负责：

• 节点编排 UI
• 状态展示
• 用户交互

✅ LangGraph 负责：

• 真正执行流程
• 状态推进

✅ 执行联动示意

onClickRunAgent(nodeId){constflow=useFlowStore.getState();fetch('/api/langgraph/run',{method:'POST',body:JSON.stringify(flow),});}

五、总结（重点）

✅React Flow 的核心价值

把“流程编排”变成可交互、可维护、可工程化的前端系统

✅什么时候该用 React Flow？

• AI 工作流编辑器
• Agent 编排 UI
• 规则引擎
• 低代码平台

✅什么时候不该用？

• 纯展示流程图
• 非交互型图表