你会得到什么
装好 arch-diagram 这个 Skill 以后，你把一个 GitHub 仓库或一篇技术文章的链接丢给 Claude Code 或 Codex，它会读懂里面的结构，画出一张会动的架构图：方框是模块，连线上有光点在流动，底部一行行滚出"谁把什么交给了谁"。不用会画图，也不用懂前端。文中有 2 段可以直接复制的提示词。
这张图帮你看懂项目，但不保证每个细节都对：它画的是原文写了的东西，推断出来的部分会画成虚线。拿去讲给别人之前，自己对一遍。
先说几个词
- Skill：一份写给 AI 的操作说明，装进 Claude Code 或 Codex 后，它遇到相关的请求会自动照着做。想先弄明白，看 Skill 手册。
- 架构图：用方框和箭头画出一个软件由哪些部分组成、数据怎么在它们之间流动。
- spec：这张图的"底稿"，一个 JSON 文件，记着有哪些方框、怎么连。以后改图都是改它。
第 1 步：准备好电脑上的三样东西
- Claude Code 或 Codex，至少一个。Claude Code 需要 Claude 的 Pro 及以上订阅，见 Claude 手册；Codex 见 Codex 手册。
- Node.js 18 或更新的版本。在终端里输入
node -v，能看到v18以上的数字就行；没有就去 Node.js 官网下载安装包。 - 一个 Chrome、Edge 或 Chromium 浏览器。Skill 要用它在后台检查图有没有排乱。大多数电脑已经有了。
只想要网页和图片，到这里就够了。想导出视频或动图，还要装 ffmpeg（一个处理视频的工具）：Mac 上装了 Homebrew 的话，运行 brew install ffmpeg。
第 2 步：一行命令装上 Skill
在终端里运行：
npx @rokoai/arch-diagram install
它会把 Skill 装到你的用户目录，Claude Code 和 Codex 都能用（电脑上有 Codex 时会顺带装一份）。装完重启 Claude Code 或 Codex，新 Skill 才会被读到。
以后作者发了新版本，再跑一次 npx @rokoai/arch-diagram install 就是更新。这个 Skill 让 Agent 遵守哪些规则（只读不运行、推断画虚线、自检才交付），见 arch-diagram 的 Skill 页面。
第 3 步：画第一张图
打开 Claude Code（或 Codex），直接说你要画什么。最简单的一句是"把 https://github.com/xxx/yyy 画成架构图"。想让结果更靠谱、更好讲，用下面这段：
第 1 条防止它在你电脑上跑陌生代码；第 2 条决定图能不能一眼看懂，节点太多就成了一张密密麻麻的网；第 3 条让你知道哪里要自己核对。
它会克隆仓库、读文件、写 spec、生成网页，再用浏览器自检，有重叠或文字溢出就自己改，一般改两三轮。做完会打开一个 HTML 文件，大概是这样：
（图片来自 arch-diagram-skill 仓库，原图是会动的网页。）
图默认存在 ~/Documents/arch-diagrams/ 下面；画的是你当前打开的项目时，存在项目里的 architecture/ 文件夹。旁边的 .spec.json 就是底稿，别删。
图的语言跟着你的提问走：用中文问就是中文图，哪怕原文全是英文。
第 4 步：一句话换风格
同一张图，说一句就重画，内容一个字不动。比如"换成手绘白板风格"：
（图片来自 arch-diagram-skill 仓库。）
8 种风格，按用途挑：
| 你要拿它做什么 | 这样说 | 风格 |
|---|---|---|
| 自己看、技术分享 | 不用说 | 暗夜终端（默认） |
| 方案评审、技术文档 | "画成蓝图风格" | 晒图蓝图 |
| 打印、论文插图，要按编号讲 | "工程制图风格" | 牛皮纸制图 |
| 给不写代码的人讲、早期讨论 | "手绘风格" | 白板手绘 |
| README 首图、发社交媒体、做幻灯片 | "醒目一点，海报感" | 粗野撞色 |
| 安全、运维主题，视频封面 | "复古终端风格" | 荧光终端 |
| 产品文档、浅色的文档站 | "简洁浅色风格" | 柔光卡片 |
| 封面图、模块不多的总览 | "换成 3D 等距" | 等距沙盘 |
3D 等距风格里文字会跟着地面倾斜，模块超过 12 个就别选它，会挤得看不清。
第 5 步：导出成图片、视频或可编辑的流程图
网页适合自己点着看。要发给别人，直接说：
- "输出成图片"：得到一张两倍清晰度的 PNG，适合贴进文档、发群里。
- "输出成 30 秒视频"：得到 MP4，不说秒数默认 20 秒，适合做视频素材。
- "输出成动图"：得到一个无限循环的 GIF。
- "输出成 Mermaid"：得到一段能贴进 GitHub、Notion、Obsidian 的流程图代码，以后可以手动改。Mermaid 会自己重新排版，样子和网页不一样，这是正常的。
视频和动图需要第 1 步说的 ffmpeg。
想改图：改底稿，不改网页
发现画错了、想加个模块、想换个说法，直接跟它说要改什么，它会去改 spec 再重新生成。不要自己打开 HTML 去改，下次生成会被覆盖。例如：
把"缓存"和"数据库"之间的连线改成双向，标签写"读写"；把左下角三个工具合成一个"外部工具"方框；改完重新自检，再输出一张 PNG。
一次说清楚几处改动，比来回改好几轮省事，也更省额度。
注意
- 它只读，不跑：Skill 规定克隆的仓库不装依赖、不执行脚本。你要是让它"顺便跑起来看看"，那是另一回事，先想清楚。
- 大仓库会被简化：特别大的项目只画最上面一两层，细节合并成列表，想看某一块就单独让它画那一块。
- 虚线是推断：给别人讲之前，把虚线部分对照原文核一遍。
- 在 arch-diagram 自己的仓库目录里运行
npx @rokoai/arch-diagram会报找不到命令，换个目录就好。
评论（0）
还没有评论，来说第一句。