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 在线视频教程
