一句话描述你的系统，Claude 帮你画出完整的架构图、时序图、数据流图。 不用 draw.io 拖拽，不用跟 Mermaid DSL 较劲，连 Figma 都不用开。

---

Archify 项目预览

---

你有没有遇到过这种困境

需求评审结束，你脑子里已经有了清晰的系统结构，打开 draw.io，然后……开始拖方块，拉箭头，对齐，改颜色，半小时过去了，图还没画完。

或者你选择了 Mermaid，写了 20 行 DSL，渲染出来的图不是你想要的样子，改了 10 次，最后放弃。

这是大多数开发者画架构图的日常。花在图本身上的时间，远比花在思考上的时间多。

最近我发现了一个叫 Archify 的开源项目，直接解决了这个问题。

---

Archify 是什么

Archify 是一个 AI Agent Skill 插件，支持 Claude Code、Codex CLI 和 opencode。

它的核心逻辑很简单：你用自然语言描述系统，AI 给你生成一张做工精细的技术图——输出是一个完全自包含的 HTML 文件，在浏览器里打开就能切主题、复制截图、导出多种格式，零依赖，发一个文件就能分享。

安装只需要一行命令：

npx skills add tt-a1i/archify -g

然后告诉 Claude：

Use archify to map this repository's runtime architecture.

图就出来了。

---

实际效果长什么样

同一张图，深色/浅色主题一键切换：

深色主题	浅色主题

导出菜单——Copy PNG 直接进剪贴板，下载支持 PNG / JPEG / WebP / SVG，全部原生 4× 分辨率，不是拉伸放大：

导出菜单

图片粘进 Slack、Notion、GitHub issue，没有任何糊感。

---

五种图表类型，覆盖日常 90% 的场景

Archify 不只是架构图工具，v2.10 已经支持五种图表类型：

1. Architecture（系统架构图）

最常用的场景——描述系统组件、云资源、数据库、服务边界、安全分组。

用 archify 画架构图：
React 前端 → Node.js API → PostgreSQL 主库 + Redis 缓存，
部署在 AWS，CloudFront 前置，Cognito 做鉴权。

2. Workflow（工作流图）

适合画 CI/CD 流程、审批链、Agent 工具调用流程、故障响应 runbook。

工作流示例

3. Sequence（时序图）

描述服务间的调用链、缓存命中/回源逻辑、鉴权检查顺序。

时序图示例

4. Data Flow（数据流图）

用来画数据管道、ETL/ELT 流程、PII 数据隔离边界、数仓同步路径。

数据流示例

5. Lifecycle（生命周期图）

状态机、任务生命周期、部署流程、Agent Run 状态转移，等待态/重试/取消都能表达清楚。

生命周期示例

---

几个真正有用的设计细节

对话式迭代

画完图不满意？直接接着聊：

把 Redis 挪到左边
鉴权服务用玫红色高亮
把 Kafka 加进来，连接 Order Service 和 Notification Service

AI 理解你的意图，只改动需要改的部分，不会重绘整张图。

颜色有语义，不是随机配色

Archify 内置了一套颜色语义系统：

• 青色 = 前端 / 客户端

• 绿色 = 后端服务

• 紫色 = 数据库 / 存储 / AI 模型

• 琥珀色 = 云基础设施

• 玫瑰色 = 安全 / 鉴权

• 橙色 = 消息总线（Kafka、RabbitMQ）

• 灰蓝色 = 外部系统

你说 aws.lambda、postgres、redis、github-actions，Archify 自动映射到对应颜色，不需要手动指定。

SVG 导出自带双主题

导出的 SVG 文件内嵌了深色和浅色两套 CSS 变量，加上 @media (prefers-color-scheme) 规则。

把这个 SVG 丢进 GitHub README，读者开深色模式就显示深色，开浅色就显示浅色，用同一个文件。 不需要维护两张图，不需要 <picture> 标签包裹。

4× 原生分辨率导出，不是拉伸放大

很多工具的"高清导出"其实是把低分辨率图等比放大，结果还是糊的。

Archify 的做法不同：把 SVG 的 width/height 直接设为 4 × viewBox，让浏览器在目标分辨率下原生光栅化，再绘制到 canvas。没有插值，没有模糊，视网膜屏、演示幻灯、打印稿都清晰。

内置验证循环

生成图之后，Archify 会自动走一遍质量检查：

JSON Schema 校验 → 布局合理性检查 → HTML/SVG 产物审查 → 有问题就迭代

斜线箭头、越界节点、图例区域污染这类渲染 bug，在交付给你之前会被发现并修掉。

---

安装方式汇总

最快方式（推荐）：

npx skills add tt-a1i/archify -g

Claude Code 手动安装：

# 下载 archify.zip，然后：
unzip archify.zip -d ~/.claude/skills/

Claude.ai（网页版）：

1. 下载 archify.zip

2. 进 Settings → Capabilities → Skills

3. 点 + Add，上传 zip，开启即可

opencode / Codex CLI： 解压到对应的 skills/ 目录，路径略有差异，README 里有详细说明。

---

什么人最适合用这个工具

• 写技术文档的人：系统设计文档里需要配架构图，不想每次都手动画

• 做代码 review 的人：快速给改动画个调用链时序图，讨论更直观

• 做 AI/Agent 开发的人：画 Agent 工具调用流程、Multi-Agent 协作链路，Archify 对这类语义理解很好

• 写技术博客的人：一键生成配图，深浅色主题自适应，发 GitHub README 完美

---

一些真实使用 prompt

分析仓库架构：

分析这个代码仓库，然后用 archify 画出它的运行时架构图，
包括主要组件、外部依赖、信任边界。

画登录流程时序图：

用 archify 画时序图：
Browser → Web App → API → JWT 验证 → Redis session 查询 → Postgres 回退
清晰标出缓存命中和 cache-miss 两条路径。

CI/CD 工作流：

用 archify 画 CI/CD 流程：
pull request → 测试 → 审批 → 构建镜像 → staging 部署 → 
smoke test → 生产部署，失败时有回滚路径。

---

写在最后

Archify 现在是 v2.10，GitHub 已有 3.8K Star，MIT 协议，完全免费。项目在积极迭代，v3.0 计划引入 JSON IR 中间格式，实现 git diff 友好的局部编辑，主题切换不再需要整图重渲染。

如果你也被架构图画图这件事困扰过，值得花五分钟试一下。

GitHub 地址： https://github.com/tt-a1i/archify

觉得有用的话，给项目点个 Star ⭐——对作者来说是最直接的支持。

---

你平时用什么工具画架构图？有没有更顺手的方案？欢迎评论区聊聊。

谢谢你阅读我的文章~

我是顾北，我们下期再见！

 PS：本文部分内容由AI辅助创作