tech-diagram-giflisted

# Tech Diagram GIF — 技術圖表繪製與 GIF 匯出 不引入 Python/cairosvg 管線的技術圖表流程：手寫 SVG（依 vendored 風格規範）→ 瀏覽器渲染自檢 → 匯出無縫循環 GIF。 風格規範 vendored 自 [fireworks-tech-graph](https://github.com/yizhiyanhua-ai/fireworks-tech-graph)（MIT，見 LICENSE.txt）； 只收編其 markdown 規範，不引入其 Python/cairosvg/FFmpeg 管線。 ## 硬閘門 1. **結構未確認前，不寫任何 SVG** — 先用純文字把節點/分組/連線定案（工作流程第 1 步）。 2. **交付物只有 GIF**（使用者硬規則）。SVG 僅為中間產���：GIF 產出並驗證後**即刪除， 不留在交付目錄**。唯一例外：環境無 ffmpeg 時依第 5 步退化交付 SVG 並附裝法與資安說明 （SVG 格式可含 script，收件方有信任成本；本 skill 產的 SVG 零 script，交付前必驗證）。 3. **渲染自檢不可省** — 沒親眼看過渲染結果不得宣稱完成。 ## 工作流程 ### 1. 結構確認（純文字，不畫圖） 把要畫的內容整理成清單給使用者確認，格式： ``` 節點（N）：① 名稱（語意桶）→ ② … 分組（M）：分組名 / 涵蓋節點 連線與語意：A→B 主流程（金）/ C⇢D 條件檢查（虛線）/ 自迴圈… ``` 使用者確認或修改 → 定案才進下一步。內容事實（節點名稱、流程順序）不確定時回問，不自行腦補。 ### 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、消費者群、DLQ）— 提到「事件流」「地鐵圖」「Kafka 拓撲」時用 | | Style 12 Ops Pulse | `references/style-12-ops-pulse.md` | 事故排查/SLO review（golden signals、critical path、trace 瀑布）— 提到「事故圖」「golden signals」「reliability」時用 | 動畫兩種模式���詳見 `references/motion-narrative.md`）： - **循環流動（預設）**：小球沿線跑（`animateMotion`）或 dash 脈衝 - **建置 → 營運（敘事）**：開場無連線 → 逐條畫入 → 營運流動 → 淡出循環 — 對外展示/README hero 用 使用者無明示偏好時用預設，不必多問；圖型