架构图这件事有个两难：手画吧，改一次布局全废，代码动了几行图就对不上了；让 Agent 画吧，它给你吐一张看着挺像那么回事的图，但节点连错、方向反了、少画了三个服务，你还得一个个核对。问题在于模型是在"生成图片"，而图片没有对错可言。
Archify 换了个思路：不让模型画图，让它出结构化的数据，画图交给确定性的编译器。
是什么
Archify 是 2026 年 4 月开源的项目，JavaScript 写成，MIT 协议，当前版本 v2.16.0（2026-08-30 发布），开发线已经走到 2.17.0-dev.1，仓库到 2026 年 9 月 18 日还有提交。GitHub 上 6.7 万 Star，4453 Fork。
它的官方定位是"把代码库或系统描述变成可交互的系统图，直接在对话框里完成"。技术上的关键分工是：面向 Cursor、Claude Code、Codex CLI、OpenCode 这些编码 Agent，Agent 只负责产出带类型的 JSON 中间表示，Archify 这个 Node.js 渲染与校验系统负责把它确定性地编译成 HTML 和 SVG。
这个分界很重要。JSON 是可以校验的——字段类型不对、引用了不存在的节点、路径指向了没定义的角色，编译器当场就能报出来。图片不行，图片只能靠眼睛看。
核心优势
图不会画飞，因为拓扑不靠模型猜。Agent 输出的每一份 JSON 都过一遍校验，产出带校验凭据。图上每个节点还能打开经过 revision 校验的源码——它说的是提交 9f1a1cf 时的真实结构，不是模型记忆里的印象。这个特性直接决定了它能不能用在正经的架构评审上。
合并前能拿两份快照对比。这是我觉得最实用的一点。两份都校验过的快照摆成改动前、差异、改动后三个视图，差异部分逐条列出：新增了什么、删了什么、改了哪个属性、哪个节点移动了位置、哪条路径改了道。代码评审里"这次改动动了架构没有"这个问句，终于有个能贴进 PR 的答案。
交互都是有据可查的，不是花架子。搜节点、追溯上游下游的编排可达范围、查看确切路由、对比两个角色的差异、播放预先写好的引导故事——这些能力都建立在已经声明过的关系之上，不会凭空编出一段拓扑。Route Share Card 把一条确切路径导出成 1200×630 的图，但整张架构图作为上下文仍然保留，不会让人看不懂那条线是从哪儿来的。
交付形态是"一个文件"。输出是自包含的 HTML，另有 PNG、SVG、WebM 和 1200×630 的分享卡导出。发到群里、贴进文档、放进演示，都不用再装什么东西。
呈现力开箱就够用。五类图型——架构、流程、时序、数据流、生命周期；四套预设，其中 Signal Flow 和 Blueprint 两套视觉风格差别挺明显；明暗主题一键切换；内置品牌标记；动效是有限时长的，不是无限循环那种。
安装/使用方法
它是以 Agent 技能的形式分发的，一行装好：
npx skills add tt-a1i/archify -g
用 Cursor 的话有个显式的非交互安装命令，适合写进脚本或者团队统一配置：
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes
想先试试不装也行，直接临时跑一次：
npx skills use tt-a1i/archify@archify --agent codex
用起来不需要有仓库。你可以在任意 Agent 的对话框里用文字描述一个系统，它就给你出一张图；有仓库的话它会去读代码，照着真实结构生成。仓库里 examples/web-app.html 可以直接在本地打开，那是完整的查看器，想先摸清交互手感可以先看这个。
站点上分了几个入口：项目首页、场景指南、还有一个叫 Proof Lab 的画廊，里面有 11 个已经检查入库的场景，包括它们的 JSON 源文件、命名视图和校验凭据。想知道它到底能画成什么样，看这个比看截图有用。官方还做了一个案例：追踪公开仓库生成一张运行时架构图，每个节点都能点回去看当时那次提交的源码。
导出菜单里，PNG 是直接复制到剪贴板，静态和动效格式是下载。「Copy Share Card」出的是 1200×630 的标准分享图，适合放进 README、发布说明或者社交帖子。追完一条路由之后可以单独导出 Route Share Card；追溯完上游下游的编排可达范围之后，也能导出对应的 Reach Share Card——注意这类图表达的是"声明过的关系"，官方特别说明过，它不等于运行时影响。
不是没有槽点
它绑定了"Agent 先出 IR"这条路。这是设计选择不是缺陷，但意味着你没法像在 draw.io 里那样拖拖拽拽改图。要改，得改 JSON 或者让 Agent 改。想手工微调一个节点位置的人会觉得别扭。
复杂系统的 JSON 有门槛。五类图型、四种预设、角色和路径的声明都有既定写法。虽然这些活主要交给 Agent，但你要判断它写对没有，就得先理解这套结构，学习成本落在人身上。
打开状态的 issue 有 134 个。2026 年 4 月建仓，五个多月长到 6.7 万 Star，节奏很猛，但维护压力也摆在那儿。踩到坑的时候不一定马上有人修。
还在 v2.x，开发线还在动。2.17.0 目前是 dev 版。用在团队正式流程里之前，建议先锁一个版本。
动效和分享卡偏展示向。对工程沟通有帮助，但如果你要的是纯静默的架构文档，这些能力算是闲置的。反过来，纯文档场景下 WebM 导出也基本用不上。
Node.js 是硬依赖。得先有 Node 环境，安装 npx 那步在受限网络里也可能卡。不像有些工具能完全离线跑。
跟同类怎么比
这个位置上的人分成几拨。Mermaid 和 PlantUML 是文本描述出图，胜在轻、能进版本控制，缺点是语义弱、不可交互，也做不了两份快照的差异对比。draw.io 和 Excalidraw 是手画的，灵活、自由度高，代价是图和人绑在一起——画图的人走了，图就没人敢改了。
还有一拨是"直接让模型画"。这条路最省事，但也最不可靠：出来的 SVG 或图片没有结构可言，对错只能靠人看，改一次的成本和重画差不多。
Archify 的差异点就一个词：确定性。Agent 的自由度被限制在出 JSON 这一步，剩下的编译和校验是可复现的。这让它比 Mermaid 那类多了校验和差异对比，比手画工具多了可复现性，比让模型直接画多了可信度。
一句话判断：如果你的仓库经常做架构评审、需要把"这次改动动了什么"讲清楚，Archify 值得配进流程里试一轮。如果你只是偶尔要画一张一次性示意图，或者习惯自己拖拽微调每个节点，那它这套工作流对你偏重了。
项目地址：https://github.com/tt-a1i/archify
项目页：https://tt-a1i.github.io/archify/
标签：#Archify #架构图 #AgentSkill #代码可视化 #架构评审 #JavaScript
架构图你更愿意交给模型生成再看一眼，还是自己在一块白板上慢慢摆？