Dagre与React Flow结合使用

Dagre是一个用于布局有向图的JavaScript库。它可以计算层级/树形布局的最优节点位置。React Flow负责渲染，dagre负责定位。

快速开始

bash
pnpm add @dagrejs/dagre

typescript
import dagre from @dagrejs/dagre;
import { Node, Edge } from @xyflow/react;

const getLayoutedElements = (
nodes: Node[],
edges: Edge[],
direction: TB | LR = TB
) => {
const g = new dagre.graphlib.Graph();
g.setGraph({ rankdir: direction });
g.setDefaultEdgeLabel(() => ({}));

nodes.forEach((node) => {
g.setNode(node.id, { width: 172, height: 36 });
});

edges.forEach((edge) => {
g.setEdge(edge.source, edge.target);
});

dagre.layout(g);

const layoutedNodes = nodes.map((node) => {
const pos = g.node(node.id);
return {
...node,
position: { x: pos.x - 86, y: pos.y - 18 }, // 居中转换为左上角
};
});

return { nodes: layoutedNodes, edges };
};

核心概念

坐标系差异

关键点： Dagre返回中心坐标；React Flow使用左上角坐标。

typescript
// Dagre输出：节点中心
const dagrePos = g.node(nodeId); // { x: 100, y: 50 } = 中心点

// React Flow期望：左上角
const rfPosition = {
x: dagrePos.x - nodeWidth / 2,
y: dagrePos.y - nodeHeight / 2,
};

节点尺寸

Dagre需要明确的尺寸。三种方法：

1. 固定尺寸（最简单）：
typescript
g.setNode(node.id, { width: 172, height: 36 });

2. 从数据中获取每个节点的尺寸：
typescript
g.setNode(node.id, {
width: node.data.width ?? 172,
height: node.data.height ?? 36,
});

3. 测量尺寸（最准确）：
typescript
// React Flow测量节点后
g.setNode(node.id, {
width: node.measured?.width ?? 172,
height: node.measured?.height ?? 36,
});

布局方向

typescript
g.setGraph({ rankdir: LR }); // 水平布局

完整实现

基础布局函数

typescript
import dagre from @dagrejs/dagre;
import type { Node, Edge } from @xyflow/react;

interface LayoutOptions {
direction?: TB | BT | LR | RL;
nodeWidth?: number;
nodeHeight?: number;
nodesep?: number; // 水平间距
ranksep?: number; // 垂直间距（层级之间）
}

export function getLayoutedElements(
nodes: Node[],
edges: Edge[],
options: LayoutOptions = {}
): { nodes: Node[]; edges: Edge[] } {
const {
direction = TB,
nodeWidth = 172,
nodeHeight = 36,
nodesep = 50,
ranksep = 50,
} = options;

const g = new dagre.graphlib.Graph();
g.setGraph({ rankdir: direction, nodesep, ranksep });
g.setDefaultEdgeLabel(() => ({}));

nodes.forEach((node) => {
const width = node.measured?.width ?? nodeWidth;
const height = node.measured?.height ?? nodeHeight;
g.setNode(node.id, { width, height });
});

edges.forEach((edge) => {
g.setEdge(edge.source, edge.target);
});

dagre.layout(g);

const layoutedNodes = nodes.map((node) => {
const pos = g.node(node.id);
const width = node.measured?.width ?? nodeWidth;
const height = node.measured?.height ?? nodeHeight;

return {
...node,
position: {
x: pos.x - width / 2,
y: pos.y - height / 2,
},
};
});

return { nodes: layoutedNodes, edges };
}

React Flow集成

tsx
import { useCallback } from react;
import {
ReactFlow,
useNodesState,
useEdgesState,
useReactFlow,
ReactFlowProvider,
} from @xyflow/react;
import { getLayoutedElements } from ./layout;

const initialNodes = [
{ id: 1, data: { label: 开始 }, position: { x: 0, y: 0 } },
{ id: 2, data: { label: 处理 }, position: { x: 0, y: 0 } },
{ id: 3, data: { label: 结束 }, position: { x: 0, y: 0 } },
];

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

// 应用初始布局
const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
initialNodes,
initialEdges,
{ direction: TB }
);

function Flow() {
const [nodes, setNodes, onNodesChange] = useNodesState(layoutedNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(layoutedEdges);
const { fitView } = useReactFlow();

const onLayout = useCallback((direction: TB | LR) => {
const { nodes: newNodes, edges: newEdges } = getLayoutedElements(
nodes,
edges,
{ direction }
);

setNodes([...newNodes]);
setEdges([...newEdges]);

// 布局后自适应视图并添加动画
window.requestAnimationFrame(() => {
fitView({ duration: 300 });
});
}, [nodes, edges, setNodes, setEdges, fitView]);

return (

export default function App() {
return (



);
}

useAutoLayout Hook

可复用的自动布局Hook：

typescript
import { useCallback, useEffect, useRef } from react;
import {
useReactFlow,
useNodesInitialized,
type Node,
type Edge,
} from @xyflow/react;
import dagre from @dagrejs/dagre;

interface UseAutoLayoutOptions {
direction?: TB | BT | LR | RL;
nodesep?: number;
ranksep?: number;
}

export function useAutoLayout(options: UseAutoLayoutOptions = {}) {
const { direction = TB, nodesep = 50, ranksep = 50 } = options;
const { getNodes, getEdges, setNodes, fitView } = useReactFlow();
const nodesInitialized = useNodesInitialized();
const layoutApplied = useRef(false);

const runLayout = useCallback(() => {
const nodes = getNodes();
const edges = getEdges();

const g = new dagre.graphlib.Graph();
g.setGraph({ rankdir: direction, nodesep, ranksep });
g.setDefaultEdgeLabel(() => ({}));

nodes.forEach((node) => {
g.setNode(node.id, {
width: node.measured?.width ?? 172,
height: node.measured?.height ?? 36,
});
});

edges.forEach((edge) => {
g.setEdge(edge.source, edge.target);
});

dagre.layout(g);

const layouted = nodes.map((node) => {
const pos = g.node(node.id);
const width = node.measured?.width ??