画图这种事，甩给 Agent 就行
做项目、写博客，永远绕不开一件事：画图。架构图、流程图、时序图、数据流图——以前要么手搓 SVG，要么打开 ProcessOn / draw.io 拖半天，画完还得跟代码对不上。
现在有个更省事的玩法：直接跟 Agent 说人话，让它在对话里把图生成出来。这就是本文主角 Archify——一个开源的 Agent 技能（MIT 协议，GitHub 上 2.1 万 star），专门干这事：Agent 产出带类型的 JSON 规格，Archify 把它确定性编译成一份自包含、可交互、可导出的 HTML 图。
它会画哪几种图
五种图型，覆盖日常 90% 的需求：
| 图型 | 干活的场景 |
|---|---|
architecture | 组件、服务、云上边界、基础设施拓扑 |
workflow | 业务流程、审批、CI/CD、工单流转 |
sequence | API 调用链、请求生命周期、异步追踪 |
dataflow | 数据管道、ETL/ELT、血缘、治理 |
lifecycle | 状态机、重试、等待与终态 |
装它只需要一行
它是个 Agent Skill，装进 Cursor、Claude Code、Codex CLI、OpenCode、Raven 都行，一条命令：
npx skills add tt-a1i/archify -g装完跟 Agent 说一句「用 archify 梳理这个仓库的运行时架构」就开始干活了。
背后其实只有三步
听着玄乎，机制很朴素：①说需求 → ②Agent 写图 JSON → ③校验并渲染。渲染是个 Node 引擎，对同一份 JSON 永远输出同一张图（确定性编译，不会每次长不一样）：
# 校验（showcase 是最高标准：9 项检查，0 错误 0 警告才算过）
node bin/archify.mjs validate workflow figure.json --quality showcase --json
# 交付（输出独立 HTML，可导出 PNG / SVG / WebM / 分享卡）
node bin/archify.mjs deliver workflow figure.json out.html --quality showcase --json真图演示：这篇文章怎么诞生的
口说无凭，下面这张图就是用 Archify 现场画出来的——内容是「你一篇文章从一句话需求到上线的完整流水线」，从 JSON 编写到 showcase 校验通过再到渲染交付，全程走的就是它自己的流程：
这张图有 6 个节点、4 条泳道、3 张要点卡，布局上确实折腾了一小会——Archify 的校验器是个处女座：节点间距差 2px 会报警，桌面视口下字体投影小于 6px 直接不交付，连要点卡颜色都只认 7 种预设值。改到第 6 版终于 9 项检查全绿。这个「不通过就不交付」的脾气，恰恰是它最值钱的地方：图不会悄悄画错。
除了画图，它还能干这些
- 评审架构变更：把两份校验过的快照对比成 Before / Delta / After，精确列出新增、删除、语义变化、移动和重路由。
- 不乱编拓扑：可以按需打开版本校验过的源码，看节点和真实代码的对应关系。
- 深色主题 + 动效：演示汇报时开 trace 动画，气场直接拉满。
- 导出全家桶：PNG、SVG、WebM、1200×630 分享卡片，配文章、配文档都行。
- Mermaid 也能接：把现成的 flowchart / sequenceDiagram 贴给它换肤重排。
值不值得用
如果你跟我一样，是让 AI 帮写代码、帮排版、帮画图的「验收派」——值得。Archify 把「画图」从手动活变成了对话活，而且因为图是确定性生成的、还要过校验，拿来写技术文档、做架构评审，比随手甩一张「AI 生成示意图」靠谱得多。唯一要记住的是：图是 JSON 驱动的，想微调就改 JSON 而不是改像素。
仓库：github.com/tt-a1i/archify · 在线演示：tt-a1i.github.io/archify
