再见 draw.io！又一个神级 Skill 爆火，直接把代码仓库变成可交互架构图

豆芽菜小萌

发布于 2026-09-04 12:57:43

给大家分享下我最近很喜欢的一个项目，第一次用真的把我惊艳到了！

像我们平时经常要绘制架构图，这个过程其实最耗时间的地方后面一轮轮改，毕竟架构是会随着时间而改变的。

服务一多，我们常见的一些绘制架构图的方式就出现一些小问题了：Mermaid 的箭头开始打架；换成 draw.io，细节倒是都能自己控制，可每次增加模块、调整链路，又要重新挪方框、理连线。让 AI 直接输出 SVG 或 HTML 确实快，需求再改一次，原来已经排好的位置也可能跟着重画。

这就不得不提最近爆火的 Archify 了，实际在没火之前我就已经开始在用了，并且借鉴了下其中的设计思想。

它处理的正是这类麻烦：Coding Agent 负责读需求、看代码，Archify 接手后面的结构保存、检查、渲染和交付。

生成的结果是一个独立 HTML 文件。打开以后可以搜索节点、追踪路径、切换主题，需要放进文档时还能继续导出图片。

Archify GitHub 仓库页面

截至发稿，Archify 在 GitHub 上已经获得约 35.7K Star、2.3K Fork，采用 MIT 协议。

Archify 是什么？

把 Archify 装进 Codex、Claude Code 或 Cursor 后，直接在对话里说一句：

用 Archify 画出 Browser -> API -> Redis -> PostgreSQL 的缓存回源过程。

Agent 会先理解这段描述，写出一份 Typed JSON IR；Archify 校验这份结构化源文件，再确定性地编译成 HTML 和 SVG。它不提供新的 AI 模型，也没有一套让人手工拖拽的绘图界面。

根据要讲的问题，图分成五种：

Architecture：适合画系统组件、服务、数据库和安全边界。
Workflow：适合画 CI/CD、审批流程、工具调用和 Runbook。
Sequence：适合画 API 调用、缓存回源、鉴权和异步链路。
Data Flow：适合画数据管线、数据血缘、敏感信息流转和下游消费者。
Lifecycle：适合画状态变化、重试、等待、取消和最终结果。

Archify 支持的多种技术图

讨论还没落地的方案时，直接给出一段系统描述就行。要画现有项目，再让 Agent 读取仓库中的核心组件、主要调用链、外部依赖和系统边界。

如果要求附带源码证据，架构节点还能关联到固定 Git Commit 下的文件和行号，读图时可以顺手回到代码核对。

Archify 解决了什么问题？

假设第一版图已经画好，这时需求又来了：增加 Redis，把鉴权挪到左边，再突出回滚链路。

对一次性生成的 SVG 来说，这很可能又是一次整图重写。Archify 留下了 Typed JSON IR，节点、关系和强调内容都有明确字段。Agent 改 Redis 时可以只碰相关对象，不必重新组织整张图。

这份 JSON 还要经过 Schema、布局和输出检查，确认连线没有穿过无关节点、关系标签没有压住其他线路，才会生成新的 HTML 和 SVG。

整条流程大概是这样：

自然语言或代码仓库
        ↓
Agent 理解系统结构
        ↓
生成 Typed JSON IR
        ↓
Archify 校验布局与关系
        ↓
输出可交互 HTML / SVG

校验失败时，Archify 会返回机器可读的诊断结果，指出具体对象、测量数据和允许使用的修复方式。Agent 按这份回执做局部调整，比面对一段 Node.js 堆栈重新猜原因省事得多。

Archify 把功夫花在了出图之后：继续修改时保留无关结构，交付前执行固定检查，图里的关系也能回到 JSON 源文件核对。

Archify 有什么亮点？

生成的图可以继续探索

Archify 输出的 HTML 自带 Viewer，打开后可以搜索节点、放大缩小、切换深浅主题，也可以聚焦某个组件，查看它的上游和下游。

比如一张电商系统架构图里同时包含 Web、API、缓存、消息队列、订单服务和数据库。只看全图时，很容易被大量连线绕晕。这时可以选择 Web 和数据库，让 Archify 只突出两者之间已经写进图里的有向路径。

它还提供语义角色对比和引导故事。前者可以查看后端服务与数据库之间有哪些真实连线，后者则按预先设置的章节逐步展示系统。拿它做技术评审或方案演示，会比放一张静态截图更方便。

Archify 路径追踪

Archify 展示的是源文件里已经写明的关系。两个节点在图上能够连通，并不代表它会进一步判断线上一定会产生影响。

交付前会先检查

Archify 会检查 JSON 是否符合 Schema、节点和连线有没有明显的布局问题、关系标签是否压到其他线路上，以及生成的 HTML 和 SVG 能否正常使用。

候选版本通过检查后，新的成品才会替换上一次成功输出。开启本地 Preview 后，要是修改到一半 JSON 还不完整，页面会继续保留上一张可用的图，不会突然刷新成一个坏掉的版本。

校验器检查的是格式、几何和已经写入的关系。代码分析有没有漏掉组件或调用链，它无法证明。涉及真实项目时，最后仍然要由熟悉系统的人确认。

可以对比架构前后发生了什么

做技术方案或 PR Review 时，Archify 可以对比两份已经校验的架构快照，生成 Before、Delta、After 三个视图。

它会区分哪些节点被新增、删除或移动，哪些关系发生了变化，哪些连线重新规划了路线。相比把两张图并排放着找不同，这种方式更容易看出一次改动碰到了哪里。

Archify 架构变化对比

它只展示两份源文件之间能够确定的变化，不会自动告诉你这次改动风险多大，也不会替你判断 PR 能不能合并。

一个 HTML 文件就能带走

最终生成的图是一个自包含 HTML 文件，不依赖 Archify 提供在线托管服务。发给同事、本地打开或者放进项目文档都可以。

需要静态图片时，可以导出 PNG 和 SVG；做演示时还能显式开启有限的路径动画，并导出 WebM。项目还准备了 1200×630 的 Share Card，放到 README、Release 或社交平台时不用自己重新裁图。

Archify 导出菜单

Archify 内置 Classic、Signal Flow、Blueprint 和 Editorial 四套视觉样式，深色、浅色主题也能随时切换。样式只改变视觉效果，不会重新安排节点和连线。

能装进多个 Coding Agent

Archify 以 Skill 的形式支持 Cursor、Claude Code、Codex CLI 和 OpenCode，也可以手动安装到 Raven。

DeepSeek Harness 目前有一个社区适配插件，可以加载 Archify Skill，不过它不是 DeepSeek 官方集成，而且适配的是仍处于 Developer Preview 的 DSH 版本，兼容性还不能当成长期保证。

Claude.ai 也可以上传 archify.zip，但能否运行完整的渲染和校验流程，要看它提供的沙箱里有没有 Node.js 和必要的文件访问能力。

Archify 怎么使用？

Archify 的渲染器要求 Node.js 18 或更高版本。

如果已经在使用 Codex、Claude Code、Cursor 或 OpenCode，可以通过 Skills CLI 全局安装（直接让 AI 装就行）：

npx skills add tt-a1i/archify -g

只想先体验一下，不准备写入全局 Skill 目录，也可以临时交给 Codex 使用：

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

安装完成后，不需要记一堆参数，直接在 Agent 对话里描述想要的图：

使用 Archify 画出：Browser -> API -> Redis 缓存 -> PostgreSQL 回源。

要分析当前代码仓库，可以把要求写得具体一点：

分析这个仓库，然后使用 Archify 生成一张高层运行时架构图。
只保留 8～12 个核心组件，突出一条主要路径，
并标出外部依赖与信任边界。
辅助信息放进说明卡片，不要继续增加连线。

Agent 会先读取项目，再创建 JSON 源文件，调用 Archify 校验并生成 HTML。图出来以后，可以继续在对话里说：

增加 Redis。
把鉴权模块移到左侧。
突出从 API 到数据库的缓存回源路径。

需要自己检查 Skill 是否安装完整，可以在 Archify 目录运行：

node bin/archify.mjs doctor
node bin/archify.mjs demo /tmp/archify-demo

DeepSeek Harness 用户则需要安装单独的社区插件：

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

这个插件当前适配 @deepseek-ai/dsh@0.1.0-rc.6，要求 Node.js ^22.19.0 或 >=24.0.0。插件 v0.1.0 内置的是 Archify 2.14 快照，并不会自动跟随主仓库升级到 2.16。通过 DSH 生成的 JSON 和 HTML 属于普通工作区文件，不一定会自动出现在 Web 页面的 Produced Files 区域，最好让 Agent 返回准确的文件路径。