動畫圖表 是做什麼的？
你撰寫一個小型的 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. 首先設定主題
在圖表預定存放的位置（render 會先檢查該處，然後檢查工作資料夾）尋找 diagram-theme.json。如果沒有，請在進行任何其他操作前先設定一個。詢問使用者想要的主題：
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）以及檢查摘要，包含任何警告訊息。