Archify:让 AI 把代码库一键变成可交互的系统架构图(35k Star 爆火工具)

一句话搞懂 Archify

把一段代码库或系统描述丢给 AI,直接在对话里生成一张「可交互、可验证、能导出」的精美系统架构图——这就是 Archify 干的事。它是一套为 Cursor、Claude Code、Codex CLI、OpenCode 等编码 Agent 打造的 Node.js 渲染与校验系统,Agent 产出「带类型的 JSON IR」,Archify 再确定性地把它编译成 HTML/SVG。

凭借「图表即代码、生成即验证」的独特定位,Archify 在上线后一路狂飙,目前已收获 35000+ Star、2200+ Fork,单日新增 Stars 一度达到 3700+,稳居 GitHub Trending 榜首。

核心功能亮点

  • 五种图表类型:架构图(Architecture)、工作流(Workflow)、时序图(Sequence)、数据流(Data Flow)、生命周期(Lifecycle),覆盖绝大多数技术沟通场景。
  • 生成即校验:每个产物都要通过 schema、布局、HTML/SVG、路由、标签等一系列原子校验,失败会返回「带稳定规则码的可修复凭据」,而不是一堆难懂的 Node 报错。
  • 可验证的架构变更对比:合并前用 Before / Delta / After 对比两份快照,精确列出「新增、删除、改动、移动、重路由」的事实。
  • 交互可溯源:搜索节点、追踪上游/下游可达路径、探查精确路由、对比语义角色、播放引导式故事,全程复用「已创作」的拓扑,绝不凭空捏造。
  • 单文件交付:最终输出一个自包含 HTML,并支持导出 PNG、SVG、WebM 以及 1200×630 分享卡片。

技术特色

  • 布局判断而非盲目自动布局:由 Agent 决定层级、间距、路由与重点,共享的自动端点确定性展开,避免箭头堆叠在同一个中点。
  • Typed JSON IR(中间表示):每种可渲染模式都有 schema 和可复现的源数据。
  • 送测前原子校验:只有全部校验通过,展示型产物才会替换上一次的「已知良好」输出。
  • Last-Good 实时预览:可选的桌面监听循环,只刷新通过校验的版本,保存不完整或非法时保留上一份已验证图表。
  • 源码证据可选开启:Evidence-backed 架构节点标记 SRC n,打开 Git 校验过的文件与行区间,锚定到某个公开 commit。

详细使用步骤

1. 安装

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

2. 从一句描述开始(无需代码库)

Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback.

如果要基于真实源码生成,打开仓库后这样问:

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.

3. 在对话里迭代细化

继续用自然语言微调,比如 add Redis、move auth to the left 或 highlight the rollback path,Archify 始终保留类型化源数据,支持精准迭代。

4. 命令行直接生成

cd archify
node bin/archify.mjs guide "Show CI/CD checks, approval, deploy, and rollback"
node bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json
node bin/archify.mjs deliver workflow examples/agent-tool-call.workflow.json /tmp/workflow.html --quality showcase --open --json

适用场景

  • 新成员上手 / 代码评审:快速生成高层次的运行时架构图,帮助阅读陌生代码库。
  • 系统设计评审:合并前用 Architecture Delta 对比架构变更,直观看出增删改。
  • 技术文档与分享:导出自包含 HTML、PNG、SVG 或 WebM,一键分享给团队。
  • 架构复盘与讲解:用引导式故事(Guided Story)逐章演示一条路径的完整流程。

项目地址:https://github.com/tt-a1i/archify
项目主页:https://tt-a1i.github.io/archify/
许可证:MIT(可自由使用、修改与分发)

有一点值得注意:Archify 明确「不」做的事——不做通用绘图编辑器、不是 Mermaid 主题、不做自动 Mermaid 解析与 WYSIWYG 编辑。它只专注一件事:把技术意图变成高质量的沟通产物。这种克制,恰恰是它爆火的原因。

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享