Archify Skill：让 AI 编程智能体一句话生成可交互架构图

Archify Skill：让 AI 编程智能体一句话生成可交互架构图

Archify 是一个让 AI 编程智能体用自然语言描述系统，就能生成精美可交互架构图的 Agent Skill。上线三个月从 0 冲到 24k+ GitHub Star，8 月 27 日单日新增 4,260 颗，登上 GitHub Trending 总榜前三。它解决了 AI 画图”看起来对、实际错”的核心痛点——不是让 LLM 直接手绘 SVG，而是先生成类型化 JSON 中间表示，再由确定性渲染器编译成自包含 HTML，五种图表类型全部带验证回执。安装一条命令，支持 Claude Code、Cursor、Codex CLI、OpenCode 四大主流编程智能体。

功能与原则

Archify 定位是”Diagram-as-Code Agent Skill”，而非通用绘图工具。核心理念：Layout judgment over generic auto-layout——由 Agent 选择层级、间距、路由和重点，而非把布局权交给不确定的模型生成。

三条设计原则：

• 验证先行：Schema 检查、布局检查、HTML/SVG 校验、路由冲突检测，全部通过才吐出最终产物；失败返回机器可读的错误码，Agent 据此自我修复。
• JSON IR 解耦：Agent 产出结构化 JSON，渲染器做确定性排版，两阶段分离保证了输出的可重复性和可审查性。
• 交付物自包含：输出是零依赖的单 HTML 文件，任何浏览器直接打开，支持暗色/亮色主题切换和 PNG/SVG/WebM 多格式导出。

认可度

• GitHub Star：约 24k（截至 2026-08-30），数据来源为 AGI Hunt 2026-08-28 报道；Trending 榜单 2026-08-27 记录 22,214 颗，当日新增 4,260 颗，属近一个月最快日增速。
• Trending 排名：2026-08-27 登上 GitHub Trending 总榜前三，超越同期一众明星开源项目。
• 平台覆盖：在 Smithery、Awesome Skills、CocoLoop 等主流 Skill 市场均有收录；被 TopAIProduct、AGI Hunt 等科技媒体专题报道。
• 许可证：MIT，开源可商用。

链接

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

原作者

作者 GitHub @tt-a1i（项目同时提供英文和中文 README），专注 AI 编程助手生态的技能工具链。Archify 基于早期的 Cocoon-AI/architecture-diagram-generator 发展而来，现由独立团队维护。

介绍

传统的 AI 画图工具（如直接让 LLM 输出 Mermaid 代码）输出”看起来对、实际错”的伪架构图是常态——节点关系编造、边框缺失、层级混乱，没有任何验证机制。Archify 从根本上重构了这套流程：Agent 不是在画图，而是在写规格说明书，渲染器负责把规格书变成图。

生成的产物是一个自包含 HTML 文件，节点带源码追溯链接（点击 SRC 标签直接跳转到 Git 提交的具体文件和行号），这让架构图从”装饰品”变成了”可审计的文档”。内置四种视觉预设（Classic、Signal Flow、Blueprint、Editorial），暗色/亮色主题一键切换，导出分辨率最高达 4× 原始像素。

除了静态图，还支持 Before/Delta/After 三段式架构变更对比——输入两个经过验证的快照，Archify 自动算出增删改的节点和边，生成对比视图，适用于 Code Review 和架构演进回顾。

特点

• 五种图表类型：Architecture（组件拓扑）、Workflow（泳道流程）、Sequence（时序调用链）、Data Flow（数据管道与敏感边界）、Lifecycle（状态机与生命周期），覆盖系统设计 95% 的表达场景。
• 全程验证：Schema 校验 → 布局校验 → HTML/SVG 校验 → 路由冲突检测，每一步都有机器回执，失败不污染输出。
• 源码级节点追溯：每个节点带 SRC 标签，对应真实 Git 提交的文件和行号，保证图与代码同步。
• 零依赖自包含输出：单个 HTML 文件，浏览器即开即用，无 CDN、无外部字体、无需构建步骤。
• 交互式探索：内置搜索（/）、路径探针（R）、上游/下游 Reach 追踪、引导式 Walkthrough 播放，适合演示和团队 review。
• 多格式导出：PNG（4× 分辨率）、JPEG、WebP、SVG（双主题自动跟随系统）、WebM 动画、1200×630 分享卡片。

使用方法

安装（一条命令）：

npx skills add tt-a1i/archify -g

安装时选择对应的 Agent（Claude Code / Cursor / Codex / OpenCode），即可全局生效。

基础调用示例：

Analyze this repository, then use archify to create a runtime
architecture diagram showing core components, data flow,
external dependencies, and trust boundaries.

或针对具体流程：

Use archify to draw this login flow:
Browser → Web App → API → JWT validation → Redis session
lookup → PostgreSQL fallback. Show the cache-miss path clearly.

迭代修改（纯自然语言）：

add Redis
move auth to the left
highlight the rollback path

架构变更对比：

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

使用场景与人群

适用场景：

• 系统设计文档配图（架构师、Tech Lead）
• PR/代码审查的流程说明（开发者）
• Runbook 和故障处理流程图（SRE/DevOps）
• 面试/答辩时快速出系统图（候选人）
• 团队内部分享和知识沉淀（技术传播）

目标用户：

• 日常使用 Claude Code、Cursor、Codex CLI、OpenCode 的开发者
• 需要快速生成架构文档但不想学 Mermaid 的工程师
• 关注架构演进可视化、需要”图与代码同步”的 Tech Lead

输入与输出案例

案例一：输入

Use archify to draw a web app architecture:
React frontend calls a Node.js API backed by PostgreSQL and Redis,
deployed on AWS behind CloudFront.

输出： 自包含 HTML 文件，含 Architecture 图表——React → CloudFront → Node.js API → PostgreSQL + Redis，多层云基础设施边界标注，暗色/亮色主题可切换，可导出 PNG/SVG。

案例二：输入

Use archify to create a CI/CD workflow diagram:
pull request → tests → approval gate → build image →
staging deploy → smoke test → production deploy,
with rollback on failure.

输出： 自包含 HTML 文件，含 Workflow 图表——泳道式展示各参与者（Developer、CI System、Approval Gate、Deploy System），分支和异常路径清晰标注，支持引导式 Walkthrough 播放。

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