Archify Skill：让 AI 直接在对话中生成可验证的精美架构图

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

Archify Skill：让 AI 直接在对话中生成可验证的精美架构图

Archify 是一个跨 Agent 的图表生成 Skill，支持 Cursor、Claude Code、Codex CLI、OpenCode 安装后，用自然语言描述需求，即可输出五类图表：架构图（Architecture）、工作流图（Workflow）、时序图（Sequence）、数据流图（Data Flow）、生命周期图（Lifecycle）。图并非临时生成，而是经过结构化 JSON IR → 确定性校验 → HTML/SVG 渲染的完整管道，读者可以搜索节点、追溯上下游依赖、追踪精确路径、对比两个版本的变更差异，最终导出 PNG、SVG、WebM 和 1200×630 分享卡片。

GitHub Stars 在 2026 年 8 月进入爆发期——8月28日当天新增超 2,200 颗，截至同日约 23,300 星（截至 2026-08-28），周新增 6,251 星，持续占据 GitHub Trending 前列。Skilld.dev 8月榜单将其列为第 2 位热门技能，被 29,000+ 开发者讨论。

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

作者：tt-a1i（独立开发者），Cocoon-AI/architecture-diagram-generator v1.0 的 fork 项目，v2.x 进行了大规模重写，追加了 CSS 变量双主题系统、导出管道、类型化渲染器、Schema 校验和后渲染检查。

功能与原则

Archify 的核心能力不是”让 AI 画图”，而是”给 AI 生成的技术图补上一条工程化交付链”。它的设计原则：

可验证：节点关系来自真实代码，而非 AI 临场生成。生成前经过 Schema 检查、布局校验、HTML/SVG 线路校验，确保拓扑结构与代码实际一致。

可追溯：生成的每张图都附带结构化 JSON IR 源文件，可存入 Git 作为版本管理的对象，改代码后可重新运行生成新版图。

确定性：相同输入无论运行多少次，输出均一致。避免了 AI 图表”每次生成都不一样”的不可复用问题。

可交互：图不是静态图片，读者可以搜索节点、过滤语义角色、播放引导路径故事（finite guided story），无需 AI 参与即可自主探索。

认可度

截至 2026-08-28，Archify 在 GitHub 累计获得 约 23,300 星，周新增 6,251 星；8月28日单日新增超 2,200 星。被 skilld.dev 列为 8月 Trending Agent Skills 第 2 名（30,061 讨论热度），CSDN/GitHub Trending 日榜多次上榜。License: MIT。

链接

GitHub：https://github.com/tt-a1i/archify
官网/演示：https://tt-a1i.github.io/archify/
场景指南：https://tt-a1i.github.io/archify/guide.html
Proof Lab（带源码的 11 个完整示例）：https://tt-a1i.github.io/archify/gallery.html

原作者

tt-a1i（GitHub username: tt-a1i），独立开发者。项目由 Cocoon-AI/architecture-diagram-generator v1.0 fork 重写而来，v2.16.0 版本于 2026-08-30 刚发布，持续活跃维护。

介绍

Archify 起源于一个工程痛点：让 AI 根据代码生成 Mermaid 或流程图不难，真正的问题在于——图里的节点是否对应真实模块，箭头是否代表代码中真实存在的关系，修改代码后图是否过期，评审者能否追溯这张图的生成过程。

它的解法是引入一条 JSON IR 中间表示管道：Agent 仍然负责理解仓库、组织叙事，但最终输出的是一份带类型约束的结构化 JSON，经过规则校验后确定性编译为独立 HTML/SVG。这条管道让图表从”一次性聊天回答”变成了”能够保存、复查、修改和再次生成的系统地图”。

v2.x 版本带来了完整的主题系统——同一张图可以一键切换 Dark/Light 双主题，导出的 HTML 自动跟随读者系统的明暗偏好；导出格式覆盖 PNG、SVG、WebM 视频和 1200×630 分享卡片，满足 README、发布说明、技术文档和社交分享等多种场景。

Archify 支持直接用自然语言描述系统，不需要已有代码库。在任何 Agent 会话里输入”Use archify to draw: Browser → API → Redis cache → PostgreSQL fallback”，即可得到一张完整的运行时架构图。支持的 Agent 平台包括 Cursor（最推荐）、Claude Code、Codex CLI、OpenCode，以及 Raven（手动 ZIP 安装）。

特点

  • 五图通吃：架构图、工作流图、时序图、数据流图、生命周期图，统一入口，Prompt 里指定类型即可切换
  • 校验交付链：Schema + 布局 + 线路三重校验，失败返回规则码和修复建议，不是让 Agent 面对堆栈信息整张图重写
  • 双主题 + 全格式导出：Dark/Light 一键切换；PNG、SVG、WebM（动效）、1200×630 分享卡片，覆盖静态文档到社交媒体场景
  • 版本对比：可对两个已校验快照做 Before / Delta / After 对比，精确标注新增、删除、变更的节点和路径
  • 语义穿透：读者可按语义角色（如 aws.lambda、postgres、kafka）过滤节点，追踪上游/下游 Reach，不需要 AI 参与即可自主探索

使用方法

安装（全局，一条命令）：

npx skills add tt-a1i/archify -g

在 Cursor/Claude Code 会话中直接使用：

# 分析已有代码库
Analyze this repository, then use archify to create a runtime architecture diagram.
Show 8–12 core components, one primary path, external dependencies, and trust boundaries.

# 直接用自然语言描述（无需代码库）
Use archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback.

输出后继续用自然语言调整：”add Redis”、”highlight the rollback path”、”move auth to the left”——Archify 保留结构化 JSON IR，支持精确迭代。

使用场景与人群

适用场景：技术评审（PRD/架构 Review）、代码交接文档、故障分析拓扑图、CI/CD 流程可视化、系统设计原型、README/发布说明配图。

目标用户：后端/架构工程师（需要准确表达系统拓扑）、技术 Leader（做 Code Review 时的评审材料）、AI Agent 开发者（给 AI Coding 工具补强可视化输出能力）。对于常需要在文档、PPT、团队分享里放架构图但又懒得开 draw.io 的开发者，Archify 是目前效率最高的方案之一。

输入与输出案例

案例一：代码库分析

输入（Cursor/Claude Code）：
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.

输出：
一个 self-contained HTML 文件，含：
- 架构图（展示 Router、Handler、Cache、DB 等节点）
- Dark/Light 主题切换按钮
- Export 菜单（PNG / SVG / WebM / Share Card）
- 点击节点可追踪上下游 Reach

案例二：自然语言直接出图

输入：
Use archify to draw: Client -> API Gateway -> Auth Service 
-> User Service -> PostgreSQL. Auth also calls Redis for sessions.

输出：
一张包含 Client、API Gateway、Auth Service、User Service、
PostgreSQL、Redis 的运行时架构图，带信任边界标注，
可搜索任意节点并追踪 Auth Service 的 Session 读取路径。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 13 阅读