[{"data":1,"prerenderedAt":7},["ShallowReactive",2],{"example-markdown-content:zh:ai-model-workflow-graph":3},{"markdown":4,"isPaidExample":5,"isTruncated":5,"charLimit":6},"# AI 模型工作流图\n\n## 这个示例构建了什么\n\n这个示例构建了一个固定位置的工作流面板，它看起来更像 AI 生成流水线，而不是标准的节点图。每个节点都被渲染为深色圆角卡片，包含标题、左右两列参数以及堆叠的选项行。其中一些选项行会渲染为特殊区块，包括多行文本输入框和图片预览。\n\n可见连线并不是附着在整个节点框上，而是附着在具体的输入行和输出行上，因此整个图更像一个参数依赖看板。用户可以平移和缩放画布，使用缩略图在宽布局中导航，并在点击节点时只高亮属于该步骤的依赖关系。\n\n## 数据是如何组织的\n\n源数据从 `MyGraph-data.ts` 中的 `myJsonData` 开始，包含 `rootId`、`nodes` 数组，以及空的 `lines` 和 `fakeLines` 数组。每个节点都带有一个 `data` 对象，其中分为 `input`、`output` 和 `options` 三个部分。自定义节点渲染器正是基于这个结构生成卡片布局。\n\n依赖模型单独存放在 `modelRelations` 中。每条关系都会同时描述上游模型 id 和输出参数，以及下游模型 id 和输入参数",true,500,1782615373527]