用途：为使用 React Flow（@xyflow/react v12+）构建生产级节点式界面提供模式与最佳实践，适用于工作流编辑器、流程图、可视化编程拖拽界面等场景。
主要能力：按优先级组织规则，包括安装配置（setup-）、性能优化（perf-）、节点模式（node-）、边模式（edge-）、状态管理（state-）、Hooks 用法（hook-）、布局定位（layout-）、交互模式（interaction-）、TypeScript 集成（typescript-）。覆盖自定义节点与边组件、拖拽添加节点、连接校验、保存/恢复与撤销重做、dagre/elkjs 自动布局，以及 100+ 节点图的性能优化。
使用方式：安装 @xyflow/react 并引入样式 import '@xyflow/react/dist/style.css'；用 ReactFlow 组件配合 useNodesState、useEdgesState、addEdge 管理状态，nodeTypes/edgeTypes 需定义在组件外部或用 useMemo 缓存，回调用 useCallback 包裹。常用 Hooks 有 useReactFlow、useNodesData、useHandleConnections、useConnection、useStore。保存用 toObject()，恢复时设置 nodes、edges 与 viewport。
限制与注意：useReactFlow 必须在 ReactFlowProvider 内使用；无法创建边通常是缺少 onConnect；节点不可拖动需检查 nodesDraggable；TypeScript 需使用泛型 useReactFlow<NodeType, EdgeType>()。资料未提供该技能的收费、价格与具体平台信息。