Archify 是什么？
Archify 是一个开源 Agent Skill，把系统、流程或计划变成图表。Agent 编写类型化 JSON，再由 Archify 渲染、校验并交付独立的交互 HTML 成品。Skill 和渲染器采用 MIT 许可证。
v3.0.1
稳定版 Agent 技能 · 查看更新
开始使用
用大白话讲清楚，得到一张可信的图。
年假怎么排、求职走到哪步、工资去哪了，或者一整套软件系统——只要它有步骤、组成、关系或状态，你的 AI Agent 都能把它变成一张可以点开探索、交付前已经校验过的 HTML 图。
npx skills add tt-a1i/archify -g
实时成品导览
整个系统，一屏读完。
这是真实生成的成品，不是截图。泳道、边界和每一条作者连线都在这里——继续滚动，移动它的镜头。
智能体工具调用——策略、执行、恢复与证据闭环5图表类型
4视觉预设
9/9每个成品的校验项
4×原生导出倍率
0运行时依赖
01不只是代码
不只是代码，
生活里的事也能画。
年假规划、求职进度、租房沟通、每月收支——下面每一张都是真实生成的 Archify 成品，和系统架构图走同一套生成与校验流程。点开就能探索。
一年的假怎么排最划算？
一年的年假怎么排
每份求职申请走到哪一步了？
Where Each Job Application Stands
工资每个月都去哪了？
Where a Paycheck Goes Each Month
租房时，谁跟谁说了什么？
租一套房，一来一回
示例里的数字仅作演示。描述你自己的情况，Agent 就会画出你的那一张。
02图表类型
五个问题，
五种图。
问你真正想问的问题。Archify 会选出能回答它的那种图——不管是一套软件系统、一份计划，还是你自己生活里的事。
-
一件事由哪些部分组成、彼此怎么连接——家里的账户和银行卡、团队分工，或者云上系统的服务、数据库与安全边界。
- 家庭账户
- 团队分工
- 微服务拓扑
- 云与安全边界
-
跨人、跨阶段的步骤——办签证、排年假、新人入职、审批链，或者 CI/CD 流水线，逐泳道铺开。
-
按顺序的一来一回——通过中介租房、报销往返，或者带返回值的 API 调用链。
-
东西从哪来、最后落到哪——工资流向账单和储蓄、文件流转审阅，或者数据穿过管道。
-
有哪些状态、怎么在状态之间变化——求职申请、一笔订单、护照换发或一次部署，含等待、重试和结局。
03输出
一个文件，
全部都在里面。
双主题输出
每张图都内置协调的深色与浅色变量集：HTML 的主题开关与 SVG 的 @media prefers-color-scheme 规则同步切换——一个文件，自动跟随读者主题。
浅色 · 深色 · 单文件
一个菜单，全部格式
PNG、JPEG、WebP、双主题 SVG、WebM 动图，或直接复制到剪贴板——所有导出都在浏览器内原生渲染，同一个菜单完成。
- PNG
- JPEG
- WEBP
- SVG
- WEBM
- 剪贴板
超清 4× 导出
PNG、JPEG、WebP——由浏览器以最高 4 倍分辨率原生栅格化，无上采样模糊。视网膜屏、幻灯片、印刷均清晰。
独立 HTML 文件
单个 HTML 文件，零依赖、无需服务器或构建工具，任意浏览器打开即用。作为附件发邮件或贴 PR 评论均可。
对话式迭代
「把暑假旅行挪到八月」「加一个 Redis」「把截止日标红」——用大白话精调，不用学任何画图工具。
检查并播放真实路径
Route Journey 始终保留完整作者路径，可逐站检查，也可沿每条精确入向关系播放一次由读者控制的有限旅程。
检查 · 播放 · 暂停04设计系统
每种颜色，
都有含义。
七种节点颜色，深浅主题下保持一致。图例可以按你的故事改名——「后端」可以叫「假期」，「安全」可以叫「规则」。
Web AppReact SPA前端客户端、浏览器、移动端、UI
API ServerFastify :8080后端服务、API、Worker、守护进程
Postgresprimary :5432数据库数据库、缓存、存储、AI/ML
CloudFrontCDN云服务托管服务、基础设施
Auth ProviderOAuth 2.0安全鉴权、密钥、安全网关
Kafkaevents topic消息总线Kafka、RabbitMQ、SNS
Usersbrowser · mobile外部系统用户、第三方、通用外部
05快速开始
三步上手，
一条命令。
同一份经过检查的 Skill 可用于 Claude Code、Codex、Cursor、OpenCode 和 GitHub Copilot。选择你的 Agent，获取准确命令。
# 为你的 Agent 全局安装
npx -y skills add tt-a1i/archify --skill archify --agent claude-code --global --copy --yes
# 或者用临时副本在 Codex 中试一次
npx skills use tt-a1i/archify@archify --agent codex
# 然后直接说
› 用 Archify 帮我排一下今年的年假：10 天年假，加 2 天 6 月底过期的调休。
-
1
一条命令安装
运行对应 Agent 的命令，或打开可切换 Agent 的快速开始页获取项目级安装命令。
-
2
描述你的系统
描述步骤、角色、组成或状态，也可以先让 agent 读一下代码仓库。
-
3
让 agent 绘制
告诉 agent 使用 Archify，它会生成可在任意浏览器打开的单文件 HTML，并可继续在对话中迭代。
每个成品都内置
图表指南?
切换主题T
查找节点 / 路径端点/
探查、检查并播放路径R
语义雷达M
对比语义类型L
演示舞台F
打开导出菜单E
聚焦节点Enter
阅读层级 / 复位+ − 0
菜单导航↑ ↓
关闭菜单Esc
产品事实
一张能检查、能保留的图。
可以提供哪些输入？
可以从自然语言描述、计划、已有 Mermaid 文本或代码库证据开始，代码库并非必需。Agent 理解输入后创建 Archify JSON；Archify 不承诺自动解析全部 Mermaid 语法。缺失的事实应标明或进一步确认。
哪些 Agent 可以使用？
安装示例覆盖 Claude Code、Codex、Cursor、OpenCode 和 GitHub Copilot，它们使用同一份 Archify Skill。Agent 的文件权限、本地 Node.js 运行时，以及所选导出功能需要的工具，由你的使用环境提供。
会得到什么？有哪些边界？
主要交付物是内含 SVG 的 HTML 文件和类型化 JSON 源。在浏览器里可以检查、搜索、追踪路径、切换主题和导出。校验检查的是编写出的图表，不证明系统的实际运行行为。Archify 不提供托管协作服务，也不是通用的所见即所得编辑器。
导出格式包含 PNG、JPEG、WebP、SVG 和 WebM。具体可用性取决于格式、浏览器或本地工具；选择交付格式前，可先打开成品检查导出菜单。
默认安装命令使用稳定版 main 源码。开发版示例反映各自的构建，可能包含尚未稳定发布的功能。