架构图也能"所见即所得"？Archify 让 AI 画出会动的、可验证的架构图 📐✨

当 AI 开始画架构图，问题来了

过去两年，我们习惯了让 AI 帮忙写代码、写测试、写注释。但每次让 AI 画架构图时，体验总是有点微妙：

  • 生成的是 Mermaid/PlantUML 源码，渲染出来却经常布局混乱、字体重叠；
  • 概念对了，但 没有分层、没有时序、没有数据流，只是一堆框和箭头；
  • 想导出成图片或嵌入文档，总得额外装一堆工具链；
  • 最关键的是——你没法验证这张图是不是和实际代码/系统一致。

直到我刷到今天 GitHub Trending 上的这个项目，才意识到：图表的"最后一公里"问题，终于有人认真解决了。

Archify 是什么？它不是又一个图表库

tt-a1i/archify 的定位是 Agent skill——专门给 AI Agent 使用的能力插件，而不是传统意义上的 npm 包或 CLI 工具。它的目标很明确：让 AI 生成漂亮的、可验证的架构图、工作流图、时序图、数据流图和生命周期图，并且输出为自包含的 HTML 文件，自带动效，还能轻松导出为高清图片。

一句话总结：AI 负责画，Archify 负责让画出来的图能看、能验、能交付。

核心体验：从"画个框"到"可交互的工程文档"

1. 自包含 HTML：一个文件走天下

Archify 的输出是一个单一的 HTML 文件，内联了所有样式和脚本。这意味着你可以直接把它发给同事、塞进邮件附件、或者放到静态服务器上，双击就能打开，无需任何依赖。


# 假设 Agent 调用了 archify skill
archify generate --type sequence --input api-flow.json --output api-flow.html

# 输出就是一个可直接打开的 HTML 文件
open api-flow.html

对于需要快速分享的团队场景来说，这比让同事装一个 Mermaid 插件或者 Graphviz 要友好得多。

2. 动效不是花架子，而是理解辅助

Archify 生成的图表支持元素动画——节点入场、连线绘制、数据流流动，都能以优雅的动效呈现。别小看这个功能，当你在评审会上展示一条复杂的消息链路时，"线条动起来"比静态箭头直观十倍。


{
  "diagram": "sequence",
  "animations": {
    "nodeEnter": "fade-in-up",
    "edgeDraw": "draw-line",
    "flowPulse": true
  }
}

3. 可验证性：让图表与代码对齐

这是 Archify 最独特的一点。普通图表工具只管"画得好看"，Archify 则强调验证能力。它支持将图表的节点/边映射到实际的代码实体或配置项，通过内置规则检查图结构是否与系统描述一致。


// 伪代码：Archify 的验证逻辑
const violations = validate({
  diagram: myDiagram,
  system: {
    services: ["auth", "api", "db"],
    calls: [["auth", "api"], ["api", "db"]]
  },
  rules: [
    rule("noUndefinedNode", (node) => system.services.includes(node.id)),
    rule("noMissingEdge", (edge) => system.calls.some(...))
  ]
});

这种"Diagram as Code"的校验思维，让架构图不再是墙上装饰品，而是可以纳入 CI/CD 的工程资产。

4. 清晰导出，告别截图模糊

Archify 内置了高质量的导出机制，可以直接把图表渲染为 PNG 或 SVG，分辨率根据 DPI 自适应。写文档、放 Slide、印海报，都不在话下。

技术亮点：为什么它比 Mermaid 更懂 Agent？

Mermaid 是文本到图表的鼻祖，但它的设计初衷是"给人手写使用"。而 Archify 是为 Agent 设计的结构化图表 DSL，它的 JSON 输入格式更严格、更语义化，天然适合 LLM 生成。


{
  "type": "workflow",
  "title": "用户注册流程",
  "nodes": [
    { "id": "start", "label": "收到请求", "kind": "start" },
    { "id": "validate", "label": "校验参数", "kind": "process" },
    { "id": "db", "label": "写入用户表", "kind": "database" },
    { "id": "end", "label": "返回成功", "kind": "end" }
  ],
  "edges": [
    { "from": "start", "to": "validate", "label": "触发" },
    { "from": "validate", "to": "db", "label": "SQL" },
    { "from": "db", "to": "end", "label": "完成" }
  ]
}

这种结构化设计有三大好处：

  • LLM 更容易遵循约束——不会生成语法错误的 Mermaid；
  • 方便做语义校验——可以检测孤立节点、循环依赖、缺失拐点；
  • 样式与内容分离——换主题、换布局，不需要改图的内容定义。

此外，Archify 对 时序图和数据流图有针对性的布局引擎。时序图中的生命线、激活条、消息箭头，数据流图中的分区、存储、传输线，都有专门的美学优化。这比通用图布局算法出来的结果高出一个档次。

实战体验：如何让 Agent 用 Archify 产出专业图表

我在本地跑了个小 demo，让 Claude 通过 Agent skill 调用 Archify 生成一个"订单状态机"图。整体流程如下：


# Agent 先描述需求
describe_architecture("订单状态流转：创建→待支付→已支付→已发货→已完成/已取消")

# Archify 生成 JSON 定义
archify generate --type state --output order-states.html

# 打开 HTML 查看效果
open order-states.html

说实话，第一次打开生成的 HTML 时我有点惊讶——页面加载很轻快，图表的配色、间距、箭头曲线都非常舒适，完全不像 AI 随手画出来的东西。状态节点之间的流转动画让"取消"和"超时"这类事件变得一目了然。

使用建议方面，我总结了几个要点：

  • 如果你在写技术方案，让 Archify 帮你生成系统架构图，然后导出 SVG 嵌入到你自己的文档里；
  • 如果你在做代码审查，可以让 Agent 根据代码依赖生成数据流图，快速定位循环依赖；
  • 如果你是 Agent 开发者，可以把 Archify 封装成你 Agent 的一个 tool，让 AI 在交付代码时顺便交付图表。

如何获得 Archify

Archify 是开源项目，直接在 GitHub 上搜索 archify 或者访问 https://github.com/tt-a1i/archify 即可。仓库里有完整的 Agent skill 安装文档和示例，目前支持主流的 Agent 框架，包括 Claude、LangChain 和自建 pipeline。

安装方式很简单，你可以把它作为一个普通工具来用，也可以直接让 Agent 加载 skill 定义：


# 克隆仓库
git clone https://github.com/tt-a1i/archify.git

# 按照 README 安装依赖
cd archify && npm install

# 全局可用
npm link

总结：适合谁用，为什么值得关注

Archify 并不是要取代你手画图的习惯，也不是又一次"AI 生成图片"的噱头。它瞄准的是一个很务实的痛点：AI 能画图了，但画出来的图不够专业、不可验证、不便于分享。Archify 用自包含 HTML + 动效 + 校验，把图表输出的质量拉到了工程级水准。

如果你是：

  • 经常撰写架构文档的工程师/架构师；
  • 在开发 AI Agent 的开发者；
  • 或者只是厌倦了"复制 Mermaid 代码然后去渲染器里看效果"的工作流；

那么 Archify 值得你花十分钟试一下。也许从今天开始，你的设计文档会自动动起来，你的架构图也能通过 CI 校验了。

好图表，不只是画得漂亮，更要说得出真相。Archify 正朝这个方向走。