Archify Skill：让 AI 编程 Agent 在聊天窗口生成可验证架构图的图解神器

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

Archify 是目前 GitHub Trending 最热的图解类 Agent Skill——它让 Claude Code、Cursor、Codex 等 AI 编程工具在聊天窗口内直接生成可交互的架构图、工作流图、时序图、数据流图和生命周期图，输出为自包含的 HTML/SVG 文件，带暗/亮主题、有限动画和可分享的 1200×630 缩略图。Archify 的核心设计原则是「验证优于生成」：Agent 产出的是类型化的 JSON IR，渲染前经过 Schema、布局、路由、标签路径等多重校验，失败时附带机器可读的修复收据，而非 Node 堆栈。本周新增 Star 突破 1.8 万，总 Star 数达 37,039，是图解类 Skill 中增长最猛的选手。

功能与原则

Archify 本质上是一个 Node.js 渲染与校验系统，运行在 Cursor、Claude Code、Codex CLI 和 OpenCode 四大主流 AI 编程 Agent 上。Agent 负责生成结构化的 JSON IR（中间表示），Archify 的渲染引擎将其确定性编译为 HTML/SVG。整个流程分为四步：生成（Agent 创建 JSON IR）→ 校验（Schema + 布局 + 路由 + 标签清除检查）→ 预览（可选的本地轮询循环，失败时保留上一张有效图）→ 交付（原子替换，验证通过后打开）。

核心设计原则：
– 布局判断优于通用自动布局——Agent 选择层级、间距、路线和强调点，而非把所有箭头堆在同一个中点
– 类型化 JSON IR——每种渲染模式都有独立 Schema，输出可复现
– 交付前原子校验——Schema、布局、HTML/SVG、路由、标签路径清除五道关卡必须全部通过
– 失败有修复收据——validate –json 和 deliver –json 返回稳定规则码、具体问题、测量证据和唯一支持的修复控制，而非 Node 堆栈

认可度

  • GitHub Star：37,039（截至 2026-08-31）
  • 本周新增 Star：约 18,103（Trending 页面直接标注）
  • Forks：2,376
  • 当前版本：v2.16.0（2026-08-30）
  • License：MIT
  • Trendshift 排名靠前，在图解/Skill 类目中热度持续攀升

链接

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

官方站点：https://tt-a1i.github.io/archify/
图解场景指南：https://tt-a1i.github.io/archify/guide.html
Proof Lab 示例：https://tt-a1i.github.io/archify/gallery.html

原作者

由 GitHub 用户 tt-a1i（团队账号）开发和维护，合作者包括 sunsunsun-java、YunyueLi、cursoragent、claude 等多位贡献者。TT-A1I 专注于 AI 编程辅助工具链，Archify 是其核心项目，另有 agent-aware quick start 适配各主流 Agent 的启动命令。

介绍

Archify 解决了一个实际问题：AI 编程 Agent 生成的代码或系统描述缺乏直观表达。传统方案是让 Agent 输出 Mermaid 代码或截图，但 Mermaid 样式雷同、阴影处理不理想，且生成后无法交互验证。Archify 的思路是：Agent 只需描述系统结构（组件、服务、存储、边界），JSON IR 的生成由 Agent 负责，渲染和校验由 Archify 负责，二者解耦。

安装方式极简：npx skills add tt-a1i/archify -g，也可针对 Cursor 做精确安装。安装后，Agent 在任意对话中均可调用，无须提前提供代码仓库——直接用自然语言描述系统即可。

Archify 支持五种图类型：
– Architecture（架构图）——组件、服务、存储、边界，适合高层面运行时设计
– Workflow（工作流）——CI/CD、审批、工具调用、Runbook，适合流程文档
– Sequence（时序图）——API 调用、缓存回退、认证、异步追踪，适合接口分析
– Data Flow（数据流）——管道、血缘、PII、消费者，适合数据工程
– Lifecycle（生命周期）——状态机、重试、取消、终态，适合协议设计

每种图都有四种视觉预设（Signal Flow、Blueprint、Classic、Dark/Light 双主题），且支持 Architecture Delta 功能——对两个已校验快照做 Before / Delta / After 对比，输出精确的增删改移事实。

特点

  • 零额外依赖——输出为单个自包含 HTML 文件，可直接在浏览器打开或嵌入文档
  • 五图类型覆盖主流场景——架构图、工作流、时序图、数据流、生命周期，一套工具覆盖设计到评审全链路
  • 交付前原子校验——五道检查关卡，失败带修复收据，确保每张图可信赖
  • 可验证溯源——Evidence-backed Architecture 节点可标记 Git 文件和行号，链接到特定 Commit
  • 多 Agent 支持——Cursor、Claude Code、Codex CLI、OpenCode 均可使用，同一 Skill 文件在不同 Agent 下行为一致

使用方法

安装（一键）：

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

基本调用示例：
在 Agent 对话中直接描述系统：

“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.”

Agent 生成 JSON IR → Archify 校验 → 输出 HTML 文件 → 浏览器打开或 --open 参数自动呈现。

CLI 独立使用：

cd archify
node bin/archify.mjs doctor        # 环境诊断
node bin/archify.mjs demo /tmp/archify-demo  # 演示
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

使用场景与人群

适用场景：
– 系统设计阶段——用自然语言描述架构，生成可分享的架构图用于团队评审
– PR Review——用 Architecture Delta 对比两个版本的架构快照，精确呈现变化
– 技术文档编写——将 API 描述转化为时序图，将数据管道描述转化为数据流图
– 交付物展示——生成 1200×630 的 Route Share Card 或 Reach Share Card，用于 README 或 Release 备注

目标用户：
– 使用 Claude Code、Cursor、Codex 等 AI 编程工具的开发者
– 需要快速输出系统架构图并嵌入文档的技术负责人
– AI Coding Agent 使用者，想把 AI 生成的设计「可视化、可验证、可分享」

输入与输出案例

案例 1：架构图生成

输入（Agent 对话）：

“Use archify to create a high-level architecture diagram for a web app with Browser → API → Redis cache → PostgreSQL fallback flow. Show 5–7 components, trust boundaries, and primary request path.”

输出：
– 自包含 HTML 文件，包含 Signal Flow 风格架构图
– 暗/亮主题切换
– 可聚焦节点、追踪上游/下游 reach、Probe 指定路由
– 可导出 PNG、SVG、WebM 和 1200×630 分享卡片

案例 2：工作流图对比

输入（两次迭代）：
– 迭代 A：生成 CI/CD 工作流，保存 base.json
– 迭代 B：添加人工审批节点，重新生成 head.json
– 对比命令：node archify.mjs compare workflow base.json head.json delta.html --json

输出：
– Before / Delta / After 三视图，带精确的增/删/改/移路线清单
– 机器可读的变更收据，无歧义

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 12 阅读