React Flow

React Flow (@xyflow/react) 是一个用于构建基于节点的图形、工作流编辑器和交互式图表的库。它提供了一个高度可定制的框架，用于创建可视化编程界面、流程流转和网络可视化。

快速开始

安装

bash
pnpm add @xyflow/react

基础设置

typescript
import { ReactFlow, Node, Edge, Background, Controls, MiniMap } from @xyflow/react;
import @xyflow/react/dist/style.css;

const initialNodes: Node[] = [
{
id: 1,
type: input,
data: { label: 输入节点 },
position: { x: 250, y: 5 },
},
{
id: 2,
data: { label: 默认节点 },
position: { x: 100, y: 100 },
},
{
id: 3,
type: output,
data: { label: 输出节点 },
position: { x: 400, y: 100 },
},
];

const initialEdges: Edge[] = [
{ id: e1-2, source: 1, target: 2, animated: true },
{ id: e2-3, source: 2, target: 3 },
];

function Flow() {
return (

export default Flow;

核心概念

节点

节点是图形的基本构建块。每个节点具有：

• - id：唯一标识符
• type：节点类型（内置或自定义）
• position：{ x, y } 坐标
• data：自定义数据对象

typescript
import { Node } from @xyflow/react;

const node: Node = {
id: node-1,
type: default,
position: { x: 100, y: 100 },
data: { label: 节点标签 },
style: { background: #D6D5E6 },
className: custom-node,
};

内置节点类型：

• - default：标准节点
• input：无目标连接点
• output：无源连接点
• group：其他节点的容器

边

边连接节点。每条边需要：

• - id：唯一标识符
• source：源节点 ID
• target：目标节点 ID

typescript
import { Edge } from @xyflow/react;

const edge: Edge = {
id: e1-2,
source: 1,
target: 2,
type: smoothstep,
animated: true,
label: 边标签,
style: { stroke: #fff, strokeWidth: 2 },
};

内置边类型：

• - default：贝塞尔曲线
• straight：直线
• step：带尖角的正交线
• smoothstep：带圆角的正交线

连接点

连接点是节点上的连接点。使用 Position 枚举进行定位：

typescript
import { Handle, Position } from @xyflow/react;

可用位置：Position.Top、Position.Right、Position.Bottom、Position.Left

状态管理

受控流程

使用状态钩子实现完全控制：

typescript
import { useNodesState, useEdgesState, addEdge, OnConnect } from @xyflow/react;
import { useCallback } from react;

function ControlledFlow() {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

const onConnect: OnConnect = useCallback(
(connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);

return (
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
onConnect={onConnect}
/>
);
}

useReactFlow 钩子

访问 React Flow 实例以实现程序化控制：

typescript
import { useReactFlow } from @xyflow/react;

function FlowControls() {
const {
getNodes,
getEdges,
setNodes,
setEdges,
addNodes,
addEdges,
deleteElements,
fitView,
zoomIn,
zoomOut,
getNode,
getEdge,
updateNode,
updateEdge,
} = useReactFlow();

return (
fitView()}>适应视图
);
}

自定义节点

使用带类型数据的 NodeProps 定义自定义节点：

typescript
import { NodeProps, Node, Handle, Position } from @xyflow/react;

export type CustomNode = Node<{ label: string; status: active | inactive }, custom>;

function CustomNodeComponent({ data, selected }: NodeProps) {
return (

使用 nodeTypes 注册：

typescript
const nodeTypes: NodeTypes = { custom: CustomNodeComponent };

关键模式

• - 多个连接点：使用 id 属性和 style 进行定位
• 动态连接点：添加/移除连接点后调用 useUpdateNodeInternals([nodeId])
• 交互元素：添加 className=nodrag 以防止在输入框/按钮上拖动

详细模式（包括样式、航空图钉和动态连接点）请参阅自定义节点参考。

自定义边

使用 EdgeProps 和路径工具定义自定义边：

typescript
import { BaseEdge, EdgeProps, getBezierPath } from @xyflow/react;

export type CustomEdge = Edge<{ status: normal | error }, custom>;

function CustomEdgeComponent(props: EdgeProps) {
const [edgePath] = getBezierPath(props);

return (
id={props.id}
path={edgePath}
style={{ stroke: props.data?.status === error ? #ef4444 : #64748b }}
/>
);
}

路径工具

• - getBezierPath() - 平滑曲线
• getStraightPath() - 直线
• getSmoothStepPath() - 带圆角的折线
• getSmoothStepPath({ borderRadius: 0 }) - 带尖角的折线（阶梯边）

所有工具均返回 [path, labelX, labelY, offsetX, offsetY]。

交互式标签

使用 EdgeLabelRenderer 实现支持指针事件的 HTML 标签：

typescript
import { EdgeLabelRenderer, BaseEdge, getBezierPath } from @xyflow/react;

function ButtonEdge(props: EdgeProps) {
const [edgePath, labelX, labelY] = getBezierPath(props);
return (
<>


style={{
position: absolute,
transform: translate(-50%, -50%) translate(${labelX}px, ${labelY}px),
pointerEvents: all,
}}
className=nodrag nopan
>
console.log(删除)}>×