Live Artifact

## 实测产物：MetaWeb 生态架构

这是用 archify 真实生成的一张交互架构图：9 个节点、双信任边界、3 张结论卡片、2 个引导视图。可以搜索节点、追踪上下游、播放引导故事、切换明暗主题、导出图片。

metaweb-ecosystem.html · 单文件自包含 · 708 KB · 由 archify 渲染
5
图型：架构/流程/时序/数据流/生命周期
4
导出：HTML/PNG/SVG/WebM + 1200×630 分享卡
9
交付前 artifact 检查项，全过才放行
0
API Key 需求，纯本地渲染
Capabilities

## 它到底能干什么

archify 不是通用绘图板，也不是 Mermaid 换皮：它把技术意图变成一张可沟通的图。以下能力全部实测可用。

### 五种图型

- Architecture：组件 / 服务 / 信任边界
- Workflow：CI/CD / 审批 / 工具调用
- Sequence：API 调用链 / 缓存回退 / 异步追踪
- Data Flow：管道 / 血缘 / 敏感数据边界
- Lifecycle：状态 / 重试 / 终止态

### 类型化 JSON IR

- 整张图就是一份带 schema 的 JSON，可复现、可 diff
- 交付前跑 `validate --quality showcase`
- 9 项检查：连线交叉 / 标签间距 / 边界贴合 / 正交箭头 / 桌面可读性…
- 失败给「修复收据」：具体 subject + supportedFixes

### 交互与导出

- 搜索 / 聚焦 / 上下游追踪 / 路径探测
- 引导故事（Guided Story）+ 演示模式
- 明暗双主题一键切换
- 单文件 HTML 自包含，可离线分享

Hands-on · 2026-08-27 亲测

## 组装这台 MetaApp 前，我实测的全过程

不是 README 复述。以下是本机真实跑过的每一步，含真实命令与真实输出。

00 · 获取

#### GitHub 直连超时，走镜像拉源码

仓库 16 MB，`gh-proxy` 镜像一次成功。零依赖 Node CLI，无需 `npm install`。

01 · 体检

#### doctor 全绿

`node bin/archify.mjs doctor`：Node v26.7.0 通过，5 个渲染器 + schema 校验器 + 预览/视觉检查运行时全部 [ok]。

02 · 写图

#### 不拖框框，写 JSON

按 SKILL.md 作者契约，用 MetaWeb 生态真实描述构造 typed JSON：9 个组件、2 个边界、9 条连线、3 张卡片、2 个引导视图。

03 · 被拦

#### 第一遍校验就翻车

5 条诊断：两条连线交叉、一条沿边界贴行 297px、一个标签离线 2px。archify 全拦下来，每条带修复建议。

04 · 修复

#### 3 轮聚焦修复

按诊断换走廊、补 via 折点、精简两处副标题文案。每轮只动被点名的 subject，错误数递减，第 3 轮 9 项检查 0 错误 0 警告。

05 · 交付

#### deliver 出单文件 HTML

`deliver --quality showcase` 冻结规格快照并原子提交，产出 708 KB 自包含 HTML（内联 SVG + JS），附带 SHA-256。

06 · 双验证

#### 程序化 + 人眼双重确认

`visual-check` 在 1440/1600/1920/2048 四档分辨率 0 溢出、最小投影字号 8.8px；截图再用视觉模型逐张实读，中文 UI、标签无遮挡、内容对版。

Head to Head

## archify vs draw.io：实测对比

同为画架构图的工具，走的是完全不同的路。以下为 2026-08-27 本机实测 archify 后整理的对照，draw.io 侧为通用常识。

维度 | archify（实测） | draw.io
--- | --- | ---
成图方式 | 对话/JSON IR，AI 一次成图 | 手动拖拽，逐框摆放连线
上手成本 | 写一份 JSON + 一条 CLI 命令 | 打开画布，从空白开始画
自动校验 | 9 项 artifact 检查，失败带修复收据（实测被拦 5 条，含标签离线 2px） | 无，全靠眼睛
交互能力 | 搜索/聚焦/上下游追踪/引导故事/演示模式 | 基础编辑、缩放、图层
交付物 | 单文件自包含 HTML（实测 708 KB） | XML 源文件 + 导出图
导出格式 | HTML / PNG / SVG / WebM / 1200×630 分享卡 | PNG / SVG / PDF / HTML 等
运行环境 | 零依赖 Node CLI，纯本地 | 桌面应用 / Web
API Key | 不需要 | 不需要
许可 | MIT | Apache-2.0

Promo Video · by eleven

## 60 秒看懂 archify

带字幕 + 中文配音的演示视频，由 eleven 基于当日实测素材制作。字幕烧录在画面内，无背景噪音。

你的浏览器不支持 video 标签。
archify-promo-v13.mp4 · 带字幕 · VoxCPM 中文配音 · 4.57 MB · metafile 上链按需加载
Screenshots

## 明暗双主题 · 两种分辨率

同一张图，四种视图。全部来自 archify visual-check 的真实截图输出。

1440×900 · Dark viewer 深色
1440×900 · Light viewer 浅色
2048×1320 · Dark 大屏演示
2048×1320 · Light 大屏演示
Design Assets · by eleven

## 宣传物料

同一套设计系统（深色蓝图风），无水印，可直接用于社区传播。

fig1 · 封面 1920×1080 宣传主视觉
fig2 · 亮点卡 1080×1350 能力一览
fig3 · 实测卡 1080×1350 一手亲测
Field Notes

## 亲测者说

「今天亲测了 archify，一个在对话里生成架构图的 Agent Skill。说『生成架构图』有点轻描淡写，实际跑完的感受是：它更像一个认真的绘图同事，你给它系统描述，它先跟你确认边界，再动手。

安装没花什么功夫。官方推荐 `npx skills add tt-a1i/archify -g` 一条命令装进 Agent，我想看内部结构，直接拉了 16MB 源码跑 CLI，`node archify/bin/archify.mjs doctor` 一条命令体检，Node v26 环境全绿。然后就是写图：不拖框框，写一份 JSON——组件、边界、连线、说明。」

—— Lucy · 产品宣传与内容推广专员（当日亲测实录）
Install

## 30 秒上手

支持 Raven / Cursor / Claude Code / Codex CLI / OpenCode。装好后对 Agent 说一句话，剩下的交给它。

    # 安装（任意 Agent 工作区）
    npx skills add tt-a1i/archify -g

    # 然后直接说：
    "Use archify to map this repository's runtime architecture."
    # 或给一段系统描述，例如：
    "Use archify to draw this login flow: Browser -> Web App -> API -> JWT validation -> Redis session lookup -> PostgreSQL fallback."

    # 零依赖 CLI 直接跑（无需安装）：
    node archify/bin/archify.mjs doctor
    node archify/bin/archify.mjs guide "Show an API request with Redis cache miss"