用五种可交互技术图，把复杂系统从不同角度讲清楚。
你会认识 Architecture、Workflow、Sequence、Data Flow 和 Lifecycle，再安装 Archify、完成一张示例图并学会探索与导出。
- 准备
- Node.js 18+ 与 Codex
- 需要复制
- 1 条命令 + 1 段任务
- 最终得到
- JSON 源文件 + 单文件 HTML
打开官方 Proof Lab 查看可交互成品 Archify 不是一张“画完就丢”的图片
它是一个 Agent Skill：Codex 先读你的仓库或系统描述，写出结构化 JSON，再经过校验生成独立 HTML。后续修改发生在 JSON 上，所以增加一个节点时，不需要推倒整张图重画。
画真实仓库时，先检查代码证据，再决定组件与连线；交互只使用作者写入的关系。
保留 JSON IR，下一轮只改相关节点、路径或说明，不干扰已经正确的结构。
HTML 内嵌 Viewer 和 SVG，发给同事后可以直接打开，不需要部署在线服务。
把 Archify 安装到 Codex
先在终端运行 node --version。Archify Renderer 要求 Node.js 18 或更高版本；能看到 v18、v20、v22 等版本号即可继续。
$archify，或直接说“使用 archify 画图”Codex 会自动检测 Skill 变化；如果选择器里暂时没有出现，重启 Codex 后再试。
Codex 的 Skill 扫描位置与自动检测行为来自 OpenAI 官方 Build skills 文档 。
从 Architecture 开始，生成第一张示例图
五种类型的生成方法相同，这里用 Architecture 完成第一次练习。把 Codex 打开在你想分析的项目目录，然后发送下面的任务；第一次只保留 8–12 个核心组件。
分析当前仓库，然后使用 archify 生成一张高层运行时架构图。
要求：
1. 只保留 8-12 个核心组件；
2. 突出一条从用户请求到数据存储的主要路径；
3. 标出外部依赖与信任边界；
4. 使用中文标签；
5. 交付前完成 showcase 校验和多尺寸视觉检查；
6. 返回 JSON 源文件、HTML 成品路径和校验结果。先限定分析对象，避免把构建脚本、测试和业务链路混在一起。
让读者第一眼看到主路径，辅助信息可以放进说明卡片。
要求 Codex 从代码中核对，不把猜测画成确定关系。
“生成了 HTML”不等于完成；最后还要看错误、警告和真实截图。
深色主题
浅色主题五种图分别解决什么问题
先问“读者打开这张图，最想看懂什么”。同一个系统可以画成不同类型，但一张图只承担一个主要阅读任务。
服务、数据库、外部依赖、信任边界
CI/CD、审批、工具调用、Runbook
登录、鉴权、缓存回源、异步调用
ETL、数据血缘、PII、下游消费者
等待、重试、取消、成功与失败终态
使用 archify 把下面的登录链路画成 Sequence 图：
Browser -> Web App -> API -> JWT 校验 -> Redis Session 查询 -> PostgreSQL 回源。
把缓存命中作为主路径，把缓存未命中和数据库回源作为次要路径，并标出返回结果。简单判断：看“组成”选 Architecture，看“步骤”选 Workflow，看“先后”选 Sequence，看“数据移动”选 Data Flow，看“状态变化”选 Lifecycle。
在对话里细调，再到 Viewer 里探索
第一版出来后继续在同一段对话里修改。Archify 会保留 Typed JSON，只调整你点名的部分；打开 HTML 后，则用 Viewer 查节点、走路径和导出结果。
继续修改刚才的 Archify 成品：
- 增加 Redis，并放在 API 与数据库之间；
- 突出登录失败后的回退路径；
- 保留已有 Typed JSON，只修改相关节点和连线；
- 重新校验并交付同一个 HTML。按 / 搜组件并聚焦，快速定位 API、队列或数据库。
按 R 或点 PATH，选择起点与终点，逐站查看作者定义的有向路径。
按 T 切深浅主题，按 S 在 Classic、Signal Flow、Blueprint 等预设间切换。
按 E 打开 Export，可复制 PNG，或下载 SVG、WebM 与 1200×630 Share Card。
怎样判断这张图真的完成了
Archify 的“完成”包含结构校验、交付回执和视觉复核。下面四项都拿到，再把文件交给别人。
同时得到可继续编辑的 JSON 源文件
showcase 校验无 composition error 和 warning
离线打开也能搜索、缩放、切换主题
多尺寸截图已生成，并由 Agent 实际检查
archify先确认安装命令成功执行，再输入 $archify 查看；仍未出现时重启 Codex。
运行 node --version，升级到 Node.js 18 或更高版本后重新执行。
只修改 subject 指向的对象，并使用 supportedFixes 给出的修复方式，不要整图重写。
让 Codex 查看多尺寸截图，优先删低价值连线、压缩辅助信息，再重新校验与交付。