archify：带动态效果的架构图生成技能

Archify：让 AI Agent 画出可验证的交互式系统图谱

它是什么

Archify 是一个面向 AI 编码 Agent 的「技能包」（Agent Skill），作用是把一段代码库说明或系统描述，直接变成精致、可交互的系统图谱——整个生成过程就发生在对话窗口里。它支持 Cursor、Claude Code、Codex CLI、OpenCode 等主流 Agent 工具链，本身则是一个 Node.js 渲染与校验系统。

要理解它的价值，得先知道它把工作拆成了两段：Agent 负责输出带类型的 JSON IR（IR 即 Intermediate Representation，中间表示），Archify 负责把这个 IR 确定性地编译成 HTML / SVG。这是一种刻意的分工——大模型擅长理解语义、识别系统里有哪些组件和调用关系，却不擅长稳定地产出像素级的图形代码；让模型只写结构化数据、把渲染交给确定性程序，就能同时拿到「理解力」和「可复现性」。生成的图谱带有限动效、支持明暗主题、内置品牌标记，并且输出为自包含的单文件，方便直接打开、演示和分享。

核心功能 / 内容清单

五种图表类型 + 四种预设样式：覆盖架构图（architecture）、工作流（workflow）、时序图（sequence）、数据流图（data-flow）和生命周期图（lifecycle）。四种预设配合明暗两套主题，加上内置的品牌标记与受控的有限动效，让输出不用二次美化就能直接放进正式材料。
架构变更对比（Before / Delta / After）：可以拿两个已经过校验的快照做对照，把差异拆成「新增、删除、变更、移动、重路由」五类事实逐条列出。这一点对代码评审尤其有价值——审阅者看到的不是笼统的「架构变了」，而是具体哪条依赖被改道、哪个组件被移除。
所有交互都落回事实依据：图谱支持节点搜索、比较不同角色、播放引导式故事线（guided stories），还可以按需打开与特定修订版本绑定的源码、沿着上游和下游追溯作者声明的可达范围与精确路由。换句话说，互动浏览不会「脑补」出原系统里不存在的拓扑。
单文件交付，多种导出格式：产物是自包含的 HTML，不依赖服务器或外部资源，双击即可打开；同时可导出 PNG、SVG、WebM 动图，以及 1200×630 的分享卡片，适配文档、演示和社交传播等不同场合。
类型化 IR 与确定性校验：因为中间表示是带类型、可校验的，渲染前的检查能提前暴露结构问题，而不是等到看图时才发现连错了线。校验通过后产出的图形是可复现的——同样的 IR 得到同样的结果。
不强制绑定仓库：即使手上没有对应的代码仓库，也可以只在对话里描述系统，让 Agent 据此生成图谱。

典型使用场景

场景一：合并前的架构影响评审。 某次改动引入了新的消息队列、拆分了原来的服务边界。评审者在合并前让 Agent 基于改动前后两个版本各生成一份快照，再用 Before / Delta / After 视图对照，重点看「重路由」和「移动」两类事实：哪些调用关系被悄悄改了方向？哪些组件的位置变化其实暗示了职责迁移？这份对比可以直接作为评审意见的附件，把讨论从主观印象拉回到具体条目。

场景二：陌生子系统的快速上手。 新人接手一个缺少文档的模块时，传统做法是逐个文件读调用链。改成让 Agent 描述这个子系统的结构并生成交互式 HTML 后，读者可以先在图上搜索关键节点、展开上下游关系、点开与当前版本绑定的源码确认细节，最后播放一遍引导式故事线，把「一次请求完整走过哪些环节」串起来。图谱在这里承担的是导航地图的角色，而不是最终结论。

场景三：设计文档、RFC 与技术汇报。 需要向非工程背景的读者解释系统时，可以把 HTML 图谱嵌入文档，或导出 PNG / SVG 放进 RFC；需要在周报里体现设计方案的变化，则用 WebM 动图或 1200×630 分享卡。由于输出是单文件、无外部依赖，转发和归档都不会出现资源丢失的问题。

适合谁用

日常使用 AI 编码 Agent 的开发者：已经在 Cursor、Claude Code、Codex CLI 或 OpenCode 里工作，希望顺手把系统结构可视化出来，而不是切换到另一个绘图工具重新画一遍。
承担架构评审职责的 Tech Lead 与架构师：需要一个能把变更讲清楚的载体，尤其看重「差异是被枚举出来的事实」而非主观描述。
需要向非工程角色讲系统的人：产品经理、设计师、技术文档作者，可以用交互式图谱替代大段文字说明，降低理解门槛。
写 RFC、技术方案和博客的人：需要可导出、可嵌入、风格统一的图形素材。

相对而言，如果你的需求是高度自由的手绘风格插画，或者工作流里完全没有 Agent 环境，Archify 的定位与这类需求并不吻合。

快速上手

安装方式是通过 skills 命令把技能加到本地环境：

```

npx skills add tt-a1i/archify -g

```

其中 -g 表示全局安装。使用 Cursor 的话，可以先查看面向 Agent 的快速开始页面，里面会给出全局与项目级两种命令的确切写法。关键的一点是：使用它并不要求先有一个代码仓库——直接在任意 Agent 对话里描述你想画的系统即可开始。具体的目录结构、命令参数和宿主差异，请以官方 README 为准。

注意事项

运行环境依赖 Node.js：Archify 本身是 Node.js 渲染与校验系统，且通过 npx 分发，因此本地需要可用的 Node.js 与 npm 环境。
注意版本状态：当前处于开发版本 v2.17.0-dev.1，尚未到稳定版。这意味着 IR 结构、命令参数和输出细节都可能继续调整，把它接入正式流水线前建议先固定版本。
协议为 MIT：属于宽松许可，允许修改、分发和商用，但按惯例仍需保留原有的版权与许可声明。
技能机制依赖宿主支持：作为 Agent Skill，它的触发方式和可用性取决于宿主 Agent 对 Skill 机制的支持程度，不同工具之间的命令并不通用。
「可验证」有前提：图谱中的源码核验与事实追溯，依赖 IR 与特定修订版本之间的对应关系。如果源码此后发生了变动，旧快照的引用就会过期，需要重新生成。
输出单文件意味着体积：自包含 HTML 把所有样式、脚本和数据打包在一起，便于分发，但文件可能偏大，嵌入网页时需留意加载策略。
它渲染你所描述的，不替你做判断：图谱的正确性上限取决于输入描述与 IR 的质量。工具能保证渲染的确定性和一致性，但无法替你验证原始设计是否合理。