多 Agent 协作状态机的可视化流转图当系统架构从单一的 Prompt 补全演进到多智能体Multi-Agent协同作业时前端工程面临的挑战发生了质的转变。在传统的聊天窗口中数据流是线性的问答而在多 Agent 体系中规划者Planner、执行者Executor、评审者Reviewer与总结者Summarizer之间存在复杂的派发、重试、分支与聚合关系。如果依旧用线性的时间轴去堆砌这些消息用户面对屏幕上不断翻滚的中间思考过程只会感到混乱与失控。我们需要将复杂的底层协作状态机转化为一张具备生命力的动态流转拓扑。状态机与图拓扑的映射模型多 Agent 协同本质上是一个有向无环图DAG或带有局部环路的有限状态机FSM。每个 Agent 节点具有独立的生命周期idle就绪、thinking思考中、acting调用工具、verifying验证结果以及failed/completed。节点之间的连线代表消息投递、上下文传递或控制权移交。为了让前端能够以 60 FPS 的流畅度渲染复杂的拓扑变迁必须将业务状态与可视化渲染解耦。export type AgentState idle | thinking | acting | verifying | completed | failed; export interface AgentNodeData { id: string; name: string; role: string; status: AgentState; currentTask?: string; tokensUsed: number; } export interface AgentEdgeData { source: string; target: string; payloadType: task_dispatch | feedback | final_result; active: boolean; } export class AgentTopologyEngine { private nodes: Mapstring, AgentNodeData new Map(); private edges: AgentEdgeData[] []; private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private animationFrameId: number | null null; private particleOffset: number 0; constructor(canvas: HTMLCanvasElement) { this.canvas canvas; this.ctx canvas.getContext(2d)!; } public registerNode(node: AgentNodeData): void { this.nodes.set(node.id, node); } public addEdge(edge: AgentEdgeData): void { this.edges.push(edge); } public updateNodeStatus(id: string, status: AgentState, task?: string): void { const node this.nodes.get(id); if (node) { node.status status; if (task ! undefined) node.currentTask task; this.render(); } } public startLiveAnimation(): void { const renderLoop () { this.particleOffset (this.particleOffset 0.5) % 20; this.draw(); this.animationFrameId requestAnimationFrame(renderLoop); }; renderLoop(); } public stopLiveAnimation(): void { if (this.animationFrameId ! null) { cancelAnimationFrame(this.animationFrameId); this.animationFrameId null; } } private draw(): void { const { width, height } this.canvas; this.ctx.clearRect(0, 0, width, height); // 绘制连线与流动粒子水墨流淌意境 this.edges.forEach(edge { this.drawEdgeWithParticles(edge); }); // 绘制 Agent 节点 this.nodes.forEach((node, id) { this.drawNode(node); }); } private drawEdgeWithParticles(edge: AgentEdgeData): void { // 简化的节点坐标计算示例 const sourcePos this.getNodePosition(edge.source); const targetPos this.getNodePosition(edge.target); this.ctx.beginPath(); this.ctx.moveTo(sourcePos.x, sourcePos.y); this.ctx.lineTo(targetPos.x, targetPos.y); this.ctx.strokeStyle edge.active ? #3b82f6 : #cbd5e1; this.ctx.lineWidth edge.active ? 2 : 1; this.ctx.stroke(); if (edge.active) { // 粒子流光动效模拟状态机之间的脉冲消息传递 this.ctx.save(); this.ctx.setLineDash([4, 8]); this.ctx.lineDashOffset -this.particleOffset; this.ctx.strokeStyle #60a5fa; this.ctx.lineWidth 2; this.ctx.beginPath(); this.ctx.moveTo(sourcePos.x, sourcePos.y); this.ctx.lineTo(targetPos.x, targetPos.y); this.ctx.stroke(); this.ctx.restore(); } } private drawNode(node: AgentNodeData): void { const pos this.getNodePosition(node.id); const statusColorMap: RecordAgentState, string { idle: #94a3b8, thinking: #f59e0b, acting: #3b82f6, verifying: #8b5cf6, completed: #10b981, failed: #ef4444 }; // 节点外圈呼吸光晕 if (node.status thinking || node.status acting) { this.ctx.beginPath(); this.ctx.arc(pos.x, pos.y, 28, 0, Math.PI * 2); this.ctx.fillStyle statusColorMap[node.status] 22; this.ctx.fill(); } // 节点本体 this.ctx.beginPath(); this.ctx.arc(pos.x, pos.y, 20, 0, Math.PI * 2); this.ctx.fillStyle #ffffff; this.ctx.fill(); this.ctx.strokeStyle statusColorMap[node.status]; this.ctx.lineWidth 2; this.ctx.stroke(); // 文本标注 this.ctx.fillStyle #1e293b; this.ctx.font 12px system-ui, sans-serif; this.ctx.textAlign center; this.ctx.fillText(node.name, pos.x, pos.y 36); } private getNodePosition(id: string): { x: number; y: number } { // 生产环境中通常结合 Dagre 或力导向算法动态布局 const layoutMap: Recordstring, { x: number; y: number } { planner: { x: 100, y: 150 }, executor_1: { x: 300, y: 80 }, executor_2: { x: 300, y: 220 }, reviewer: { x: 500, y: 150 } }; return layoutMap[id] || { x: 0, y: 0 }; } private render(): void { if (!this.animationFrameId) { this.draw(); } } }节点布局算法的工程取舍在展示 Multi-Agent 拓扑时常见的布局策略有两种力导向布局Force-directed与层次化分层布局Sugiyama / Dagre。对于探索式、网状通信且节点动态激增的场景力导向图具有较好的自适应能力但在企业级业务协同流程中力导向布局的“漂移感”会让用户无法建立稳定的空间认知记忆。实际开发中更推荐采用层次化分层布局以输入端为源头、输出端为终点自左向右或自上而下形成明确的因果水流并在分支节点执行时通过呼吸微动效指引视觉焦点。意图传递与微动效克制图表不仅是冰冷的数据结构呈现更是人机意图交流的桥梁。许多图表库喜欢堆叠绚烂的粒子爆破或高频闪烁这会极大增加用户的认知负荷。在 Multi-Agent 协作可视化中动效必须保持克制。只有处于active状态的连线才承载虚线流动节点状态跃迁采用平滑的色彩渐变与半径插值。如同水墨画中的留白清晰的拓扑主干与温和的脉冲节奏才能让使用者在面对复杂多智能体计算时一眼洞察系统的协作瓶颈与执行脉络。