五步画出可评审的工作流图：Archify Agent 工具调用链完整实操

五步画出可评审的工作流图Archify Agent 工具调用链完整实操【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify你想把 Agent 的工具调用链含审批门和异常分支画成一张能进评审、能分享的图。本稿以 Archify 自带的agent-tool-call.workflow.json为例从装技能到产出 0 错误 0 警告的交互式 HTML再逐个字段讲透工作流图workflow diagram。效果先行审批门、异常分支与三章可播放的故事打开仓库里渲染好的成品 workflow-agent-tool-call.html。6 条横向泳道排开各角色UI、Agent Runtime、Policy Boundary、Exception Handling、Tool Execution、Observability。最该先看的是 Approval Gate——它位于主路径上被拒绝后流程直接跌入 Exception 泳道再沿虚线箭头回到 Retry Path。顶部章节按钮可逐章聚焦按P还能自动播放主路径最小出图路径3 条命令从安装到 HTML以下命令假设你位于仓库的archify/目录。第一步装技能并自检环境两条命令都应退出码 0之后对 Agent 说Use archify to draw this CI/CD flow即可出图只想试一次把第一行换成npx skills use tt-a1i/archifyarchify --agent codexnpx skills add tt-a1i/archify -g node bin/archify.mjs doctor第二步出图。渲染器先按 workflow.schema.json 严格校验再布局成功后得到一个自包含 HTML失败则非零退出并给出带路径前缀的报错不会留一张坏图node archify/renderers/workflow/render-workflow.mjs archify/examples/agent-tool-call.workflow.json my-workflow.html第三步查交付质量。showcase 回执应报 9 项成品检查、0 错误 0 警告只报 4 项检查的属于基础校验不算 showcase 通过node bin/archify.mjs validate workflow archify/examples/agent-tool-call.workflow.json --quality showcase --json背后流程从 JSON 到像素的五步编译推断你或 Agent 把流程描述转成带类型的 JSON IR——顶层就是lanes、nodes、edges三个数组外加可选的phases、groups、cards校验内置独立校验器对照 schema 逐字段检查无需安装任何依赖布局渲染器按泳道和列号算出像素坐标。泳道高 104、节点默认 92×52、列中心固定 6 个位置不用手写坐标布局门禁检查节点重叠、标签碰撞、无关箭头交叉、不足 8px 的微型线段。失败时返回稳定规则码、精确对象、测量证据和supportedFixes清单交付与导出deliver把规格字节冻结成快照再渲染全部检查通过才原子替换目标 HTML回执带规格与成品的 SHA-256 和字节数。HTML 自带主题切换、缩放搜索、PNG/WebM/1200×630 分享卡导出。整条流程见下图字节冻结与回执字段定义详见 delivery-contract.md。字段逐个讲透撑起工作流的 4 个核心字段字段作用示例值lanes横向泳道一条泳道一个职责边界异常路径加variant: exception{ id: policy, label: Policy Boundary }nodes用lanecol0–5定位语义typefrontend/backend/security/database 等决定配色与图例{ id: approval, lane: policy, col: 3, type: security }edgesvariant控制风格emphasis/security/dashedrole标记 return/branch/errorroute预设处理跨泳道弯折{ from: router, to: approval, label: needs approval?, route: drop }mainPath按顺序列出主路径节点 id渲染器逐步验证相邻步骤有对应边且从左向右推进[user, chat, planner, ...]其余字段phases、groups、cards、meta.views以 workflow.schema.json 的约束为准布局预算与允许值见 workflow 渲染器文档。迁移到自己项目4 步 4 个检查点拿不准该用哪种图时先问内置场景指南它只返回类型推荐和配方不替你画图node bin/archify.mjs guide Show approval, retry, and rollback --json --lang zh列角色把每个职责边界UI、运行时、策略、工具、观测写成一条泳道异常泳道加variant: exception。检查点泳道不超过 6 条每条泳道内有真实节点没有堆放区。排边主路径variant: emphasis跨泳道决策security异步旁路dashed回走箭头role: return。检查点短邻居连线不加标签跨泳道决策和返回必须带标签。切阶段并声明主路径用phases划 Intake / Execute / Report 这类故事拍点把 happy path 节点按序写入mainPath。检查点相邻 id 必须有对应边且列号递增否则直接报错。校验交付候选冻结后跑一次deliver拿回执再用visual-check确认四档桌面分辨率不溢出node bin/archify.mjs deliver workflow my-flow.json my-flow.html --quality showcase --json node bin/archify.mjs visual-check my-flow.html --json检查点回执 0 错误 0 警告且两个 SHA-256 值能与你的 JSON 对上。打开交付的 HTML切换主题、过一遍 Export 菜单常见坑与排查3 个高频报错mainPath step ... has no matching edge/moves backward from colmainPath相邻 id 缺对应边或把回走箭头写进了 happy path。解法补上缺失的边或把回走箭头移出mainPath改成普通role: return边。composition/proper-crossingshowcase 模式下两条无关箭头形成 X 交叉。解法先换route预设drop、return-left、outside-right、bottom-channel或改端点出边方向诊断点名后才加至多一个labelAt之类的控制别手写via点。同一泳道塞不下两个节点列中心间距 70–132px列 1↔2 和 3↔4 放不下 92px 宽的默认节点。解法跳过一列或调小该节点的width。这三类的完整失败规则表见 workflow 渲染器文档修复时只改诊断点名的对象且控制在supportedFixes范围内。Archify 兜底的是画得正确这一半schema 校验、布局门禁、字节冻结加 SHA-256 回执你要讲清的只有画成这样。下一步动作把 agent-tool-call.workflow.json 拷进你的项目替换成自己的组件名和边标签再跑一遍validate直到 0 错误 0 警告。继续深入可看入门 SKILL.md进阶 Agent 编图实践手册规范 authoring-contract.md 与 schemas/README.md。【免费下载链接】archifyAgent skill for beautiful, verifiable architecture, workflow, sequence,>项目地址: https://gitcode.com/GitHub_Trending/arch/archify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考