跳转到内容
全部开发指南

AI 画的架构图不敢用?用 Archify 生成可溯源的交互式技术图

AIGoCode发布于 更新于

AI 画的架构图不敢用?用 Archify 生成可溯源的交互式技术图 封面

让 AI 画一张系统架构图,出来往往很唬人:节点整齐、连线好看。仔细一看,有的组件代码里根本不存在,有的边是临时编的。图能拿去当示意,却不敢直接进评审。

Archify 想解决的是信任问题。它是一个 Agent Skill,装到 Claude Code、Cursor、Codex CLI、OpenCode 等工具里,根据仓库或一段系统描述生成可交互的技术图。中间有一份类型化的 JSON 表示,校验过了才渲染成自包含 HTML。仓库 tt-a1i/archify 当前 Star 已超过 9 万,稳定版文档写的是 v3.2.0,协议 Apache-2.0。

Archify 原文配图 1

它画哪几类图

Archify 不是通用画板,而是面向技术意图的几类图,例如:

  • 架构图:组件、服务、存储与边界
  • 工作流图:CI/CD、审批、带分支的工具调用
  • 时序图:API 调用、缓存穿透、鉴权交互
  • 数据流图:管线、血缘、敏感边界
  • 生命周期 / 状态图:状态机、重试与最终结果

生成结果是自包含 HTML,可导出 PNG、SVG、WebM,并带分享用卡片尺寸。视觉上有多套预设和深浅色主题可选。

Archify 原文配图 2

为什么说「可信」

关键不在「画得漂不漂亮」,而在源文件可校验、可复现:

  1. 模型先产出结构化候选(JSON),不是一次性吐像素。
  2. schema、布局、HTML/SVG、路由与标签间距等检查过关,才会用新图替换旧图。
  3. 交互(搜节点、追上下游、对比角色间流量、播放讲解)用的是写入源文件的真实节点和关系,不会现场编一条不存在的拓扑。
  4. 架构节点可带 SRC 标记,点开能跳到公开 commit 上核对过的源码行。

如果要做合并前的架构变动 review,可以用 Architecture Delta:对比改动前后两份图源,得到 Before / Delta / After,标出增删改与重连线,并附机器可读回执。

Archify 原文配图 3

安装与一句话开画

官方 README 推荐的通用安装:

npx skills add tt-a1i/archify -g

不同 Agent 的精确命令以项目里的 agent 切换页为准;也可以让 Agent 先读 https://raw.githubusercontent.com/tt-a1i/archify/main/llms.txt 再安装。需要 Node.js(文档常见要求 18+)。

装好后直接说,例如:

Use archify to map this repository's runtime architecture.

或描述一条流程:

Use archify to draw this login flow: Browser -> Web App -> API ->
JWT validation -> Redis session lookup -> PostgreSQL fallback.

可以继续改:「加个 Redis」「把鉴权挪到左边」「高亮回滚路径」。它会改源文件并保持其余结构稳定,而不是每次推倒重来。没有仓库时,只靠自然语言描述也能先出图;有仓库时可以做源码佐证的架构图。

CLI 对比示例(路径按本机安装位置调整):

node archify/bin/archify.mjs compare architecture base.json head.json out.html --json

Archify 原文配图 4

它明确不做的事

官方定位很直白:不做 Mermaid 解析,不做通用自动布局引擎,也不做在线托管和所见即所得编辑。目标是把技术意图变成一张可检查、可分享的图。如果你需要的是任意白板涂鸦,Archify 不是那类工具。

同类里还有面向代码图谱提问的方案,例如站内介绍过的 graphify:一个偏「建图谱再提问」,一个偏「出可交互架构图」,用途不同,可以按场景选。

小结

AI 画图工具很多,多数停在好看。Archify 把校验和溯源当成第一目标,对要进设计评审、PR review、README 配图的人更实用。装上后先拿自己仓库跑一张运行时架构图,点几个 SRC 标记核对源码,就能判断它适不适合你的流程。

在 Claude Code / Codex 里画完图之后,若还要接多模型做实现,可以到 AIGoCode 统一管理 API Key 与模型分组。

参考链接