Archify Skill：让 AI Coding Agent 在对话中直接输出精美交互式架构图

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

把代码库或系统描述直接变成精美的交互式系统地图——Archify 正是这样一款面向 AI Coding Agent 的架构图生成 Skill。它不依赖任何第三方渲染服务，通过「Agent 生成结构化 JSON IR → 本地确定性编译 → 自包含 HTML/SVG」的工作流，让 AI 在对话中直接输出带动画、可分享、可验证的架构/流程/时序/数据流/生命周期五种图。今天（2026-08-28）狂揽 4,239 颗星，冲上 GitHub Trending 榜首，成为当天最受关注的 AI 工具类开源项目之一。

核心能力与设计原则

Archify 是一个 Node.js 渲染与校验系统，深度集成 Cursor、Claude Code、Codex CLI 和 OpenCode。其设计原则是：所有生成结果必须可验证、可追溯、不凭空发明拓扑。这意味着图中的每一条边、每一个节点都对应真实代码路径，而非 AI 自由发挥的「想象图」。系统输出自包含 HTML 文件（无需服务器），另支持 PNG、SVG、WebM 格式以及 1200×630 分享卡片，适合直接贴进 README 或 Release 说明。

认可度

截至 2026-08-28，Archify 在 GitHub 共有 24,858 颗星，Fork 1,596 次，项目当前开发版本 v2.16.0-dev.0。当天新增约 4,239 星，空降 GitHub Trending 总榜前列。TrendsShift 数据显示其排名在过去 30 天持续攀升，属近期爆发力最强的 Skill 新秀之一。安装量方面，因其通过 npx skills add 方式分发，具体数字未公开披露，但从 Trending 热度来看已形成相当规模的社区使用群体。

链接

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

原作者

作者 GitHub ID 为 tt-a1i，目前社区贡献者还包括 sunsunsun-java、cursoragent、claude 等，是 Claude Code 生态的活跃贡献者之一。项目配有完整的Scenario Guide 和 Proof Lab 在线展示页。

介绍

Archify 起源于一个痛点：AI Agent 在生成代码时几乎无法直观「看到」系统的架构，导致生成的代码与真实拓扑脱节。Archify 通过接收结构化 JSON IR（中间表示）来解决这个问题——JSON IR 描述了系统中的组件、依赖、边界和路径，Archify 的渲染引擎将其确定性编译为 HTML/SVG，每次相同输入必输出相同结果，不依赖 AI 随机性。

它支持五种核心图类型：

  • Architecture（架构图）：展示组件、服务、存储和信任边界，适合高层系统概览
  • Workflow（工作流）：CI/CD、审批、工具调用和运维手册的图形化表达
  • Sequence（时序图）：API 调用、缓存回退、认证和异步追踪，适合调试
  • Data Flow（数据流图）：管道、血缘、PII 和数据消费者，适合数据治理场景
  • Lifecycle（生命周期图）：状态机、重试、等待和终止路径，适合业务规则可视化

Archify 还支持两个快照对比（Before / Delta / After），在代码审查阶段直接比较架构变化——精确列出新增、删除、修改、移动和重新路由的事实，而非笼统描述。

特点

  • 零外部依赖：渲染在本地完成，不调用任何第三方服务，结果可离线查看
  • 五种图类型覆盖全场景：架构、流程、时序、数据流、生命周期，一套工具解决所有可视化需求
  • 确定性输出：相同 JSON IR 每次编译出完全相同的 HTML，杜绝 AI 幻觉
  • 交互式探索：节点搜索、上游/下游可达性追踪、角色对比、引导式故事漫游
  • 多格式导出：HTML 自包含文件、PNG、SVG、WebM，以及 1200×630 分享卡片，覆盖展示与分享全链路
  • 跨 Agent 支持：Cursor、Claude Code、Codex CLI、OpenCode，主流 AI 编程工具全覆盖
  • 架构变更校验：可对两个提交版本的架构做 diff，明确标注变更内容

使用方法

安装（一键）：

npx skills add tt-a1i/archify -g

Cursor 用户另有专属快速开始页：Agent-aware quick start。

基本调用示例 1——生成架构图：

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.

基本调用示例 2——生成登录流程时序图：

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

生成后，Archify 会输出一个自包含 HTML 文件链接，用户直接在浏览器打开即可交互浏览，也可通过 Export 菜单导出 PNG/SVG。

不想安装直接体验：

npx skills use tt-a1i/archify@archify --agent codex

使用场景与人群

  • AI Coding Agent 开发者：在使用 Cursor/Claude Code 时，需要直观理解代码库架构，避免 AI 盲目编码
  • 技术Leader / 架构师：在 Code Review 时快速比对架构变更，确认新增依赖和边界变化
  • 开源项目维护者：自动生成 README 配套的系统架构图，提升项目可读性
  • 数据/安全团队：用 Data Flow 图追踪 PII 走向，做数据治理可视化
  • 业务分析：用 Lifecycle 图描述复杂状态机，辅助与产品和运营沟通业务规则

输入与输出案例

案例 1：陌生代码库快速上手

输入（对 Claude Code）：

Analyze this repository, then use archify to create a high-level runtime architecture diagram.

输出：Archify 扫描代码后，生成一个交互式架构 HTML，包含 8–12 个核心组件、主要路径、外部依赖和信任边界。点击任意节点可查看其代码来源和上下游调用关系。

案例 2：架构变更 Diff

输入（对 Claude Code）：

Compare the architecture before and after this PR, highlight what changed.

输出：Archify 渲染出 Before / Delta / After 三视图，精确标注新增了哪些组件、删除了哪些路径、修改了哪些依赖关系，数据可直接用于 Code Review 评论。

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

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 15 阅读