Archify Skill：让 AI Agent 画出可验证的交互式系统架构图

Archify Skill：让 AI Agent 画出可验证的交互式系统架构图

Archify（tt-a1i/archify）是一个面向 AI 编程 Agent 的架构图生成 Skill——装入 Claude Code、Cursor、Codex CLI 或 OpenCode 后，用一句自然语言描述系统拓扑，Agent 就会执行一条含 9 道校验的质量管道，最终输出一个自包含、可交互、支持明暗主题切换和 PNG/SVG/WebP 导出的单文件 HTML 架构图。它解决的核心痛点是：通用 Agent「画图靠 Mermaid 输出」质量飘忽、图与源码脱节、无法验证，Archify 则通过 JSON IR 校验 + 确定性渲染把这件事变成了可审计的工程流程。9 月连续登顶 GitHub Trending，9/1 还拿下全球所有语言仓库周榜第一。

功能与原则

Archify 的核心架构是一套 JSON IR 管道：Agent 根据自然语言描述生成结构化的 JSON 中间表示（包含节点类型、连接关系、标签等），渲染器读取 JSON Schema 校验合法性，再通过确定性布局引擎输出 SVG/HTML。与纯语言驱动的「Mermaid 生成」不同，Archify 每一张图在交付前都经过 9 道检查——Schema 校验、几何校验、连线穿越检测、标签重叠检测等——如果发现问题，校验器会返回错误码和建议修复方案，Agent 自动修复后重新渲染，确保「图即证据」，不会凭空捏造拓扑。

支持五种图表类型：
– 架构图（Architecture）：微服务拓扑、云原生组件、数据库连接
– 工作流（Workflow）：多步骤业务流程，支持节点间数据传递标注
– 时序图（Sequence）：服务间调用顺序，高亮关键路径
– 数据流（Dataflow）：数据在系统间的流转方向
– 生命周期（Lifecycle）：状态机、部署阶段、发布流程

认可度

• GitHub Stars：约 68,800（截至 2026-09-22），近一周增长 +8,629（cooler333 awesome-claude-code 列表数据）
• GitHub Trending：9 月多次登榜，9/1 周榜拿下全球所有语言仓库第 1 位
• skills.sh 安装量：约 55,400 次安装
• 开发者社区：被 midudev 等知名开发者分享，获 QbitAI 专题报道，Discord 社区活跃

链接

GitHub：https://github.com/tt-a1i/archify
官网/画廊：https://tt-a1i.github.io/archify/
Skill 安装：npx skills add tt-a1i/archify -g

原作者

作者为 tt-a1i（GitHub @tt-a1i），个人开发者，此前是 Cocoon-AI/architecture-diagram-generator 的贡献者。Archify v2 从该 fork 重写而来，大幅新增了多主题系统、导出管道、类型化渲染器和校验层。

介绍

Archify 的核心定位是「Agent 的架构图 Skill」——它不是一个独立应用，也不是 Web 绘图 SaaS，而是一个在对话式编程 Agent 内部调用的工具链。安装后，Agent 能理解「Draw the architecture of this microservice system」这样的指令，输出 JSON IR，经校验后生成可交互的 HTML 文件。

它最有价值的能力之一是源码绑定（Source-backed）：Agent 可以先读取代码仓库，分析实际的模块依赖关系，再生成与代码版本精确对应的架构图，并标注每个节点关联的具体文件路径和代码位置。这意味着图不是凭空画的，而是真实系统结构的可视化快照——在 Code Review、技术文档、架构评审场景里，这张图就是证据，而非装饰。

输出文件是零依赖的单一 HTML，内联 SVG、CSS 和 JavaScript。任何人打开 HTML 文件就能浏览、明暗切换、搜索节点、高亮路径、按 E 导出 PNG 或 SVG。文件可以放进 PR 评论、技术文档或飞书/钉钉群，任何人都无需安装任何工具即可查看。

特点

• 九步校验管道：Schema、几何、连线、标签、渲染前预检，任何一步不通过都阻止交付，保证输出可验证
• 五种图表类型：架构图、工作流、时序图、数据流、生命周期，覆盖技术文档主流场景
• 多主题 + 高清导出：一键切换明/暗主题；支持导出 PNG、SVG、WebP 和 1200×630 分享卡片
• 路径追踪动画：数据请求在系统节点间的完整路径可视化，点击节点可查看上下游依赖
• 源码绑定：节点可锚定到具体文件路径 + 行号范围，对 PR Diff 场景尤其有价值
• 跨 Agent 兼容：支持 Claude Code、Cursor、Codex CLI、OpenCode，以及 Kimi 等国内 Agent

使用方法

安装（以 Claude Code 为例）：

npx skills add tt-a1i/archify -g

基础使用——纯描述方式（无需打开代码仓库）：

Use Archify to diagram a web request: Browser calls the API, the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.

Agent 响应后，继续交互：

Add authentication
Highlight the cache-miss path
Switch to the light theme

源码绑定方式（基于真实代码生成图）：

Read the src/ directory, then use Archify to map the runtime architecture of this service.

JSON IR 方式（如果你想自己定义拓扑）：

在 Schema 文件（schemas/architecture.schema.json）定义节点和连接，Archify 渲染器负责布局和导出。

使用场景与人群

• 后端/架构工程师：在 Code Review 和架构评审时生成可信的架构图，无需打开 Draw.io 或 Excalidraw
• 技术负责人/PM：让 Agent 读代码库，一键生成系统拓扑，节省文档编写时间
• DevOps/基础设施团队：绘制部署架构、Kubernetes 拓扑、数据流图，带明暗主题和导出
• 独立开发者：不需要设计师，一个人就能产出可用于正式文档和技术分享的精美系统图

输入与输出案例

案例 1：描述生成架构图

输入：

Use Archify to diagram a payment system: React frontend calls a Go API Gateway, which routes to an Order Service and a Payment Service. Order Service reads from MySQL; Payment Service writes to a message queue consumed by a Fraud Detection Python service.

输出：
一张自包含 HTML 架构图，包含：
– 5 个节点（React Frontend / Go API Gateway / Order Service / Payment Service / Fraud Detection）
– 节点间带方向箭头的连接线
– 点击节点可查看上下游依赖关系
– 支持切换明/暗主题、导出 PNG

案例 2：源码绑定生成时序图

输入：

Read the src/api/orders/ directory and use Archify to generate a sequence diagram showing the order creation flow, including the Redis cache lookup and PostgreSQL write.

输出：
一张时序图，每个节点旁标注了实际文件路径（如 src/api/orders/handler.go:42），支持：
– 高亮 cache-miss 路径
– 导出 SVG 用于嵌入内部文档
– 按 T 切换主题后截图分享

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