Archify 使用教程

📖 项目简介

Archify 是一个 Agent Skill，作者仓库名 tt-a1i/archify，MIT 协议。2026-09-21 GitHub API 记录为 68,632 Star。定位很明确：把你想理解、规划或分享的内容，变成一份可交互的独立 HTML。

它不是把框图随便渲染成图。Agent 先写出一份带类型的 JSON 中间表示，再检查结构、布局、HTML/SVG、路径和文字避让。任何一项不过，就不会用新图覆盖上一份可用结果。打开成品后，可以点节点、追路径、按章节播放，也可以导出图片和分享卡片。

装完以后，Cursor、Claude Code、Codex CLI、OpenCode 都能直接用。接手陌生项目时，让 Codex 先画一张能点的架构图，比对着几百个文件硬啃快得多。

📎 相关链接与下载地址（点击展开）

GitHub 仓库：
https://github.com/tt-a1i/archify
在 GitHub 搜索 tt-a1i/archify 也能找到。
在线演示 / 场景指南：
https://tt-a1i.github.io/archify/
更多教程：关注公众号 / 抖音 / 视频号「IT小圈」

✨ 核心亮点

👆

能点、能追路径

节点可聚焦，路径会按调用顺序亮起来，复杂流程还能按章节播放

✅

交付前先检查

结构、布局、路径、文字压线都过了，才替换上一份可用结果

🌐

一份 HTML 就能发

成品是独立网页，发给同事打开就能点，不必再装 Archify

🧩

五种图都能画

架构、工作流、时序、数据流、生命周期，按场景选一种即可

🧩 它能做什么、输出什么

项目	说明
输入	自然语言描述，或让 Agent 读取仓库后生成源码对照图
适用类型	架构、工作流、时序、数据流、生命周期；社区也有行程图这类非代码用法
输出	独立 HTML；可导出 PNG、动态格式、分享卡片
语言 / 兼容	界面可切中英；Cursor、Claude Code、Codex CLI、OpenCode
规格 / 容量	官方建议架构图控制在 8–12 个核心组件，细节放卡片，不要堆边

🖥️ 环境要求

环境	建议配置
操作系统	Windows / macOS / Linux，能跑 Node 即可
运行环境	Node.js；仓库命令走 `node archify/bin/archify.mjs`
硬件	普通笔记本即可，不依赖独立显卡
低配 / 无卡方案	不装仓库也能先看官方演示页；只浏览成品 HTML 时甚至不用装 Skill
关键依赖	对应 Agent（Codex / Claude Code / Cursor）+ `npx skills`

🚀 如何使用

💡

最快路径：确认 Node → 一行装全局 Skill → 在 Codex 里点名图种 → 等检查过完再打开 HTML。

确认运行环境

能跑 Node 即可，不依赖独立显卡。先在终端看版本，没有 Node 就先装 LTS，再重开终端。

安装 Archify Skill

在 GitHub 搜索 tt-a1i/archify 核对仓库后，用官方这一行装全局 Skill。装完后 Cursor、Claude Code、Codex CLI、OpenCode 都能直接调用。

                        bash
                        npx skills add tt-a1i/archify -g
                    

需要自己改 Skill 或查命令时，再克隆仓库。仓库命令入口是 node archify/bin/archify.mjs，不是 npx archify。

最小例子：先画一张能点的架构图

打开 Codex / Cursor，先点名图种，再给节点和关系。官方建议架构图控制在 8–12 个核心组件，细节放到节点卡片里。

                        text
                        用 Archify 画一张架构图。
节点：API 网关、认证服务、订单服务、支付、数据库。
关系：网关把请求分给认证和订单；订单再调支付；两边都写数据库。
交付前先跑完检查，任何一项不过不要覆盖上一份可用结果。
                    

Agent 会按这个顺序做事：

步骤	作用
写中间表示	先产出带类型的 JSON，节点、边、布局都写清楚
跑检查	结构、布局、HTML/SVG、路径、文字避让，一项不过就不交新图
交独立 HTML	用浏览器打开就能点节点、追路径、按章节播放
可选导出	需要静态图或分享卡片时再导出，不要只交一张 PNG

进阶：对照源码，或换一种图

接手陌生仓库时，让它读代码再画，节点写真实模块名。请求链路用时序图，后台任务用工作流，数据怎么走用数据流。

                        text
                        读这个仓库，画一张源码对照架构图，节点控制在 12 个以内。

用 Archify 画一张时序图，把一次下单请求从网关走到支付的调用顺序标出来。
                    

结合 Codex 使用

全局 Skill 装好后，在 Codex 里打开项目目录，直接说「用 Archify 画图」即可。它会按 Skill 写中间表示、跑检查、再交出 HTML。不要让它跳过检查直接改网页。

✅

装上之后，接手陌生项目的第一件事不再是硬啃几百个文件，而是先拿到一张能点、会亮的架构图。

🎯 典型应用场景

📂

接手陌生仓库

几百个文件不知从哪看，先画 8–12 个核心模块的源码对照图

🔗

追一次请求路径

下单、登录、支付这类链路，用时序图或路径播放比读调用栈快

👥

发给同事一起看

成品是独立 HTML，对方打开就能点，不必再装 Skill

🧭

规划还没写的系统

先用自然语言描述模块和关系，检查过了再开工

🔄

后台任务和工作流

队列、重试、补偿这类流程，换成工作流图更清楚

🗺️

行程和路线图

旅行攻略也能画成能点的路线图，点城市看当天安排

📈 和普通架构图比什么

对比点	说明
中间物	普通画图工具直接出图；Archify 先写带类型的 JSON，再渲染
交付门槛	结构、布局、路径、文字压线不过，不会覆盖上一份可用结果
打开方式	不是一张死图，是可点节点、可追路径的独立网页
图种	架构、工作流、时序、数据流、生命周期，按场景换，不硬套框线图
实测体量	本期演示图 12 个节点、11 条边、9 项检查全过

🧠

它强在「先把图画成可检查的数据，再渲染成网页」：Agent 改的是中间表示，不是像素。

❓ 常见问题

Q: 和普通画图工具、让 AI 直接出一张 PNG 有什么区别？

普通工具交出一张死图。Archify 先写带类型的中间表示，再检查，再交独立 HTML。点节点会聚焦，选路径会按调用顺序亮起来，发给同事打开也能点。

Q: 支持哪些输入和图种？

可以口述，也可以让 Agent 读仓库再画。官方图种是架构、工作流、时序、数据流、生命周期。社区里也有人拿它画行程路线图。

Q: 终端提示找不到 npx 或 skills 怎么办？

多半是本机还没装 Node，或终端没刷新环境变量。装好 Node LTS，重开终端，再执行 npx skills add tt-a1i/archify -g。不要去搜一个叫 Archify 的独立安装包。

Q: 没有显卡、配置很低，还能用吗？

能。它不跑大模型推理，只让现有 Agent 写 JSON 和 HTML。普通笔记本即可。只想先看效果，打开官方演示页就行，不必先克隆仓库。

Q: 五种图怎么选？

模块怎么拼用架构图；后台任务用工作流；一次请求的先后顺序用时序图；数据怎么流用数据流；服务从启动到下线用生命周期。提示词里先写图种，再写节点。

Q: 怎么和 Codex 结合？

一行装全局 Skill 后，在 Codex 里打开项目目录，直接说「用 Archify 画图」。要求它先检查再交付。检查不过时，让它改中间表示，不要自己在 HTML 里硬改。

Q: 只能用 Codex 吗？和 Cursor、Claude Code 什么关系？

不是只能用 Codex。官方写明支持 Cursor、Claude Code、Codex CLI、OpenCode。用你手头那个 Agent 即可，装法都是同一行命令。

Q: 可以商用吗？

仓库协议是 MIT。工具本身可以商用；你画出来的图和网页归你。如果图里含了公司内部架构，发出去之前自己先脱敏。