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 先画一张能点的架构图，比对着几百个文件硬啃快得多。

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

• https://github.com/tt-a1i/archify
• https://tt-a1i.github.io/archify/

核心亮点

它能做什么、输出什么

环境要求

如何使用

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

node -v
npx -v

npx skills add tt-a1i/archify -g

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

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

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

典型应用场景

和普通架构图比什么

🧠 它强在「先把图画成可检查的数据，再渲染成网页」：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。工具本身可以商用；你画出来的图和网页归你。如果图里含了公司内部架构，发出去之前自己先脱敏。