Archify 图解导读
这组图把教程里最难仅靠文字建立的五类模型单独拿出来：组件关系、跨模块调用、分支流程、事件投影和状态变化。每张图都是独立 HTML，可使用缩放、搜索、关系追踪、主题切换和导出；教程正文只负责解释与提供证据，不在页面中嵌入 iframe。
证据基线：本地教程，以及源码教程所分析的固定提交
47f943859bef60e4160492346772ded9b24f765a。Archify JSON 是图的可审查真源；已有 Mermaid 只作为拓扑与语义证据，没有直接复制。
先看哪一张
| 优先级 | 交互图 | 读完后应能回答的问题 | 主要证据 |
|---|---|---|---|
| P0 | Agent、Harness 与插件服务全景 | LLM、Agent、Harness 各自负责什么，工具、会话和安全边界如何协作？ | 什么是 Agent、Harness 架构 |
| P0 | 一次 Agent Turn 完整调用链 | 一个 turn 怎样跨越 UI、AgentLoop、LLM、工具与 Session Log，并进入下一 step？ | 请求管线、Agent Loop 源码课 |
| P0 | 工具执行、权限与批准流程 | 一个 tool call 在 allow、deny、ask 三种决策下分别发生什么？ | Function Calling 与工具、工具源码课 |
| P0 | Session Log、Surface 与多种投影 | 为什么日志是真相，而模型上下文、UI、回放和遥测只是不同投影？ | 会话日志与压缩、Session Log 源码课 |
| P0 | Agent 流式 UI 生命周期 | streaming、工具执行、等待批准、恢复和终态之间怎样转换？ | 前端流式 UI、生产级心智模型 |
| P0 | React-free 前端流式运行时 | Host 事件如何在 React 之外组装为 immutable snapshot，再安全地进入组件？ | React-free 对象层与快照、持久化与 Web 源码课 |
| P1 | 生产级 RAG 数据链路 | 离线索引与在线问答在哪里汇合，空结果和引用怎样进入 UI？ | 生产级 RAG |
| P1 | MCP 与内部工具归一化架构 | 内部插件与第三方 MCP Server 怎样归一为同一工具执行与展示模型？ | MCP 与工具互操作 |
建议先按 P0 顺序阅读，再看 RAG 与 MCP 两张扩展图。每次先只追一条高亮主路径，然后再打开关系追踪查看分支，不必一次读完所有标签。
如何选择图类型
| 你想讲清的关系 | Archify 类型 | 适合的问题 | 不适合的问题 |
|---|---|---|---|
| 组件、边界和依赖 | architecture | 谁负责什么、系统边界在哪里、依赖方向如何 | 单次请求的严格先后顺序 |
| 参与者之间的时间顺序 | sequence | 谁先调用谁、响应何时返回、一个 turn 有几个 step | 静态模块清单 |
| 决策与分支 | workflow v2 | 校验、批准、允许、拒绝、异常回退 | 没有分支的三步直线过程 |
| 数据来源、加工与投影 | dataflow | 数据从哪里来、如何转换、被谁消费 | 只想解释一个名词 |
| 状态与合法转移 | lifecycle | 当前处于什么状态、什么事件触发恢复或终止 | 普通组件依赖 |
不单独绘图的内容包括 token 定义、概念清单、面试问答、单个接口示例，以及 SSE/WebSocket 的简单优缺点。这些信息用正文、代码或表格更容易比较。
从证据到图的制作方法
- 先写出“读者看完后必须能回答的一个问题”，它决定主路径。
- 从真实源码或教程中提取参与者、稳定标识符、数据、分支和恢复路径；单图主节点控制在 12 个以内。
- 读取
schemas/common.schema.json、对应类型 Schema 和一个同类型 Example。示例只用于学习字段，不复制其业务内容。 - 源规格固定使用
meta.quality_profile: "showcase"、meta.locale: "zh-CN"、classic静态模式；代码标识符保留原文。 - 首版交给自动布局。只有验证器给出具体碰撞证据时，才添加一处有针对性的
labelAt、channelX或channelY。 - 每次修改后先验证，通过后再交付 HTML；视觉修改后必须重新验证和交付。
- 最后运行
visual-check，并对明暗主题截图做感知审查。
bash
node bin/archify.mjs validate <type> <candidate.json> --quality showcase --json
node bin/archify.mjs deliver <type> <candidate.json> <artifact.html> --quality showcase --json
node bin/archify.mjs visual-check <artifact.html> --json本教程的源规格位于 docs/learning/agent-frontend-interview/diagrams-src/*.archify.json，发布文件位于 docs/public/diagrams/agent-frontend-interview/*.html。
可复制请求模板
text
使用 $archify，根据 <源码路径与行号> 生成一张 <type> 图。
读者需要通过图回答：<核心问题>。
主路径：<节点与方向>。
分支：<异常、审批或恢复路径>。
必须保留：<协议、事件名、代码标识符>。
不包含：<低价值细节>。
使用中文说明，代码标识符保持原样，交付 showcase 质量的独立 HTML。如何判断图画得是否有效
- 不回看正文，也能从标题、节点和箭头复述主路径。
- 高亮路径只表达一个核心答案；异常和恢复分支与主路径视觉上有区分。
- 图中的类名、事件名和协议名能回到真实源码或教程证据。
- 明暗主题下标签均可读，连线不穿过无关节点，首屏没有横向或纵向溢出。
- 如果图只是把一段文字拆成几个框，或必须读完所有说明卡才理解，它就不值得保留。