tech-diagram-giflisted

# Tech Diagram GIF — 技術圖表繪製與 GIF 匯出 不引入 Python/cairosvg **渲染管線**的技術圖表流程：手寫 SVG（依 vendored 風格規範）→ 瀏覽器渲染自檢 → 匯出無縫循環 GIF。 渲染與匯出全程靠瀏覽器與 ffmpeg，不裝 cairosvg / Pillow 等套件；`scripts/verify-geometry.py` 是唯一的 Python，純標準庫、無 pip 依賴，只做座標算術，缺 python3 時退化為人工計算，不阻擋出圖。 風格規範 vendored 自 [fireworks-tech-graph](https://github.com/yizhiyanhua-ai/fireworks-tech-graph)（MIT，見 LICENSE.txt）； 只收編其 markdown 規範，不引入其 Python/cairosvg/FFmpeg 管線。 ## 硬閘門 1. **先判斷該不該畫** — 動筆前問一句：讀者從這張圖學到的，會比從一段文字或一張表格多嗎？ 不會就別畫，直接寫清楚。純清單、簡單前後對照、單一形狀的「圖」一律退回文字。 使用者明確指定要圖時跳過此閘門，但仍可提一句更省的做法（提一次，不反覆）。 2. **結構未確認前，不寫任何 SVG** — 先用純文字把節點/分組/連線定案（工作流程第 1 步）。 3. **交付物只有 GIF**（使用者硬規則）。SVG 僅為中間產物：GIF 產出並驗證後**即刪除， 不留在交付目錄**。唯一例外：環境無 ffmpeg 時依第 5 步退化交付 SVG 並附裝法與資安說明 （SVG 格式可含 script，收件方有信任成本；本 skill 產的 SVG 零 script，交付前必驗證）。 4. **渲染自檢不可省** — 沒親眼看過渲染結果不得宣稱完成。 ## 工作流程 ### 1. 結構確認（純文字，不畫圖） 把要畫的內容整理成清單給使用者確認，格式： ``` 節點（N）：① 名稱（語意桶）→ ② … 分組（M）：分組名 / 涵蓋節點 連線與語意：A→B 主流程（金）/ C⇢D 條件檢查（虛線）/ 自迴圈… ``` 清單交出去前先過下方 Taste Gate 的「**結構清單**」組 —— 數量上限在這一步就數得出來 （節點／連線／分組三個數字見該組，本節不複製），此時超標只要改清單； 等到第 4 步才發現，只能整份重來。 使用者確認或修改 → 定案才進下一步。內容事實（節點名稱、流程順序）不確定時回問，不自行腦補。 ### 2. 選風格與動畫模式 | 風格 | 檔案 | 何時用 | |------|------|--------| | **Style 8 Dark Luxury（預設）** | `references/style-8-dark-luxury.md` | 架構、流程、資料流、拓撲 — 通用首選 | | Style 2 Dark Terminal | `references/style-2-dark-terminal.md` | 開發者風格；**UML 類（ER/時序/狀態機/use case）優先用此** — Style 8 深底吃 UML 細節與人形，比較表也不適合 | | Style 11 Event Transit | `references/style-11-event-transit.md` | 事件流/串流拓撲（Kafka/Pulsar/NATS、消費