Archify 是什么？
Archify 是一个开源 Agent Skill，把系统、流程或计划变成图表，也能把一个问题变成一页式解答。画图时 Agent 编写类型化 JSON，写一页答案时编写 Markdown 草稿，再由 Archify 渲染、校验并交付独立的交互 HTML 成品。Skill 和渲染器采用 MIT 许可证。
v3.2.0
稳定版 Agent 技能 · 查看更新
开始使用
用大白话问清楚，得到可信的图和答案。
年假怎么排、P99 为什么暴涨、第一次打开 HTTPS 网站发生了什么，或者一整个代码仓库——你的 AI Agent 会给你一张可以点开探索的图，或者一页结论在前、标注出处的解答。都是一个 HTML 文件，交付前已经校验过。
npx skills add tt-a1i/archify -g
实时成品导览
整个系统，一屏读完。
这是真实生成的成品，不是截图。泳道、边界和每一条作者连线都在这里——继续滚动，移动它的镜头。
智能体工具调用——策略、执行、恢复与证据闭环2种回答方式：图或一页答案
10图表类型
4种页面样式，浅色深色都有
9/9每张图的校验项
0运行时依赖
01一页式解答
问一个问题，
得到一页能核对的答案。
不是每个答案都是一张图。让 Agent 用一页来回答：结论在最前面，每个面板回答一个问题，用表格、步骤、图表、代码和经过校验的图讲清楚。步骤会点亮它讲解的图，结论标注来源，代码固定到具体提交。
- 结论先行
- 步骤和图并排
- 编号来源
- 代码固定到提交
- 用你的数据出图表
- 可勾选清单
- 四种样式 · 浅色深色
- 长图 · PDF
- 按面板追问
四种页面样式，浅色深色都有，可导出长图或 PDF。对任何面板追问，Agent 只改那一块。
02不只是代码
不只是代码，
生活里的事也能画。
年假规划、求职进度、租房沟通、每月收支——下面每一张都是真实生成的 Archify 成品，和系统架构图走同一套生成与校验流程。点开就能探索。
一年的假怎么排最划算？
一年的年假怎么排
每份求职申请走到哪一步了？
Where Each Job Application Stands
工资每个月都去哪了？
Where a Paycheck Goes Each Month
租房时，谁跟谁说了什么？
租一套房，一来一回
示例里的数字仅作演示。描述你自己的情况，Agent 就会画出你的那一张。
03图表类型
十个问题，
十种图。
问你真正想问的问题。Archify 会选出能回答它的那种图——不管是一套软件系统、一个数据库、一个代码仓库、一次事故，还是你自己生活里的事。
支持十类图：架构图、工作流、时序图、数据流、生命周期、实体关系图、类图、树图、时间线和瀑布图。下方配方是精选入门示例。
-
一件事由哪些部分组成、彼此怎么连接——家里的账户和银行卡、团队分工，或者云上系统的服务、数据库与安全边界。
- 家庭账户
- 团队分工
- 微服务拓扑
- 云与安全边界
-
跨人、跨阶段的步骤——办签证、排年假、新人入职、审批链，或者 CI/CD 流水线，逐泳道铺开。
-
按顺序的一来一回——通过中介租房、报销往返，或者带返回值的 API 调用链。
-
东西从哪来、最后落到哪——工资流向账单和储蓄、文件流转审阅，或者数据穿过管道。
-
有哪些状态、怎么在状态之间变化——求职申请、一笔订单、护照换发或一次部署，含等待、重试和结局。
-
每张表的完整字段、主键、外键和唯一键，每条关系两端都标出鸦爪基数。
-
类和接口及其成员——继承、实现、组合和依赖，各用各的标准画法。
-
一个根和它的分支——代码仓库的模块、产品平台、团队，或者分类体系，逐层展开。
-
事件落在真实的时间轴上——一次事故、发版历史、一个项目——自动处理时区，长时间的空档会断开压缩。
-
嵌套的耗时段放在同一个时钟上——一次请求、一次构建、一次 Agent 运行——最慢的一步和并行的部分一眼可见。
04交付前校验
交到你手里之前，
已经检查过了。
完成流程先校验并交付，再检查已交付的文件。图表还会执行浏览器检查，一页式解答按需开启。交付后的检查失败会报告，但不会回滚已交付文件。
- 01PASS
validate内容说的就是它的意思先查结构、ID 和引用，再查布局本身：连线交叉、标签避让、走线通道和图例空间。图表数据留空会报错，不会画成零。
- 02PASS
deliver不会留下半成品先在目标旁边的暂存副本里渲染，交付检查通过后再原子替换。渲染失败不会覆盖已有文件。
- 03PASS
check交付的就是检查过的那个文件把交付出来的 HTML 读回来再查一遍，回执里记下源文件和这个文件本身的哈希。
- 04PASS
browser-check真浏览器里读得清执行时，Chrome 会在几种桌面尺寸下检查溢出、文字可读性和控件。一页式解答的浏览器检查需要按需开启。
archify finalize sequence cache-miss.json cache-miss.html --browser-check
finalize pass: cache-miss.html
gates validate:pass deliver:pass check:pass browser-check:pass
receipt cache-miss.finalize.json
回执摘录
check9/9single_svgfinite_svgorthogonal_arrowslabel_route_clearancerelationship_crossingsrelationship_corridorscontainer_border_runsroute_rhythmlegend_clearance
browser1440×9001600×10001920×10802048×1320最小节点文字 7 px · 要求 6 px
sha256
252f687dbe79fbf9…05输出
一个文件，
全部都在里面。
双主题输出
每张图都内置协调的深色与浅色变量集：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 始终保留完整作者路径，可逐站检查，也可沿每条精确入向关系播放一次由读者控制的有限旅程。
检查 · 播放 · 暂停来源固定到提交
图里的节点和页面里的结论都能指向出处。仓库链接固定到 GitHub 或 GitLab 上的完整提交，一页式解答还会在来源卡片里直接引用代码。
GITHUB · GITLAB · 固定提交只追问一个面板
对任一面板或选中的一段话追问，复制一条带面板编号的消息。Agent 只改这个面板，页面其余部分保持不动。
追问 · 复制 · 局部修改默认带动效
每种图都有和它读法相配的动效，默认开启。读者可以切到静止；动效不会改变布局，也不影响导出的图形。
界面说你的语言
交互界面内置 English、简体中文、繁體中文、Español 和 한국어。其他语言可以用 meta.translations 作为数据提供。
看清改了什么
archify compare 把架构的前后两版画成一张差异图——新增、删除和改道的关系一目了然，并附机器可读的回执。
06设计系统
每种颜色，
都有含义。
七种节点颜色，深浅主题下保持一致。图例可以按你的故事改名——「后端」可以叫「假期」，「安全」可以叫「规则」。
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外部系统用户、第三方、通用外部
07快速开始
三步上手，
一条命令。
同一份经过检查的 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 月底过期的调休。
› 用 Archify 一页回答：接口 P99 从 80 ms 涨到 600 ms，平均值几乎没变，为什么？
-
1
一条命令安装
运行对应 Agent 的命令，或打开可切换 Agent 的快速开始页获取项目级安装命令。
-
2
描述，或者直接问
描述步骤、角色、组成或状态，或者直接问你的问题；也可以先让 agent 读一下代码仓库。
-
3
得到一张图或一页答案
想探索就要一张图，想要结论和理由就要一页式解答。两种都是单个 HTML 文件，任意浏览器打开，并可继续在对话中迭代。
每个成品都内置
图表指南?
切换主题T
查找节点 / 路径端点/
探查、检查并播放路径R
语义雷达M
对比语义类型L
演示舞台F
打开导出菜单E
聚焦节点Enter
阅读层级 / 复位+ − 0
菜单导航↑ ↓
关闭菜单Esc
产品事实
能检查、能保留的图和答案。
这里的 Archify 指 archify.si 上的开源画图技能，项目源码位于 tt-a1i/archify 仓库。
一页式解答是什么？
一页先给结论和理由，再按问题分成几个面板，用文字、表格、步骤、图表、代码和经过校验的图讲清楚。结论标注编号来源，仓库代码从固定的提交读取，图表数据留空会报错而不是画成零。读者可以在四种样式间切换、导出长图或 PDF，也可以只追问其中一个面板。
可以提供哪些输入？
可以从自然语言描述、计划、已有 Mermaid 文本或代码库证据开始，代码库并非必需。Agent 理解输入后，为图表创建类型化 JSON，为一页式解答编写 Markdown 草稿；Archify 不承诺自动解析全部 Mermaid 语法。缺失的事实应标明或进一步确认。
哪些 Agent 可以使用？
安装示例覆盖 Claude Code、Codex、Cursor、OpenCode 和 GitHub Copilot，它们使用同一份 Archify Skill。Agent 的文件权限、本地 Node.js 运行时，以及所选导出功能需要的工具，由你的使用环境提供。
会得到什么？有哪些边界？
主要交付物是独立 HTML 文件及其源稿：图表使用类型化 JSON，一页式解答使用 Markdown 草稿。在浏览器里可以浏览和导出，具体交互取决于成品类型。校验检查编写出的成品，不证明每项内容的真实性或系统的实际运行行为。Archify 不用于生成照片或插画，不提供托管协作服务，也不是通用的所见即所得编辑器。
导出格式包含 PNG、JPEG、WebP、SVG 和 WebM。具体可用性取决于格式、浏览器或本地工具；选择交付格式前，可先打开成品检查导出菜单。
默认安装命令使用稳定版 main 源码。开发版示例反映各自的构建，可能包含尚未稳定发布的功能。
问一次，
分享这个答案。
一条命令为你的 Agent 安装经过检查的技能——下一张图、下一页答案，只差一句对话。
用 Archify 一页回答：P99 暴涨、平均值几乎没变，为什么？