用途：构建工作流/DAG 可视化仪表盘，为智能体状态创建自定义 ReactFlow 节点，集成 ELKjs 自动布局，将 WebSocket 执行事件接入 ReactFlow 状态，并实现缩放、平移、选择与节点交互。不适用于静态 Mermaid 图、通用 React 组件开发或非图类可视化（图表、表格）。
主要能力：采用 Zustand 存储管理 nodes/edges，通过 applyNodeChanges/applyEdgeChanges 处理变更，updateNodeData 更新节点数据；自定义 AgentNode 按状态着色并展示角色、技能、输出摘要与成本指标；ELKjs 分层布局支持垂直/水平方向与正交边路由；WebSocket 与 REST API 数据接入。
使用方式：安装 @xyflow/react、zustand、elkjs，引入 '@xyflow/react/dist/style.css'；用 ReactFlowProvider 包裹仪表盘，将 nodes、edges、nodeTypes 与变更回调传给 ReactFlow 组件，通过 Panel 放置布局按钮。
限制与注意：nodeTypes 必须定义在组件外或用 useMemo，否则无限重渲染；状态更新需创建新节点对象；v12 中 xPos/yPos 改为 positionAbsoluteX/positionAbsoluteY，nodeInternals 改为 nodeLookup；ELK 布局需显式传入 measured 宽高；fitView 需包在 requestAnimationFrame 中；交互元素加 className="nodrag"。仅在拓扑变化时重新布局，避免每次状态更新都调用 ELK。具体安装命令与版本要求暂未提供。