Archify Skill：让 AI Agent 画出可验证的架构图

Skill超级捕获手 技术创作者 2026-09-23 12 阅读

Archify 是一个让 AI 编程 Agent（Claude Code / Cursor / Codex CLI / OpenCode）直接根据自然语言描述或代码分析，生成可验证的、交互式架构图的开源 Skill。输入一句”Browser → API → Redis → PostgreSQL”，输出一个带暗色主题、可交互、零依赖的单文件 HTML。核心差异在于：不依赖 Mermaid 代码生成，而是让模型写一份结构化 JSON IR，经 schema 验证和确定性渲染器编译，产出布局严谨的 SVG/HTML 图——每张图在交付前都经过 9 项原子验证，确保拓扑结构准确，而非随机排布的”格子+箭头”。2026 年 9 月 1 日登顶 GitHub Trending 全语言周榜，震惊社区。

功能与原则

Archify 的核心能力是把”系统描述”变成”可验证的架构图”。它的设计原则有三条：

1. typed JSON IR 而非直接渲染
模型不直接输出图，而是写一份带类型的 JSON 中间表示（components、boundaries、connections、views），再由 archify 验证器做 schema + 布局 + 路由 + 标签校验，通过后才编译成 HTML。失败时返回机器可读的错误诊断和修复建议，模型可以据此迭代。

2. 验证先于交付
每张图的生成都经过 9 道原子检查（节点间隙、边界穿越、路由连通性、标签对应等），所有检查通过才替换输出文件。这解决了”AI 画的图看起来对但结构是错的”这个普遍问题。

3. 输出即交付物
输出是一个 ~800KB 的单文件 HTML，内联 SVG + CSS + JS + JetBrains Mono 字体子集，浏览器打开即可交互，不需要任何运行时依赖，可直接放进 README 或发给同事。

认可度

  • GitHub Star：约 54,494（截至 2026-09-22），9 月中旬峰值约 6.15 万，4,052 forks
  • 安装量：21,900+ 次（skills.sh 平台）
  • Trending：2026-09-01 登顶 GitHub Trending 全语言周榜第一，#1 on GitHub Weekly All-Language list
  • 媒体报道：被 QbitAI 特写报道并采访开发者故事；被 midudev 等知名开发者社区成员转发
  • 社区使用：已有用户将架构图引入飞书/钉钉团队讨论，用于 PR 对比、代码 onboarding、技术方案评审等场景

链接

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

在线 Gallery（含 11 个验证过的案例）：https://tt-a1i.github.io/archify/gallery.html

原作者

GitHub 用户 tt-a1i，独立开发者，项目完全开源（MIT License），于 2026 年 4 月创建，9 月因登顶 GitHub Trending 而被广泛关注。

介绍

Archify 脱胎于一个朴素的观察：让 AI 画架构图时，模型通常输出 Mermaid 代码，渲染出来是一堆等距排列的方块加交叉箭头——技术正确，但没人会把它放进设计文档。真正难的不是”画框”，而是”布局判断”：哪个组件放在信任边界外、哪条路径是主路径、哪个节点该放核心层。

Archify 的解决思路是：让模型做显式的布局判断，写进 JSON IR，然后由确定性渲染器强制执行这些判断。模型不再是”画图”，而是”写规格”。

它支持 5 种图表类型：

  • Architecture：组件服务、数据库、外部依赖、信任边界
  • Workflow：多车道 CI/CD 流水线、审批流、异常处理
  • Sequence：API 调用链、认证流程、缓存回源、异步事件追踪
  • Data Flow：数据管道、ETL 转换、存储层级、PII 边界
  • Lifecycle：有限状态机、重试、超时循环、终止状态

生成的 HTML 查看器内置丰富交互：按 / 搜索节点、按 R 探测两点间最短路径、按 L 对比两个语义角色、按 P 播放引导式章节导览、按 S/T 切换预设和主题、按 E 导出 PNG/SVG/WebM 或 1200×630 分享卡片。

特点

  • 零依赖输出：单文件 HTML，无需任何框架或 CDN，发送给他人后交互随文件一起走
  • 5 种图表类型全覆盖：架构图、流程图、时序图、数据流图、状态机，覆盖研发团队 90% 的画图场景
  • 验证驱动交付：9 项原子检查，不通过不出图，确保拓扑准确；支持 Architecture Delta Review，PR 对比快照可精确显示增/删/移/重路由的节点
  • 多 Agent 通用：Cursor、Claude Code、Codex CLI、OpenCode 均支持，一行安装 npx skills add tt-a1i/archify -g
  • 主题与导出：暗色/亮色主题一键切换，导出 PNG/SVG/WebM/1200×630 分享图，适合直接放进 README 或技术博客
  • Source-Backed 模式：可读取真实代码仓库，基于源码 trace 生成架构图，保证图与代码一致；已有案例对 mco-org/mco 项目做源码追踪生成架构图
  • 社区扩展：用户已用于旅行规划、法律引用核查、合同审查、团队协作等非技术场景

使用方法

安装（一行命令）：

npx skills add tt-a1i/archify -g

Cursor 专用：

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

基本调用（无需打开代码仓库，直接描述）：

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.

基于代码仓库生成：

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.

安装验证器（可选，用于本地检查）：

npm install -g archify
archify validate   # 验证 JSON IR
archify deliver    # 编译并交付 HTML

交互操作（生成的 HTML 内）：
| 快捷键 | 功能 |
|——–|——|
| / | 搜索节点 |
| R | 探测两点间最短路径 |
| L | 对比两个语义角色 |
| P | 播放引导式章节导览 |
| S | 切换预设 |
| T | 切换暗色/亮色主题 |
| E | 导出 PNG/SVG/WebM/分享图 |

使用场景与人群

适用场景：
– 代码仓库架构图生成（新人 onboarding、代码评审）
– 系统设计文档插图（设计文档、RFC、ADR）
– PR 对比架构变更（Delta Review）
– 技术方案评审（流程图、时序图）
– 云架构可视化（多组件依赖关系）
– 团队协作（飞书/钉钉/文档嵌入）

目标用户：
– Senior Engineer / 系统架构师：用 AI 生成严谨的系统图，减少手动画图工作量
– AI + 研发团队：用 Claude Code / Cursor 编程时，随时生成架构图作为上下文锚点
– 技术文档工程师：需要大量系统图的技术博客、README、架构文档
– 全栈开发者：快速画出微服务、数据管道、CI/CD 流程

输入与输出案例

案例 1：Web 请求链路
输入：

Browser → API → Redis cache → PostgreSQL fallback

输出：一张暗色主题 Sequence 时序图，展示从 Browser 发起的请求如何经过 API、Redis 命中/未命中、PostgreSQL 回源，并在 HTML 查看器中可点击探测任意两点间最短路径，支持导出为 PNG 或分享卡片。

案例 2：基于源码的运行时架构图
输入：

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.

输出：mco-org/mco 项目的运行时架构图，展示 dispatcher、router、worker pool 等核心组件的连接关系，附源码路径追踪（trace reach）和节点上下游高亮，所有节点可点击查看详情卡片，支持 Delta Review 对比变更前后。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 12 阅读