Archify Skill：让 Claude 把代码库一键变成可交互的架构图

Archify Skill：让 Claude 把代码库一键变成可交互的架构图

Archify 是一个专门为 AI 编码 Agent（Cursor、Claude Code、Codex CLI、OpenCode）打造的架构图生成 Skill。用户用自然语言描述系统，它就能产出一份带校验、可交互、主题任切、单文件 HTML 的技术图表——不需要任何绘图软件，不需要手写 Mermaid，一句话生成、直接分享。2026 年 8 月底 GitHub Trending 登顶，从 4 千星爆炸增长至 3.4 万星，仅用两天，成为当月最耀眼的新晋 Skill 之一。

核心能力与设计原则

Archify 的本质是一条”JSON IR 管道”：Agent 输出结构化的 JSON 中间表示（IR），Archify 的类型化渲染引擎对其进行 Schema 校验，再 Deterministic 编译为 HTML/SVG，绕过 LLM 直接生成 SVG 质量不稳定的难题。

设计原则：
– 校验先行：每次生成都经过类型校验，不合格不输出，杜绝 LLM 幻觉图
– 单文件交付：产出零依赖的 HTML，内联 CSS/SVG/JS，浏览器直接打开
– 可验证：所有图表有 JSON IR 源码可查，可回溯、可对比、可 Code Review
– 主题化：Dark/Light 一键切换，内置品牌标识位

认可度

• GitHub Star：截至 2026-08-30，约 34,445★（8月28日约 4,200★，两天增长 30k+，为当月最快速增长的 Skill 项目之一）
• GitHub Trending：2026 年 8 月 28 日登顶 GitHub Trending 全榜 #1
• 分叉数：约 1,900 forks
• 版本：当前稳定版 v2.16.0（2026-08-30），活跃开发中
• 生态覆盖：Cursor、Claude Code、Codex CLI、OpenCode、DeepSeek Harness（Raven 手动安装）

链接

GitHub：https://github.com/tt-a1i/archify

原作者

GitHub 用户 tt-a1i，独立开发者，项目托管于 tt-a1i.github.io，配套文档齐全（英文 + 简体中文）。

介绍

Archify 脱胎于 Cocoon-AI/architecture-diagram-generator（v1 只有深色静态 HTML），v2.x 做了大规模重写：新增 CSS 变量主题系统、导出管道（PNG/SVG/WebM/1200×630 分享卡）、类型化渲染器、Schema 校验和后渲染检查。README 明确标注了 fork 来源和各版本新增内容，透明度在同类工具中少见。

安装后，在 Claude Code 会话里输入 Use archify to draw...，Agent 就会执行完整质量管道，生成一个零依赖的单 HTML 技术图表。最新 v2.16.0 还支持 Before/Delta/After 对比模式——将两个不同 commit 或版本的架构快照做对比，精确标注出新增、删除、变更、移动和重新路由的节点和边。

特点

• 5 种图表类型：架构图（Architecture）、工作流图（Workflow）、时序图（Sequence）、数据流图（Data Flow）、生命周期图（Lifecycle）
• 4 种预设：Classic、Blueprint、Signal Flow 等，一键应用
• Dark/Light 双主题：一个文件，按 T 键或点击切换，无需重新生成
• 多种导出格式：PNG（剪贴板复制）、SVG、WebM 动图、1200×630 分享卡
• 对比模式：Before / Delta / After 三视图，追踪架构变更
• 语义查询：搜索节点、溯源上下游依赖、按角色对比流量
• 引导故事模式：按章节播放，适合演示场景
• 无需代码库：在任意 Agent 会话中直接描述系统，不依赖仓库

使用方法

安装（Claude Code 推荐方式）：

/plugin marketplace add mvanhorn/last30days-skill

（实际 archify 的正确命令见下方）

安装命令：

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

在 Claude Code 中使用示例：

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.
Put supporting detail in cards instead of adding more edges.

描述生成（无需仓库）：

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

使用场景与人群

• 适用场景：系统设计文档编写、架构变更 Code Review、团队内部分享、PPT/文档插图、GitHub README 配图、技术面试图示
• 目标用户：使用 Claude Code/Cursor/Codex 的开发者、技术负责人、架构师、技术写作者

输入与输出案例

输入（自然语言）：

Use Archify to draw: Browser -> API Gateway -> Redis Cache -> PostgreSQL; highlight the rollback path in red.

输出：一个单文件 HTML，Dark 主题，显示 Browser → API GW → Redis → PG 的完整链路，rollback 路径节点和边标红，悬停显示详细说明，点击节点可溯源上下游，可导出 PNG/SVG，可切 Light 主题。

输入（仓库分析）：

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.

输出：基于真实代码库结构生成的架构图，JSON IR 源码在同目录下存档，导出文件可用于 PR Review 或技术文档。

Archify 将”让 LLM 画架构图”这件事从碰运气变成了一条可靠的工程管道——校验、渲染、导出，全流程可复现。对于每天都要和系统设计打交道的技术人，这可能是目前最值得装进 Claude Code 的 Skill 之一。

GitHub: https://github.com/tt-a1i/archify