又一个神级 Skill：把代码库丢进去，直接生成可交互架构图

本文来源： 丛林（公众号：丛林）
原文链接： https://mp.weixin.qq.com/s/GIzsGhJalQrsQp80kow7UQ
发布时间： 2026-08-16 14:08

作者： 丛林　　发布时间： 2026-08-16 14:08

接手一个不熟悉的代码库，最花时间的不是改代码，而是先搞明白它的整体结构。哪个模块负责什么，请求从哪进来，数据最后落到哪，这些东西文档里通常不写，就算写了也多半过时了，最后只能自己翻代码一点一点拼出来。

最近我在 GitHub 上看到一个叫 archify 的开源项目，做的就是这件事。它是一个 Agent Skill，装到 AI 编程工具上之后，可以让 AI 直接去读我们的代码仓库，读完生成一张可交互的架构图。我用了一段时间，这篇具体说说它是怎么做的。

这是个什么项目

archify 目前在 GitHub 上有 1.3 万多 Star，它不是一个独立的软件，而是给 Cursor、Claude Code、Codex CLI、OpenCode 这类 AI 编程工具装的技能包。装好以后我们说一句话，它就会去读仓库里的代码，把系统的运行时架构整理成一张图，输出一个 HTML 文件，浏览器打开就能看，发给同事也不用对方装任何东西。

它的 README 里有一句话我觉得说得很准：这些图是从真实仓库里读出来的，不是只靠提示词画出来的。

Archify 主视觉

具体能做什么

1.直接读代码仓库，不靠我们写一大段描述

大部分 AI 画图工具的路子，是你先用文字把系统描述清楚，它再照着描述画。描述写得细不细，直接决定图画得对不对，等于画图之前你得先自己把架构搞明白，这就有点本末倒置了。

archify 可以自己去读仓库。入口在哪，路由怎么分发，模块之间谁调谁，这些信息都是它从代码里翻出来的，然后整理成图。我们要说的其实就一句，「梳理这个仓库的运行时架构」，够了。

下面这张图是它读了一个公开仓库（mco-org/mco）之后生成的运行时架构图，README 里放的真实案例：

根据公开仓库 mco-org/mco 生成的运行时架构图

2.图上的节点能跳回源码

因为是直接从代码里读出来的，这种图最大的好处是能核对。架构图里的节点可以带 SRC 标记，点开直接跳到对应的文件和行号，而且这些位置是经过 Git 校验的，固定在某个具体的 commit 上，不会今天是这个明天变成那个。

也就是说，图上画的东西和代码里真实存在的东西是对得上的，不是 AI 看着目录结构猜出来的。给同事讲某个模块的逻辑在哪的时候，点开标记就行，不用现场翻代码了。

3.五种图，从不同角度看一个系统

同一个仓库，可以生成不同类型的图，看你当时想说明白什么：

• • 架构图： 组件、服务、数据库、云资源、安全边界，系统的整体结构。
• • 工作流： 泳道式的流程图，适合 CI/CD、审批流、异常分支这类有先后顺序的东西。
• • 时序图： API 调用链、缓存回源、鉴权检查，谁调谁、什么顺序、返回什么。
• • 数据流图： 数据从哪来、经过哪些处理、存到哪去，敏感数据的边界也能标出来。
• • 生命周期图： 状态机、重试、等待、终态，比如一个订单从创建到完结的全过程。

Workflow 示例

Sequence 示例

4.生成的是能交互的图，不是一张死图片

输出的 HTML 里带了一整套查看器。按 / 可以搜索节点，点中一个组件可以看它的上游和下游，按 R 能探查两个节点之间的完整路径，一站一站看过去。它还能播放引导故事，像放幻灯片一样一章一章把系统讲一遍。开会投屏的时候按 F 进演示模式，图会自动适配屏幕。

有一点我比较喜欢：这些交互全部基于图里真实存在的节点和连线，不会给你编出根本不存在的调用关系。

引导故事

路径探查

5.出图质量不靠运气

以前让 AI 直接画 SVG 或者写 Mermaid，出来的东西什么样每次都不好说。archify 换了个分工，模型只负责产出一份结构化的 JSON 文件，写清楚图上有哪些节点、谁和谁相连，布局和画图交给专门的渲染程序来做，画完还有一轮自动检查，检查不通过的东西不会交到你手上。

检查失败的时候也不是让你从头再来，它会告诉你具体哪里出了问题，比如哪个标签和连线打架了，建议怎么修。用下来的感受是，输出质量比较稳定，不会这次能用下次翻车。

6.导出和分享是认真做的

图有深浅两套主题，一键切换。导出的 PNG 是按 4 倍分辨率渲染的，贴进 PPT 或者打印出来都不糊。SVG 更讲究一些，一份文件里同时嵌了深色和浅色两套样式，放到 GitHub README 里会自动跟随读者的系统主题，不用维护两张图。

除此之外还能导出 WebM 动态图，以及 1200×630 的标准分享卡片，写 release note 或者发动态的时候直接能用。

深色主题

浅色主题

7.改架构可以先对比再合并

做架构调整的时候，可以把改动前和改动后的两份图做个对比，生成 Before / Delta / After 三个视图。新增了哪些组件、删掉了哪些、哪条连线改了，一条一条列出来。评审的时候拿这个过一遍，比口头描述清楚不少。

架构对比

上手只要一条命令

直接运行：

npx skills add tt-a1i/archify -g

安装的时候会问用的是哪个 AI 工具，照实选就行。如果只是想试一下，不打算长期装，也有办法：

npx skills use tt-a1i/archify@archify --agent codex

装完以后打开项目，在对话框里直接说句话就行，比如：「使用 archify 梳理这个仓库的运行时架构。」

第一版图出来以后，想调整也简单，接着用大白话说就行，比如「加一个 Redis 进去」「把鉴权模块挪到左边」「把回滚路径标出来」。它只改我们提到的那部分，不会把整张图推倒重画。

我的一些看法

我觉得 archify 方向选得挺好，架构图这东西最怕和代码脱节，凭文字描述画出来的图，画完那一刻可能就已经不准了，因为你描述的是你脑子里的系统，不一定是代码里真实的系统。让 AI 去读代码，图上每个节点还能跳回源码核对，这样图就成了一份能核对的文档，而不是一张凭印象画的示意图。

它把画图这件事的分工也处理得不错，理解需求、组织信息这种事 AI 擅长，就交给模型。布局、渲染、检查这种事要求稳定，就交给程序去做，检查过了才算数。这么拆开以后，出图质量的下限比让 AI 直接写 SVG 高了不少。

也要说清楚它不是什么，它不是绘图编辑器，不能拖拖拽拽改图，也不做 Mermaid 转换，就管把代码库变成能拿出去讲的图这一段，别的事情一概不管。如果你最近正好接手新项目接到头疼，或者经常要给别人讲系统结构，建议装一个试试，反正一条命令的事。

开源地址

https://github.com/tt-a1i/archify
点击下方卡片，关注极客之家

这个公众号长期分享实用开源项目。如果你不想逐篇翻阅历史文章，可以直接关注微信公众号“极客之家”，通过后台留言与我们互动交流。

本文转载自微信公众号「丛林」，仅供学习交流使用。