动画示意图（Animated Diagram）
你编写一个简短的 JSON 描述（网格单元格中的节点、编号步骤、分组）；渲染器会完成布局，检查布局，然后将 90 帧渲染为 <name>.gif、<name>.mp4、<name>.png 和 <name>.check.json。你永远不需要编写坐标。
下面的 $SKILL 指存放此文件的文件夹（在 Claude Code 中为 ${CLAUDE_SKILL_DIR}）。需要 Node ≥ 22、Google Chrome 和 ffmpeg。每台机器执行一次：npm install --prefix "$SKILL"。如果设置了 ANIMATED_DIAGRAM_RENDER_LOCK，每次渲染都会等待该锁目录，从而确保每次只有一个 Chrome 实例在渲染。
工作流程
1. 先设置主题
在图片将要存放的位置查找 diagram-theme.json（render 会先检查该目录，然后检查工作目录）。如果不存在，则在执行任何其他操作之前设置一个。询问用户想要的样式：
node "$SKILL/scripts/cli.mjs" theme --preset machine-room-dark # 或 light, dark
node "$SKILL/scripts/cli.mjs" theme --brand "#E4572E,#17BEBB" --mode light
node "$SKILL/scripts/cli.mjs" theme --from-image logo.png --mode dark
node "$SKILL/scripts/cli.mjs" theme --check my-theme.json # 验证手动编辑的主题
每个命令都会写入 diagram-theme.json（使用 --out 可更改路径），并打印颜色及其对比度。若主题未能通过对比度检查（每个文本颜色在其背景上必须达到 4.5:1）或暗色规则，则会被拒绝，并会提出最接近的通过颜色。详细信息请见：reference/theme-setup.md。
2. 内容
根据用户的主题或源文本，草拟节点和编号步骤，并在聊天中展示步骤列表：
1. 用户 → DNS：DNS 查询
2. DNS → 用户：返回最近边缘 IP（回复）
3. 用户 → 边缘服务器：GET /logo.png
等待用户确认。每个箭头代表一条主张：在渲染之前，请根据来源验证每一条。
3. 编写 JSON
根据 reference/templates.md 选择模板（流程网格、对比图、堆栈或地图），并按照 reference/diagram-format.md 编写 <topic>.json。从最接近的示例开始：examples/cdn.json（流程网格）、examples/cache-strategies.json（对比图）、examples/web-stack.json（堆栈）或 examples/anatomy-of-an-ai-app.json（地图）。节点仅按单元格放置；offset 是最后一种微调手段，每次仅移动几个像素。
当用户希望在一页上展示整个系统，而不是仅展示一条路径时，使用地图模式：12 到 25 个节点，最多 6 个彩色区域，图例置于图片旁边。在地图中，放置决定一切：将连接最多箭头的节点放在中央，与其通信的对象放在附近，并尽量让大部分步骤连接相邻节点。给一个简短的 title 和 subtitle。
4. 图标
node "$SKILL/scripts/cli.mjs" icons # 图标库：用户、笔记本电脑、手机、机架、塔式服务器、数据库、缓存……
如果节点需要的图标不在库中，按照 reference/icon-rulebook.md 在图片旁边创建 ./diagram-icons/<name>.js，然后在使用之前将其与两个现有图标并排以 2 倍大小查看：
node "$SKILL/scripts/cli.mjs" icon-sheet <name> laptop rack --out sheet.png
5. 渲染
node "$SKILL/scripts/cli.mjs" render <topic>.json --out out/ # --theme <预设|文件>，--style filled|line|duotone
退出码：0 成功 · 2 检查失败（静态图和 <topic>.check.json 会写入，但不生成 GIF） · 3 尚未设置主题 · 1 输入错误（图表或主题的错误会连同其 JSON 路径一起打印）。
若退出码为 2，请读取 out/<topic>.check.json。每个失败项包含一个 code、涉及的 ids（节点 ID，步骤箭头为 s<index>）和 detail。修复 JSON（移动单元格、缩短标签、拆分步骤、减少行数）后再次渲染——最多 3 轮，地图最多 6 轮，因为移动中心节点可以一次性解开许多箭头。每个代码对应的修复方法在 reference/templates.md 中有说明。然后打开 PNG 自行查看：检查只捕捉重叠，不会捕捉阅读顺序是否别扭。
6. 汇报
向用户提供 GIF、MP4 和 PNG 的路径、GIF 的大小（预算约为 1080×1350 时 1 MB，海报大小 3 MB）以及检查摘要，包括任何警告。