Archify Skill：让 AI 编程 Agent 原地生成精美可交互架构图

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

Archify 是一款让 AI 编程 Agent 直接在对话中生成精美可交互架构图的 Skill。它接受文字描述或代码库分析，输出带五种图表类型（架构图、工作流、时序图、数据流、生命周期）、双主题切换、内置动画和 PNG/SVG/WebM/分享卡片导出的单 HTML 文件。整个过程无需截图工具，生成的图可直接粘贴进文档或 презентация。截至 2026-08-30，Archify 已在 GitHub 收获 33,274 stars，过去 24 小时新增超过 3,900 stars，空降 GitHub Trending 日榜前列，是近期增速最猛的 Agent Skill 之一。

Archify 的核心逻辑是”JSON IR →确定性 HTML/SVG 编译”。Agent 只需生成结构化的 typed JSON 中间表示，Archify 负责渲染——这确保了输出的可复现、可校验，而不是 AI 随机的截图或草图。渲染后的 HTML 是自包含的，无需服务器或第三方库，打开即展示。

认可度

  • GitHub stars：33,274（截至 2026-08-30）
  • 今日新增：约 3,902 stars（数据来源：git-trending-rank 2026-08-30）
  • Fork：2,097
  • 最新版本：v2.16.0（2026-08-30 当天发布）
  • Trending：2026-08-30 GitHub Trending 日榜高位
  • 支持 Cursor、Claude Code、Codex CLI、OpenCode 四大主流 Agent

链接

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

原作者

作者 GitHub ID：tt-a1i，项目配套站点 tt-a1i.github.io/archify，提供 Scenario guide 和 Proof Lab 画廊。

介绍

Archify 起源于一个痛点：工程师想让 AI 画出系统架构图，但 AI 的输出要么是文字描述、要么是低质量的 ASCII 图、要么干脆是截图后丢失精度。Archify 将这个过程标准化——Agent 分析代码库或接收文字描述后，输出 typed JSON IR，Archify 编译器将其确定性转换为带动画、可交互的 HTML 图表。

项目支持五种核心图表类型：

  • Architecture（架构图）：组件、服务、存储、边界
  • Workflow（工作流）：CI/CD、审批、工具调用、操作手册
  • Sequence（时序图）：API 调用、缓存降级、认证、异步追踪
  • Data Flow（数据流）：管道、血缘、PII、消费者
  • Lifecycle（生命周期）：状态机、流程阶段

每种图都配有深色/浅色主题、一键导出 PNG/SVG/WebM，以及 1200×630 分享卡片，适合直接贴进 README 或社交媒体。

Archify 还支持架构快照对比——可以上传两个版本生成的 JSON IR，系统渲染为 Before / Delta / After 三栏对比，精确标注增、删、改、移、重新路由的事实，自动生成变更报告。对于 Code Review 和技术文档撰写来说，这个功能直接替代了手工画图的繁琐流程。

特点

  • 确定性渲染：typed JSON IR → HTML/SVG，非随机生成，结果可复现、可校验
  • 五大图表类型：架构图、工作流、时序图、数据流、生命周期，一套工具覆盖主要图类型
  • 双主题 + 动画：Dark/Light 一键切换，内置有限状态动画，呈现效果远超静态截图
  • 多格式导出：HTML（自包含）、PNG、SVG、WebM、1200×630 分享卡片，覆盖文档和社媒需求
  • 架构快照对比：两个版本对比渲染 Before / Delta / After，精确追踪架构变更
  • 全工具链支持：Cursor、Claude Code、Codex CLI、OpenCode 均已适配，npx skills add 一键安装

使用方法

安装（一行命令）：

npx skills add tt-a1i/archify -g

在 Cursor 中使用：

打开 agent-aware quick start：https://tt-a1i.github.io/archify/start.html?agent=cursor&type=architecture

基本调用示例——分析代码库生成架构图：

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.

聚焦特定路径（继续对话）：

Add Redis cache between API and PostgreSQL.
Highlight the rollback path in red.

导出：

渲染后点击 Export 菜单，可复制 PNG 到剪贴板、下载静态/动态格式，或一键生成 Route Share Card（1200×630）。

版本检查： Archify 每 72 小时检查一次稳定版更新，可通过设置 ARCHIFY_UPDATE_CHECK_DISABLED=1 禁用网络和提醒状态写入。

使用场景与人群

  • 适用场景：技术文档撰写、代码 Review、系统设计讨论、架构变更记录、README 配图、团队内部沟通
  • 目标用户：后端/全栈工程师、技术 Lead、DevOps 工程师、写架构设计文档的任何人
  • 不适用的场景：需要真实运行时数据监控的场景（Archify 是静态/设计层面的图，不是运行时追踪工具）

输入与输出案例

案例 1：文字描述生成架构图

输入：

Use archify to create an architecture diagram:
Browser → API → Redis cache → PostgreSQL fallback.
Show auth service on the left, CDN on the right.

输出：单 HTML 文件，包含深色主题架构图，Browser / API / Redis / PostgreSQL 四个节点，Auth 和 CDN 作为边界标注，支持搜索节点、点击聚焦路径、导出 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.

后续输入（比较两个版本的架构变化）：

Now trace the mco-org/mco repository at commit 9f1a1cf and compare it with the previous snapshot.
Show Before / Delta / After.

输出：三栏对比图，精确标注新增、移除、修改的组件和连接，Delta 列高亮变更点，可导出为静态 PNG 或 WebM 动画。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读