Archify Skill：让 AI 直接生成带校验的交互式架构图

Archify Skill：让 AI 直接生成带校验的交互式架构图

Archify 是一个 Node.js 渲染与校验系统，为 Cursor、Claude Code、Codex CLI、OpenCode 等主流 AI 编程助手提供「架构图生成」能力。开发者只需用自然语言描述系统，Agent 自动产出带类型 JSON IR，Archify 渲染器做原子级校验，输出自包含 HTML（支持动画、主题切换、PNG/SVG/WebM 导出）。相比传统 Mermaid/PlantUML，开发者无需学语法、无需拖拽，意图驱动即可交付通信级图表。9月初持续霸榜 GitHub Trending，9月6日统计 Star 约 49,637（8月底仅 33k，周增幅 1.9 万），属当前最热 AI Agent 工具类项目之一。

功能与设计原则

Archify 围绕「意图 → JSON IR → 校验 → 交付」四步流水线构建，核心理念是「图表不是画出来的，是验证出来的」：

• 五种图表类型：架构图（Architecture）、工作流图（Workflow）、时序图（Sequence）、数据流图（Data Flow）、生命周期图（Lifecycle）
• 原子校验：schema、layout、HTML/SVG、route、label-to-route 五大门禁，全部通过才交付，失败返回机器可读的修复凭证而非栈追踪
• JSON IR 驱动：Agent 产出类型化中间表示，渲染器确定性编译为 HTML，保证图表可复现、可版本化
• 交互式阅读器：暗/亮主题切换、节点聚焦、上下游溯源、语义路由探测、角色对比、引导故事播放
• 无 Repository 模式：直接描述系统即可生成，无需先 clone 代码库

认可度

• GitHub Star：约 49,637（截至 2026-09-06），8月底约 33k，半月增幅超 1.9 万，增长斜率极陡
• Fork 数：约 1,900，远超同类工具型 Repo
• GitHub Trending：AI Agent 工具类持续在榜，8月30日日榜前三
• X 平台互动：100,000+（36kr 报道），在开发者圈层破圈传播
• 中文技术社区热度：今日头条、知乎、CSDN 等平台持续有搬运和解读

链接

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

原作者

• GitHub username：tt-a1i
• 真实身份：中文开发者「五风无雨叶无声」（据 36kr 报道），大专 → 专升本重邮软件工程 → 独立开发
• 背景故事：曾经历字节/猿辅导因「专升本」学历背景被撤回 Offer，在 X 发文自嘲后获Manus COO 鼓励，Archify 爆火后成国产独立开发者头部案例

介绍

Archify 的核心思路是把「画架构图」从鼠标操作变成意图驱动。

传统工作流是：开发者打开 draw.io/Visio → 画图 → 截图贴 Confluence → 三个月后图和代码脱节无人维护。Mermaid/PlantUML 把图写成 DSL 跟代码 commit，但开发者要学语法。Archify 则更进一步：开发者告诉 Agent 系统意图（describe the system），Agent 读取代码 → 产出类型 JSON IR → Archify 渲染器做原子校验 → 输出一份自包含 HTML，附 PNG/SVG/WebM 导出。

生成后可以在阅读器里做深度交互：搜索节点、查看上下游溯源、探测路由轨迹、对比角色语义差异、播放有限引导故事（finite guided story）。这让图表从「静态插图」变成「可交互的架构文档」，而且所有内容都基于 JSON IR 锚定到源代码，单次交付的内容天然与代码版本对齐。

另一个关键差异化点是对比模式（Architecture Delta）：对设计评审或 PR review，Archify 可以比对两个已校验快照（Before / Delta / After），给出精确的增加、删除、修改、移动路由，附机器签收单（machine receipt）。这解决了「架构设计评审时无法量化代码变更影响」的老大难问题。

特点

• 意图优先：自然语言描述系统，Agent 驱动生成，无需学习图表语法
• 原子校验门禁：schema → layout → HTML/SVG → route → label-to-route 五关不过不交付，失败返回精确修复指令而非报错栈
• JSON IR 持久化：每次输出带类型可复现，天然支持 Git 版本化，可做架构快照对比
• 深度交互阅读器：节点溯源、语义路由探测、角色对比、引导故事播放，让静态图变活文档
• 多 Agent 广泛兼容：支持 Claude Code、Cursor、Codex CLI、OpenCode，Claude.ai 可上传 ZIP 安装
• 无 Repository 模式：直接描述即可生成，先有想法再找代码也能用

使用方法

安装（以 Claude Code 为例）：

npx skills add tt-a1i/archify -g

基础调用：

在 Claude Code / Cursor 中，直接描述系统：

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.

Archify Agent 读取代码 → 产出 JSON IR → 渲染器校验 → 交付 HTML。后续可继续：

add Redis, move auth to the left, highlight the rollback path

架构对比（PR Review 场景）：

node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --json

输出 Before / Delta / After 三视图，附精确变更机器签收单。

校验失败时：

node archify/bin/archify.mjs validate workflow examples/agent-tool-call.workflow.json --quality showcase --json

返回稳定 rule code + 具体修复字段，开发者按指引修正，Archify 再跑两轮校正。

使用场景与人群

• 适用场景：系统设计文档编写、PR 架构评审、代码审查时快速可视化依赖关系、跨团队架构沟通、Confluence/Notion 架构页面维护
• 目标用户：后端/架构工程师、Tech Lead、需要在 PR 中可视化代码结构的开发者；也适合 AI Agent 工具研究者关注其 JSON IR + 校验流水线的设计范式
• 特别价值：对「图三个月后和代码脱节」这个历史难题提供了工程化解决路径——图表由代码意图驱动，天然随代码版本演进

输入与输出案例

案例 1：微服务订单系统架构图

输入（Claude Code 中）：

Analyze this microservice checkout codebase, then use archify to create a runtime architecture diagram showing: API gateway, order service, payment service, inventory service, database, and Redis cache. Mark trust boundaries.

输出：一张暗色主题架构图，5 个服务节点 + DB + Redis，API Gateway 在最左侧边界，payment service 用红色边框标注为高风险区域，右上角图例说明颜色语义。节点可点击查看上下游依赖，支持导出 PNG。

案例 2：CI/CD 工作流对比

输入：

Use archify to compare the architecture of base.json (v1.2) and head.json (v1.3). Show what changed in the deploy pipeline.

输出：Architecture Delta 视图，三栏（Before / Delta / After），Delta 列高亮显示新增了「Automated rollback trigger」节点，workflow 路径从 3 步变为 4 步，右下角附机器签收单（rule codes: LAYOUT_ADDED_NODE, WORKFLOW_STEP_COUNT_INCREASED）。可下载 WebM 动画版对比报告。

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