KechuAI

Archify：用自然语言让 AI Agent 生成可交互架构图

架构图
AI Agent
文档
可视化
设计工具
2026/9/28
·

阅读时间: 大约 9 分钟

Archify：用自然语言让 AI Agent 生成可交互架构图

Archify 生成的 AWS 架构图：CloudFront、负载均衡、API Server、Redis、PostgreSQL、SQS、Worker 与 Auth Provider 之间的连接（官方示例）

画架构图这件事长期分裂成两拨人：工程师脑子里有拓扑，但画图要拖方框、连箭头、对齐排版，费时且容易过时；文档工具能出图，却要手动维护。Archify 走的是另一条路——它不是一个独立画图软件，而是一个装在编码助手里的 Agent Skill：你在对话里用大白话描述系统，它生成一个精致、可交互、可在浏览器里打开的 HTML 架构图，然后你还能在聊天里继续改。本文基于其官方站点做一次拆解。

一、出发点：架构图不该是”一次性产物”

传统架构图的宿命是：画完即过时。代码迭代了，图还停留在三个月前；要维护就得专人在 Figma/draw.io 里手动同步。Archify 的判断是：既然现在有了能读代码、能理解上下文的 AI Agent，架构图就应该变成”按需生成、随聊随改”的产物——你描述一次系统，它产出一张图；描述变了，图跟着改。

它的 slogan 是”From plain English to architecture you can trust”（从大白话到你可信任的架构）。这里的”trust”对应它强调的三点：生成、检查、可交互（Generated, checked, interactive）。

二、它产出什么

Archify 生成的不是一张静态 PNG，而是一个自包含的 HTML 文件，可在任意浏览器打开，并带有：

  • 渐进式细节：MAP → READ → FULL 三层粒度，先看全貌地图，再展开局部阅读；
  • 语义相机：聚焦到某个组件或某条路径时，视图会平滑移动；
  • 路径故事（path-aware stories）：沿着一条请求路径逐步高亮节点和边；
  • 动效：节点出现、连线绘制有过渡；
  • 超清晰导出：内置导出能力，官方称支持 4 倍原生缩放。

从官方示例看，生成图带有图例（Legend），按类型给节点配色：Backend、Database、Cloud、Security、Message bus、External 各有标识色；边上标注协议与端口（如 HTTPS :443、SQL :5432、read-through、enqueue），还会用虚线框标出安全组/区域边界（如 AWS Region: us-west-2、sg-api）。

三、五种图型

官方列出 5 种图型，描述需求后由 Agent 选择合适的视觉语言：

图型用途典型内容
Architecture系统组件拓扑云资源、微服务、安全组、网络布局、数据库/缓存连接
Workflow泳道流程审批门、异步分支、观测路径，按泳道组织
Sequence时序/请求链API 调用链、缓存回源、鉴权、异步追踪
Data Flow数据流数据如何在系统间流转
State Machine状态机/生命周期节点状态迁移

Archify 生成的 Agent 工作流泳道图：User Interface、Agent Runtime、Policy Boundary、Tool Execution、Observability 分层（官方示例）

配套还有 4 种视觉预设、2 套协调主题，以及官方强调的 0 依赖——产出物不挂外部运行时。

四、怎么用：它是一个 Skill，不是一个网站

Archify 的分发方式很关键：它不是一个打开就能用的网页应用，而是通过 skills 这个包管理器装进你的编码 Agent。官方给出的命令：

# 全局安装（以 Cursor 为例）
npx -y skills add tt-a1i/archify --skill archify --agent cursor --global --copy --yes

# 或临时用 Codex 跑一次，不做永久安装
npx skills use tt-a1i/archify@archify --agent codex

一条命令即可为 Cursor、Claude Code、Codex、OpenCode 装上这个 Skill。之后你只需要”描述系统”——既可以口述组件和连接，也可以让 Agent 先分析当前代码仓库再画图；然后告诉 Agent “用 Archify 画出来”，它就生成自包含 HTML。

这意味着 Archify 的实际”智能”部分并不在它自己服务器上，而在于你已有的编码 Agent——Archify 提供的是一套图型规范、视觉模板和生成约定，让 Agent 输出的 HTML 结构统一、可交互。它的版本号标注为 v2.17.0-dev.1，托管在 GitHub（tt-a1i/archify）。

五、客观分析：优势与边界

优势：

  1. 对话式迭代：改图不再是拖方框，而是”把 Worker 挪到另一个子网”这种自然语言指令；
  2. 产出可交互、可分享：单个 HTML 文件，发出去别人就能在浏览器里缩放、点路径、导出，不必装 draw.io；
  3. 图型覆盖全：架构、工作流、时序、数据流、状态机五种，够覆盖大多数技术文档场景；
  4. 0 依赖、自包含：产出物不绑 CDN，可离线打开，适合放进仓库或文档站。

边界与存疑：

  1. 强依赖底层 Agent：出图质量直接取决于你用的 Cursor/Claude/Codex 模型，Archify 本身不做”画图引擎”，换个模型可能就是另一种水准；
  2. 早期 dev 版本：v2.17.0-dev.1 意味着模板和输出仍在快速变动，破坏性更新概率不低；
  3. 准确性靠”被检查”而非自动验证：官方强调 checked，但图里的组件、端口、连接是否与真实代码一致，仍需人眼核对，尤其在让 Agent “先分析仓库”时；
  4. 复杂拓扑的排版：官方示例都很整洁，真实系统几十个服务的大图是否仍清晰、自动布局是否会乱，需要自己验证；
  5. 不是矢量图源文件：产出是 HTML，若团队还需要 draw.io/Figma 可编辑源，仍需二次转换。

六、谁该关注

  • 经常要画架构图、但又不想维护 draw.io 源文件的后端/架构师；
  • 已经在用 Cursor/Claude Code/Codex 写代码，希望”聊到哪图到哪”的工程师；
  • 要写技术方案、README、评审材料，需要一张能发出去的可交互拓扑图的人。

如果你的团队要求架构图必须是可手动精修的矢量图源（如用于出版或品牌物料），Archify 更适合做”第一版草稿和可交互说明”，而非最终印刷稿；但在”快速对齐系统认知、随代码一起演进”这个场景上，它代表了 AI 时代文档图的新范式。

参考来源