devlab-web-xyflow-usagelisted

# devlab-web-xyflow-usage ## 库信息 | 项 | 值 | |---|---| | 名称 | @xyflow/react (React Flow) | | GitHub | https://github.com/xyflow/xyflow | | 官方文档 | https://reactflow.dev | | npm | https://www.npmjs.com/package/@xyflow/react | | 当前版本 | ^12.11.1 | | 核心能力 | 节点-边画布、自定义节点/边类型、zoom/pan、拖拽、连线、子流程 | | 体积 | ~150KB (react + xyflow) | ## 适用场景 - 需要可交互的节点-边画布（流程图、拓扑图、生命周期地图等） - 节点需要完全自定义 DOM 结构 - 需要 zoom/pan/fitView 画布控制 - 需要节点展开/折叠、点击交互 - 已有 React 19 环境 ## 不适用场景 - 简单的时间线/甘特图 → 用 vis-timeline 或纯 CSS - 纯静态的流程图展示 → 用 SVG/Canvas 直接画 - 需要亚像素级精度的图表 → 用 ECharts/D3 ## 核心概念 ### 节点 (Node) ```typescript interface Node { id: string; // 唯一标识 type: string; // 对应 nodeTypes 中的组件名 position: { x: number; y: number }; // 画布坐标 data: Record<string, unknown>; // 传递给自定义节点的数据 } ``` ### 边 (Edge) ```typescript interface Edge { id: string; source: string; // 源节点 id target: string; // 目标节点 id type?: string; // 对应 edgeTypes 中的组件名 animated?: boolean; style?: CSSProperties; } ``` ### 自定义节点 ```tsx import { Handle, Position, type NodeProps } from "@xyflow/react"; function MyNode({ data }: NodeProps) { return ( <div className="my-node"> <Handle type="target" position={Position.Left} /> {/* 自定义内容 */} <Handle type="source" position={Position.Right} /> </div> ); } const nodeTypes = { my: MyNode }; ``` ### 画布配置 ```tsx <ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} colorMode="dark" // 暗色主题