告别 draw.io 和 Mermaid！这个 GitHub 爆火的 AI Skill，让架构图真正实现“一句话生成”

大家好，我是锋哥。

写技术文档的时候，最耗时间的往往不是写字，而是画图。框要对齐，箭头要绕开，颜色要统一，改一个节点还得把半张图重排一遍。draw.io 精细，但手慢；Mermaid 方便，但一复杂就挤成一团。
最近 GitHub 上有个项目把这件事换了一种做法：你不用打开画板，也不用先写一堆 DSL，只要跟 AI 说一句“帮我画一下”，就能拿到一张能打开、能演示、能导出的架构图。它叫 Archify，目前已经超过 4.8 万 Star。
今天锋哥来好好聊聊 Archify 这个开源项目。

画图这件事，到底卡在哪

大多数人画架构图，其实卡在三件事上。

第一，工具和表达是分开的。脑子里已经有 Browser → API → Redis → PostgreSQL，手还得一个框一个框地拖。第二，改一次就崩一次。评审会上加个鉴权服务，整张图的对齐、走线、图例都得重来。第三，图很难“讲清楚”。静态 PNG 丢进文档里，别人看不出主路径，也点不开某个节点背后的关系。

所以才会有人一边用 draw.io 抠像素，一边用 Mermaid 赶进度，最后两头都不痛快。

Archify 是什么

一句话概括：Archify 是一个给 AI 编程助手用的 Agent Skill。你在 Cursor、Claude Code、Codex CLI 或 OpenCode 里描述系统，或者让它先读仓库，它会生成一份带类型的 JSON，再编译成一张可交互的 HTML 架构图。

它不是在线画板，也不是 Mermaid 换了套皮肤。官方自己说得很干脆：它把技术意图，变成一份能拿去沟通的成品。

目前支持五种图：

Architecture：组件、服务、存储、边界
Workflow：CI/CD、审批、工具调用、Runbook
Sequence：接口调用、缓存回源、鉴权、异步链路
Data Flow：管道、血缘、PII、下游消费
Lifecycle：状态、重试、等待、终态

深色、浅色各有一套完整主题，切一下就能换：

深色主题	浅色主题

导出也不含糊。打开后按 E，可以把图复制成 PNG，或者下载 SVG、WebM，以及 1200×630 的分享卡片。一张 HTML 就能打开，不依赖服务器。

它和 draw.io、Mermaid 差在哪

我自己的体感是这样的：

draw.io 适合最终要“抠到像素级”的场合。控制力最强，代价是时间。你改的是图形，不是系统。

Mermaid 适合写在 Markdown 里快速交差。语法熟了很快，但节点一多，布局就由渲染器说了算，箭头叠在一起是常态。

Archify 走的是第三条路：你负责说清楚系统，Agent 负责写成结构化 JSON，渲染器再按规则把图画出来。中间有校验，不合格不会直接把一张半成品塞给你。

	draw.io	Mermaid	Archify
怎么画	鼠标拖拽	手写 DSL	一句话 / 读仓库
改图成本	高	中	低，继续对话即可
输出形态	图片 / 源文件	静态图	可交互 HTML + 多种导出
适不适合演示	一般	一般	自带路径追踪、主题、演示模式

还有一点很重要：它会尽量待在“你写过的结构”里。搜索节点、追上游下游、对比角色、播放引导故事，都是在已有节点和关系上做，而不是 AI 现场编一条不存在的连线。

三步上手：一句话就能出图

安装很短，一条命令就行：

npx skills add tt-a1i/archify -g

如果你用的是 Cursor，想一次装到位，可以用更明确的写法：

npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

装好之后，不必先准备仓库。在对话里直接说：

Use Archify to draw: Browser -> API -> Redis cache -> PostgreSQL fallback.

想让图画得更像真实系统，也可以先让它读代码：

分析这个仓库，然后用 Archify 画一张高层次的运行时架构图。
只保留 8 到 12 个核心组件，标出主路径、外部依赖和信任边界。
细节写进卡片里，不要为了好看再加一堆线。

后面继续改也还是说话就行：加上 Redis、把鉴权挪到左边、高亮回滚路径。你不用回头去改坐标。

五种图，各管各的事

很多人第一反应是“不就是架构图吗”。其实 Archify 把常见技术沟通拆成了五种镜头，提示词里带上对应信息，出图会准很多。

拿官网示例来说，Workflow 适合把快乐路径摊在泳道里：

Sequence 则适合讲清一次请求里，谁在什么时候调用了谁：

不确定该用哪种时，可以先问内置向导：

node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"node archify/bin/archify.mjs guide "Map Kafka topics, consumer groups, replay, and DLQ" --json

它是怎么工作的

表面上是“一句话出图”，底下其实分了几层，所以它才敢说图是可校验的。

Agent 不会直接“画一张图”。它先写出一份中间表示，例如下面这段精简后的架构描述：

{  "schema_version": 1,  "diagram_type": "architecture",  "meta": {    "title": "Sample Web App",    "quality_profile": "showcase"  },  "components": [    { "id": "users", "type": "external", "label": "Users", "sublabel": "Browser / Mobile" },    { "id": "api", "type": "backend", "label": "API Server", "sublabel": "FastAPI :8000" },    { "id": "cache", "type"


    
: "database", "label": "Redis", "sublabel": "cache :6379" },    { "id": "db", "type": "database", "label": "PostgreSQL", "sublabel": "primary :5432" }  ],  "connections": [    { "id": "users-to-api", "from": "users", "to": "api", "label": "HTTPS" },    { "id": "api-to-cache", "from": "api", "to": "cache", "label": "read-through" },    { "id": "api-to-db", "from": "api", "to": "db", "label": "SQL" }  ]}

然后用 CLI 校验、交付：

cd archifynode bin/archify.mjs doctornode bin/archify.mjs validate architecture examples/web-app.architecture.json --quality showcase --jsonnode bin/archify.mjs deliver architecture examples/web-app.architecture.json web-app.html --quality showcase --open --json

validate 过不了，它会给出规则编号和可修复项，而不是甩一段 Node 堆栈让你猜。deliver 则是最后一步：只有全部检查通过，才会原子替换目标 HTML。做设计评审或 PR 对比时，还可以把两份快照做成 Before / Delta / After。

这也是我觉得它比“让大模型直接画 SVG”更踏实的地方。模型负责理解系统，渲染器负责把结构画对。