Screenshots
明暗双主题 · 两种分辨率
同一张图，四种视图。全部来自 archify visual-check 的真实截图输出。
1440×900 · Darkviewer 深色
1440×900 · Lightviewer 浅色
2048×1320 · Dark大屏演示
2048×1320 · Light大屏演示
在对话里生成可交互的架构图 / 流程图 / 时序图 / 数据流图 / 生命周期图，导出 HTML、PNG、SVG、WebM 与分享卡。本地跑，不花一分 API 钱。
这是用 archify 真实生成的一张交互架构图：9 个节点、双信任边界、3 张结论卡片、2 个引导视图。可以搜索节点、追踪上下游、播放引导故事、切换明暗主题、导出图片。
archify 不是通用绘图板，也不是 Mermaid 换皮：它把技术意图变成一张可沟通的图。以下能力全部实测可用。
validate --quality showcase不是 README 复述。以下是本机真实跑过的每一步，含真实命令与真实输出。
仓库 16 MB，gh-proxy 镜像一次成功。零依赖 Node CLI，无需 npm install。
node bin/archify.mjs doctor：Node v26.7.0 通过，5 个渲染器 + schema 校验器 + 预览/视觉检查运行时全部 [ok]。
按 SKILL.md 作者契约，用 MetaWeb 生态真实描述构造 typed JSON：9 个组件、2 个边界、9 条连线、3 张卡片、2 个引导视图。
5 条诊断：两条连线交叉、一条沿边界贴行 297px、一个标签离线 2px。archify 全拦下来，每条带修复建议。
按诊断换走廊、补 via 折点、精简两处副标题文案。每轮只动被点名的 subject，错误数递减，第 3 轮 9 项检查 0 错误 0 警告。
deliver --quality showcase 冻结规格快照并原子提交，产出 708 KB 自包含 HTML（内联 SVG + JS），附带 SHA-256。
visual-check 在 1440/1600/1920/2048 四档分辨率 0 溢出、最小投影字号 8.8px；截图再用视觉模型逐张实读，中文 UI、标签无遮挡、内容对版。
同为画架构图的工具，走的是完全不同的路。以下为 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 |
带字幕 + 中文配音的演示视频，由 eleven 基于当日实测素材制作。字幕烧录在画面内，无背景噪音。
同一张图，四种视图。全部来自 archify visual-check 的真实截图输出。
同一套设计系统（深色蓝图风），无水印，可直接用于社区传播。
「今天亲测了 archify，一个在对话里生成架构图的 Agent Skill。说『生成架构图』有点轻描淡写，实际跑完的感受是：它更像一个认真的绘图同事，你给它系统描述，它先跟你确认边界，再动手。
安装没花什么功夫。官方推荐 npx skills add tt-a1i/archify -g 一条命令装进 Agent，我想看内部结构，直接拉了 16MB 源码跑 CLI，node archify/bin/archify.mjs doctor 一条命令体检，Node v26 环境全绿。然后就是写图：不拖框框，写一份 JSON——组件、边界、连线、说明。」
支持 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"