Archify Skill：AI 一句话生成可交互架构图

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

Archify 是一款让 AI Agent 通过自然语言描述即可生成精美可交互架构图的 Skill。用户只需描述系统或粘贴 Mermaid 图表，Archify 便会输出自带动画、可探索跳转、可一键导出 PNG/JPEG/WebP/SVG 的独立 HTML 文件。2026 年 4 月开源，8 月冲进 GitHub Trending 第一名，月增长 152%，截至 2026-10-06 约 72K 星，已成为 Claude Code / Cursor / Codex / OpenCode 生态中最受欢迎的架构图生成工具。

功能与原则

Archify 的核心能力是将自然语言描述或 Mermaid 代码转化为结构化的 Typed JSON IR（中间表示），再由 Node.js 引擎完成 Schema 校验、节点布局、HTML/SVG 渲染，最后输出带动画、可交互、可导出的独立成品。

设计原则三条：

  • Source-backed：每个节点、每条边都有源码依据，生成后可直接追溯验证
  • Zero-dependency output：输出是纯 HTML，不依赖任何外部 CDN 或框架，离线也可查看
  • Agent-native：天然适配 Claude Code、Cursor、Codex CLI、OpenCode 等主流 AI 编程工具，npx 一键安装

认可度

  • GitHub Star：截至 2026-10-06 约 72,769 ★（claudeskills.info 数据），较上月增长 152%
  • Forks：539
  • Trending：2026 年 8 月登顶 GitHub Trending 全榜第一
  • Skills 市场：在 skills.sh、Claude Skills Hub、CocoLoop 等多个 Skill 平台均有收录
  • 社区：Discord 活跃，GitHub Issues 56 个，Release 17 个，持续维护中

链接

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

原作者

  • GitHub：tt-a1i
  • 赞助方：Kimi Work、Supercode、OpenLux（提供赞助基础设施和积分优惠）
  • 许可证：MIT

介绍

Archify 起源于一个痛点：架构图最麻烦的不是画出来，而是过两周后没人敢信。Mermaid 能画连线，PPT 能摆框，但评审时总会出现”这条链路谁写的？边界在源码里有没有证据？改动前后变了哪几个事实？”这类问题。Archify 用”Typed JSON IR + 校验 + 渲染”的流水线彻底解决这个信任问题——每张图都可校验、可溯源、可交付。

安装极其简单，一行命令搞定：

npx skills add tt-a1i/archify -g

支持 Claude Code、Cursor、Codex CLI、OpenCode 四种主流 Agent，DeepSeek Harness 用户也可通过社区插件接入。无需准备代码库，直接用自然语言描述系统即可出图。

输出形式是独立的 HTML 文件，包含可交互的节点探索、路径高亮、语义雷达、全局导航等功能。用户社区已用它产出系统架构图、时序图、数据流图、CI/CD 流程图、API 生命周期图、状态机图等多种类型，并自发扩展到旅行行程、法律引用检查、合同审查、故障复盘等非技术场景。

特点

  • 多类型图表支持：架构图、时序图、数据流图、状态机/生命周期图、流程图、CI/CD 流水线、API 调用链路、数据管线、ETL/ELT 地图、PII 边界图、数据血缘图等
  • Mermaid 代码直接转换：粘贴 flowchart / sequenceDiagram / stateDiagram 代码，Archify 从零开始用自研风格重新布局，而不是简单换主题
  • 语义化探索：节点可搜索、支持语义透镜（Semantic Lens）、路径预览（Intent Trace）、语义雷达（Semantic Radar）全局总览
  • 一键多格式导出：PNG / JPEG / WebP / SVG / WebM，离线可用、可分享
  • 深浅主题切换：内置 dark/light 双主题，支持在生成后自由切换
  • 可校验输出：每张图附带 JSON IR 和校验收据（validation receipt），保证图与源码一致

使用方法

安装（全局）

npx skills add tt-a1i/archify -g

基础调用示例

对 Claude Code / Cursor / Codex 说：

Use Archify to diagram a web request: Browser calls the API, the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.

然后继续追加指令：

  • “Add authentication”（追加认证节点）
  • “Highlight the cache-miss path”（高亮缓存未命中路径）
  • “Switch to the light theme”（切换浅色主题）

输出：一个 .html 文件，可直接浏览器打开，支持节点点击、路径追溯、全局缩放、导出。

无需代码库：也可以直接用描述出图，不依赖已有源码。

使用场景与人群

  • 适用场景：系统架构设计评审、技术文档可视化、故障复盘与链路追溯、CI/CD 流程图、API 文档生成、团队协作沟通
  • 目标用户：后端/架构工程师、前端技术负责人、DevOps 工程师、技术项目经理，以及任何需要快速把技术方案可视化的人

Archify 特别适合在设计评审阶段让 AI 生成可校验的架构图，替代手绘或截图，让团队讨论有凭有据。

输入与输出案例

案例 1：Web 请求链路描述

输入（对 Agent 说）：

Use Archify to diagram a web request: Browser calls the API, the API checks Redis, and a cache miss queries PostgreSQL and fills the cache.

输出：一个带动画的 HTML 架构图，展示 Browser → API → Redis → PostgreSQL 的完整链路，支持点击 Redis 节点查看缓存未命中时的查询路径，支持导出 PNG。

案例 2：上海四天 CityWalk 行程规划

输入：描述四天上海行程安排（外滩、陆家嘴、田子坊、豫园等）

输出：可交互的 HTML 行程图，可在各天之间切换，点击每个地点跳转高德地图/小红书/大众点评，社区用户将这类非技术图表用于实际旅行规划。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 13 阅读