Archify：让 AI 生成可验证的架构图、工作流、序列图

Fen9Pi2026/8/26大约 9 分钟

前言：AI 生成架构图的新范式

2026-08-26 09:50 GMT+8

用 AI 生成架构图并不新鲜，但问题来了：

生成的图表无法验证正确性
布局混乱，难以理解
无法追踪源码证据
导出格式有限
无法对比架构变更

今天介绍 Archify——一个 Agent Skill，让 AI 生成美观、可验证的架构图、工作流、序列图、数据流图、生命周期图。

一句话说清楚：

给出系统描述或代码仓库，AI 自动生成交互式、可分享的技术地图——五种图表类型、四种预设、深浅主题、内置品牌标识、有限动画、源码追溯

一、项目概览

Archify 是一个 Agent Skill，用于生成美观、可验证的架构图、工作流、序列图、数据流图、生命周期图。

一句话说清楚：

在聊天中直接将代码库或系统描述转换为精美的交互式系统地图——支持五种图表类型、四种预设、深浅主题、内置品牌标识、有限动画、源码追溯

项目地址：https://github.com/tt-a1i/archify 项目主页：https://tt-a1i.github.io/archify/ 场景指南：https://tt-a1i.github.io/archify/guide.html Proof Lab：https://tt-a1i.github.io/archify/gallery.html 开源协议：MIT 当前版本：v2.15.0

核心特性：

✅ 五种图表类型（Architecture、Workflow、Sequence、Data Flow、Lifecycle）
✅ 四种预设（Signal Flow、Blueprint、Classic 等）
✅ 深色/浅色主题
✅ 内置品牌标识
✅ 有限动画
✅ 架构变更审查（Before / Delta / After）
✅ 验证交互（搜索节点、打开源码、追踪上下游）
✅ 自包含 HTML（PNG、SVG、WebM、1200×630 分享卡片）

支持的 Agent：

Raven
Cursor
Claude Code
Codex CLI
OpenCode

二、五种图表类型

图表类型概览

流程图1

1. Architecture（架构图）

最佳用于：

组件、服务、存储、边界

Prompt 示例：

Scope, core components, primary path

特点：

展示核心组件
主要路径
外部依赖
信任边界

示例场景：

系统架构设计
微服务架构
前后端分离架构

2. Workflow（工作流）

最佳用于：

CI/CD、审批、工具调用、运维手册

Prompt 示例：

Participants, order, branches, exceptions

特点：

明确参与者
执行顺序
分支流程
异常处理

示例场景：

CI/CD 流程
审批流程
工具调用链

3. Sequence（序列图）

最佳用于：

API 调用、缓存回退、认证、异步追踪

Prompt 示例：

Callers, callees, returns, timing

特点：

调用者
被调用者
返回值
时序关系

示例场景：

API 调用链
缓存回退流程
认证流程
异步追踪

4. Data Flow（数据流图）

最佳用于：

管道、血缘、PII、消费者

Prompt 示例：

Sources, transforms, stores, boundaries

特点：

数据源
转换过程
存储位置
边界界定

示例场景：

数据管道
数据血缘
PII 处理
消费者分析

5. Lifecycle（生命周期图）

最佳用于：

状态、重试、等待、终端结果

Prompt 示例：

States, events, retry and cancellation paths

特点：

状态转换
事件触发
重试路径
取消路径

示例场景：

订单生命周期
任务生命周期
状态机

三、核心工作流程

完整工作流程

流程图2

安装流程

流程图3

四、核心特性

特性 1：布局判断而非通用自动布局

问题：

通用自动布局布局混乱
箭头堆积在同一个中点

解决方案：

Agent 选择层级、间距、路由和强调
共享的自动端点确定性地传播
不会将箭头堆积在一个中点上

特性 2：类型化 JSON IR

每个渲染器支持的模式都有：

Schema（模式）
可重现的源码

价值：

可验证
可重现
可追溯

特性 3：原子验证

交付前进行原子验证：

Schema 检查
Layout 检查
HTML/SVG 检查
Route 检查
Label-to-route 清除检查

所有检查必须通过，展示工件才会替换最后一个已知良好输出。

特性 4：失败修复回执

失败时提供：

稳定的规则代码
确切的主题
测量的证据
仅支持修复控件

而不是：

Node 堆栈
非结构化重试猜测

特性 5：最后的实时预览

可选的桌面循环：

监视一个 JSON 文件
仅在最新候选者通过每个门后刷新
当保存不完整或无效时，保持上一个已验证的图表可见

特性 6：真实交互

所有交互都重用已创作的节点和关系：

Focus（焦点）
Upstream/Downstream Reach（上下游可达性）
Exact Routes（精确路由）
Role Comparison（角色比较）
Stories（故事）

而不是：

发明拓扑
声称运行时影响

特性 7：源码证据

仅在请求时提供：

Evidence-backed Architecture 节点标记自己 SRC n
打开 Git 验证的文件和行范围
固定到一个公共提交

普通工件保持无源。

特性 8：便携式默认

结果是一个 HTML 文件：

导出保持完整图表
免费临时查看器状态

五、架构变更审查

Before / Delta / After 对比

流程图4

命令行对比

node archify/bin/archify.mjs compare architecture base.json head.json architecture-delta.html --json

审查价值

精确对比：

新增（Added）
删除（Removed）
修改（Changed）
移动（Moved）
重新路由（Rerouted）

机器回执：

验证通过
仅查看，无影响
无风险

六、验证交互

交互类型

流程图5

交互价值

所有交互都重用已创作的节点和关系：

不会发明拓扑
不会声称运行时影响
真实、可验证

七、导出格式

导出选项

流程图6

导出格式

静态格式：

PNG：快速分享
SVG：可缩放矢量

动态格式：

WebM：有限动画

分享卡片：

1200×630 PNG：社交媒体、README、Release

路由分享卡片

追踪路由后：

Export → Route Share Card
下载创作的路径为 1200×630 PNG
保留完整图表作为上下文

可达性分享卡片

追踪创作的 Upstream 或 Downstream 可达性后：

Export → Reach Share Card
捕获精确的阅读
不声称运行时影响

八、快速开始

步骤 1：安装

npx skills add tt-a1i/archify -g

对于明确的、非交互式 Cursor 安装：

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

尝试而不安装：

npx skills use tt-a1i/archify@archify --agent codex

DSH 社区选择：

dsh plugin --profile web add @tt-a1i/archify-dsh@0.1.0

步骤 2：请求一个有界视图

高层运行时架构图：

Analyze this repository, then use archify to create a high-level runtime architecture diagram.
Show 8–12 core components, one primary path, external dependencies, and trust boundaries.
Put supporting detail in cards instead of adding more edges.

聚焦流程：

Use archify to draw this login flow: Browser -> Web App -> API -> JWT validation ->
Redis session lookup -> PostgreSQL fallback. Keep the cache-miss path secondary.

步骤 3：在聊天中细化

继续聚焦请求：

add Redis
move auth to the left
highlight the rollback path

Archify 保持类型化源码可用于针对性迭代。

九、实际应用场景

场景 1：代码仓库架构分析

需求：分析代码仓库的运行时架构

使用 Archify：

给出代码仓库
AI 分析代码
生成架构图
追踪源码证据
验证交互

价值：

快速理解代码仓库
可验证的架构图
源码追溯

场景 2：系统设计文档

需求：为系统设计生成可视化文档

使用 Archify：

描述系统
选择图表类型
生成图表
导出分享

价值：

快速生成文档
多种图表类型
易于分享

场景 3：架构变更审查

需求：审查架构变更

使用 Archify：

生成 Before 快照
生成 After 快照
对比 Delta
验证变更
Review 模式

价值：

精确对比
机器回执
无风险审查

场景 4：工作流可视化

需求：可视化 CI/CD 流程

使用 Archify：

描述工作流
生成 Workflow 图
明确参与者
展示分支和异常

价值：

清晰的流程
易于理解
易于分享

十、核心价值

1. 美观

五种图表类型、四种预设、深浅主题：

Signal Flow
Blueprint
Classic
有限动画

2. 可验证

类型化 JSON IR、原子验证：

Schema 检查
Layout 检查
HTML/SVG 检查
Route 检查
Label-to-route 检查

3. 交互式

搜索节点、打开源码、追踪上下游：

Focus
Upstream/Downstream Reach
Exact Routes
Role Comparison
Stories

4. 源码追溯

Evidence-backed Architecture：

Git 验证的文件
行范围
固定到一个公共提交

5. 便携式

自包含 HTML：

PNG
SVG
WebM
1200×630 分享卡片

十一、总结

核心问题

AI 生成架构图的痛点：

生成的图表无法验证正确性
布局混乱，难以理解
无法追踪源码证据
导出格式有限
无法对比架构变更

Archify 的解决方案

1. 五种图表类型

Architecture（架构图）
Workflow（工作流）
Sequence（序列图）
Data Flow（数据流图）
Lifecycle（生命周期图）

2. 布局判断而非通用自动布局

Agent 选择层级、间距、路由和强调
共享的自动端点确定性地传播

3. 类型化 JSON IR

Schema
可重现的源码

4. 原子验证

Schema、Layout、HTML/SVG、Route、Label-to-route 检查
所有检查必须通过

5. 失败修复回执

稳定的规则代码
确切的主题
测量的证据

6. 真实交互

所有交互都重用已创作的节点和关系
不会发明拓扑或声称运行时影响

7. 源码证据

仅在请求时提供
Git 验证的文件和行范围

8. 便携式默认

一个 HTML 文件
PNG、SVG、WebM、1200×630 分享卡片

为什么选择 Archify？

1. 美观

五种图表类型、四种预设、深浅主题
有限动画

2. 可验证

类型化 JSON IR
原子验证

3. 交互式

搜索节点、打开源码、追踪上下游

4. 源码追溯

Git 验证的文件
行范围

5. 便携式

自包含 HTML
多种导出格式

记住

Archify 不是通用绘图编辑器或 Mermaid 主题。
它将技术意图转化为交流资产。
在聊天中直接将代码库或系统描述转换为精美的交互式系统地图。

附：资源链接

项目资源：

GitHub：https://github.com/tt-a1i/archify
项目主页：https://tt-a1i.github.io/archify/
场景指南：https://tt-a1i.github.io/archify/guide.html
Proof Lab：https://tt-a1i.github.io/archify/gallery.html
License：MIT

快速开始：

# 安装
npx skills add tt-a1i/archify -g

# 使用
Analyze this repository, then use archify to create a high-level runtime architecture diagram.

# 细化
add Redis
move auth to the left
highlight the rollback path

支持的 Agent：

Raven
Cursor
Claude Code
Codex CLI
OpenCode