01｜Archify是什么？
PART｜ 自然语言画系统架构图
描述一句话："画出登录流程：Browser → Web App → API → JWT 验证 → Redis Session → PostgreSQL 兜底"
然后你得到的不是一张图片，而是一个可以打开、搜索、追踪路径、比较角色、播放引导故事的 HTML 文件。
一句话：给 AI 编程 Agent 用的架构图生成技能（Skill）。把一段系统描述或一个代码仓库，变成可分享、可探索的交互式技术地图——直接在对话中完成。
支持接入的 Agent 包括：Claude Code、Cursor、Codex CLI、OpenCode，以及记忆基础设施 Agent——Raven。
你告诉 Agent 一个系统描述或者指向一个代码仓库，Archify 分析后输出一个自包含的 HTML 文件。这个文件就是最终成品——不需要额外的渲染服务，浏览器打开即用。
02｜Archify 5 种系统架构图
PART｜ 5 种系统架构图
五种图类型，覆盖主流场景
Archify 支持五种技术图类型，各有明确的适用场景：
不确定用哪种？可以直接问：
...json
{
node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"
}
03｜Archify 生成 的图做什么
PART｜ 5 种系统架构图
生成出来的图能做什么？
这是 Archify 跟普通"生成一张图"工具最大的区别——输出的 HTML 是可交互的技术地图，而不是一张死图。
在里面你可以：
- /搜索并聚焦某个节点
- R追踪两个节点之间的精确有向路径
- Upstream / Downstream展开上下游依赖链
- L对比两个语义角色之间的真实流量
- P播放引导式故事，逐章展示关键路径
- F进入演示模式，一键变 PPT 级别的汇报视图
- T切换深色/浅色主题
所有这些交互都基于图的作者定义的节点和关系，不会"发明"不存在的拓扑，也不会对运行时行为做超出范围的推断。这是设计上的刻意约束，保证可信度。
导出格式一次搞定
一张图可以导出成：
- PNG—— 复制到剪贴板，直接粘贴进 Slack / Notion
- SVG—— 矢量格式，缩放不失真
- WebM—— 带动效的视频录制（浏览器原生）
- 1200×630 Share Card—— 标准 OG 图尺寸，放 README 或发社交媒体直接用
- Route Share Card—— 把追踪到的某条路径单独导出为 Share Card，完整架构图作为背景保留
04｜架 构 图 对比 功能
PART｜ 5 种系统架构图
这个功能有点意思：Architecture Delta。在 PR Review 或设计评审时，把变更前后的两个 JSON 快照丢进去：
...json
{
node archify/bin/archify.mjs compare architecture base.json head.json delta.html --json
}
它会生成一个 Before / Delta / After 三态对比图，标注哪些节点/边是新增、删除、修改、移位、重路由的，并附一份机器可读的验证收据。
这不是 diff 贴图，是结构化事实对比。
安全感来自哪里？原子化验证
很多 AI 生成工具有一个痛点：你不确定输出的东西是否可靠。
Archify 的设计回应了这个问题：
生成 → 校验 → 预览（可选）→ 交付，每一步都有 Gate。
有 schema 校验，格式不对直接拦截
有布局规则检查，确保视觉可读
有 HTML/SVG 完整性验证
有标签到路由的间距检查
只有所有检查通过，候选文件才会原子替换上一个已知好的输出。如果失败，返回的是带 diagnostics[] 的结构化 JSON，告诉你确切的问题是什么，以及哪些 supportedFixes 可以用——不是 Node 报错堆栈，不是让你猜。
还有一个可选的"桌面实时预览"模式（preview 命令），监听 JSON 文件变化，只有通过验证的版本才会刷新浏览器，失败时保持上一个有效图——这对在本地迭代图的人来说非常有用。
05｜快速 上 手
PART｜ 一行代码配置
安装只需一行：
...json
{
npx skills add tt-a1i/archify -g
}
然后告诉你的 Agent：
...json
{
Analyze this repository, then use archify to create a high-level runtime architecture diagram. Show 8–12 core components, one primary path, external dependencies, and trust boundaries.
}
中文 prompt 同样有效，对话里直接写就行。
迭代也很自然，比如接着说"把 Redis 加进来"、"把认证服务移到左边"、"高亮回滚路径"——Agent 会更新 JSON 源，其他结构保持不动。
06｜和 Mermaid 有什么区别？
PART｜ 区别与联系
Archify README 里明确写了：它不是 Mermaid 的主题包，也没打算做通用绘图编辑器。
Mermaid 的核心是"代码即图"的文本语法，用来生成静态图，简单场景非常够用。
Archify 的定位是：技术意图 → 可信通信产物。
它的差异点在于：
有类型化的 JSON 中间表示（IR），每种图模式都有 schema
有生成 → 验证 → 交付的工程化流程，失败有明确修复指引
输出是带完整交互能力的 HTML，而不是一张图
支持"Architecture Delta"做变更对比
支持深度链接（#route=web~db），任何一个视图都能分享给别人直接打开
开发者写设计文档时—— 不用开 Figma，不用画图，对着代码仓库或者设计描述说一句话，交互式架构图直接出来，还能导出成 Share Card 贴进 RFC 文档。
技术博主写文章时—— 以前配架构图要么截图、要么手画，现在可以直接生成 HTML 版的动态架构图，也可以导出 PNG 直接用。
做 Code Review 时—— Architecture Delta 功能让"这次变更动了哪些依赖关系"变成一张图，而不是靠人脑 diff。
技术分享和汇报时—— 演示模式 + Share Card，PPT 里的配图解决了。
一些数字
- 10,200+ Stars
，793 Forks，活跃迭代中（当前稳定版 v2.13.0）
11 个内置检验场景，附 JSON 源和验证收据，公开在 Proof Lab
131 次提交，有完整的 Changelog 和 Roadmap
MIT 协议，免费商用
更多transformer，VIT，swin tranformer 参考头条号：人工智能研究所 v号：人工智能研究Suo, 启示AI科技动画详解transformer 在线视频教程