第十三章 · 可视化编排与执行追踪

本章定位：上一章讲了工作流有哪些节点（积木）。本章回答两个问题：用户怎么在界面上把积木搭成流程图？搭完后系统怎么执行这张图、并实时展示「执行到哪一步了」？ 前者是可视化编辑（基于 AntV X6），后者是引擎执行 + SSE 实时追踪 + 执行详情回填。两者合起来，构成了 SparkX 工作流「所见即所得、所执行即所见」的完整体验。

一、可视化编排：用 AntV X6 搭节点图

1. 为什么用 X6

工作流编辑器需要一个图形画布——用户拖拽节点、连线、看到整张流程图。SparkX 选用 AntV X6：

2. 画布初始化

// admin/src/views/workflow/edit.vue
const graph = new Graph({
    container: containerEl,
    selecting: true,      // 可选中
    history: true,        // 撤销重做
    panning: true,        // 可平移
    scroller: true,       // 可滚动
    interacting: true,    // 可交互
    connecting: {
        connector: 'smooth',       // 贝塞尔曲线连线
        allowLoop: false,          // ★ 禁止自环（DAG）
        allowNode: false,
        allowBlank: false,
        allowPort: validatePort,   // ★ 连接校验
        createEdge: () => new Shape.Edge({ /* 样式 */ })
    }
});

3. 节点用 Vue 组件渲染

每个节点类型注册一个 Vue 组件作为 X6 形状：

// admin/src/views/workflow/node.js
import { register } from '@antv/x6-vue-shape';
import LlmNode from './node/llm.vue';
import DatasetNode from './node/dataset.vue';
// ...

register({ shape: 'llm-node', component: LlmNode });
register({ shape: 'dataset-node', component: DatasetNode });
// ...
---

## 🔒 以上为本章部分预览（约 10%）

> 本章剩余 **90%** 内容包含：关键源码逐行拆解、设计细节与工程权衡、代码示例与生产实践要点。

<div class="unlock-cta">
  <button class="unlock-btn" onclick="openModal()">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
      <rect x="3" y="11" width="18" height="11" rx="2"/>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
    </svg>
    🔑 点击解锁本章完整内容
  </button>
  <span class="unlock-hint">加入知识星球，获取《SparkX 源码深度解析》全部 13 章</span>
</div>

> 💡 **本次展示的仅为部分预览内容（约 10%）**。完整的源码深度解析包含每一个技术点的完整实现细节。点击上方按钮扫码加入知识星球，解锁全部内容。