繪製動畫圖表，進入畫面時自動繪製
原則
一個圖表一個想法，先用一句話寫下。圖表會在進入畫面時，依照閱讀順序只繪製一次，之後便保持靜止。墨色傳遞訊息，灰色承載其餘部分，標籤直接標示在圖形上，無圖例。當使用者設定「減少動畫」時，圖表會直接顯示完整狀態。
必要背景： diagram-storytelling（濃縮為一個想法，箭頭上使用動詞，節點代表狀態）。emil-design-eng 處理曲線與持續時間。
何時不該使用此技能
- 數據圖表（曲線圖、長條圖）：請使用資料視覺化工具。
- 循環播放的動畫，用以展示即時運作流程：請使用動態原型，而非圖表。
- 在工具中每天被查看數十次的圖表：完全不需要動畫。
操作步驟
- 一句話。 用一句話表達想法，包含主體（該主體會以墨色呈現），例如：「探索三個概念，保留一個原型」。如果一句話包含兩個想法，就製作兩個圖表。
- 引用工具庫。 將
reference/diagramMotion.ts與reference/DiagramParts.tsx複製到專案中（如果尚未存在）。永遠不要在本地重新定義Panel、Arrowhead、色調或輔助函式。 - 字詞。 一個雙語資料檔（
en/fr）：包含用於無障礙的title與desc，以及每個標籤。每個標籤最多幾個單詞。法文：大寫字母請加註音符號，冒號前使用不間斷空格，避免使用破折號。 - 幾何設定。
viewBox="0 0 960 H"（H 在 300 到 400 之間），使用具名常數表示座標，左右各留 60 px 邊距給線條末端的標籤（textAnchor="end"且 x = 54 的標籤會被截斷）。Panel最小寬度為 720（以便在手機上滾動）。 - 閱讀順序 = 延遲順序。 每個元素根據閱讀順序設定毫秒延遲：最先閱讀的元素延遲為 0，每個步驟增加 200 到 300 毫秒，同一系列中元素之間相隔 40 到 110 毫秒。墨色訊息最後出現（1500 到 2300 毫秒）。總繪製時間：2 到 3 秒。
- 驗證。 在 localhost 上顯示頁面，將圖表滾動至中央，等待 3 秒，然後截圖（使用
reference/shoot-diagrams.cjs，執行時需加上NODE_PATH=<project>/node_modules）。檢查每張截圖：標籤是否被邊緣截斷、標籤是否被白色區塊遮蓋、兩個相鄰標籤是否互相接觸。修正錯誤後重新截圖。同時在 390 px 寬度下進行驗證。
快速參考
| 元件 | 輔助函式 | 數值 |
|---|---|---|
| 線條、箭頭 | 在 path 上使用 draw(shown, delay, duration)，並設定 pathLength={1} | 400 到 900 毫秒 |
| 虛線 | 無法繪製：使用 rise（淡入） | |
| 區塊、標籤 | rise(shown, delay)：向上移動 8 px | 500 毫秒 |
| 時間條 | grow(shown, delay, duration)：從左側延伸 | 500 到 800 毫秒 |
| 框架、放大鏡 | open(shown, delay)：從 0.96 到 1 展開 | 600 毫秒 |
| 箭頭尖端 | 緊接在 draw 之後使用 <Arrowhead x y angle style={rise(...)}> | |
| 色調 | INK #111827 訊息，LINE #D1D5DB 邊框，PALE #E5E7EB 背景，#6B7280 次要標籤，#9CA3AF 被排除的內容 | |
| 文字 | 節點標題 14 px 600，標籤 11 到 13 px，永遠不小於 10 | |
| 曲線 | cubic-bezier(0.22, 1, 0.36, 1)（已在輔助函式中） |
所有 CSS 變換都應應用在包裹的 <g> 元素上，絕對不要直接用在帶有 SVG transform 屬性的圖形上（否則會覆蓋原有變換）。
各類型想法的圖表形式
- 收斂序列：節點排成一列，展開分支，只有一條繼續以墨色顯示，其他以
LINE呈現並標示「排除」。 - 時間節奏：上方為週數軸，每個行動者一條線，使用
grow條，一個墨色箭頭標示重要的關係。 - 開放再匯流：在一個按時間比例繪製的條形圖上方，放置一個放大鏡（先
open再draw輪廓）。 - 狀態與轉換：節點代表狀態（探索階段使用虛線，中間階段使用灰色，最終確定階段使用實心墨色），使用動詞標籤的箭頭，放置於節點上方以避免重疊。
- 結構分解：物體在左側，使用虛線切割，箭頭指向右側的部件卡片，第一個部件以墨色顯示。
每個形式的完整範例請參考：reference/exemple-TemplateDiagrams.tsx 及其資料檔 reference/exemple-templateDiagramsData.ts。
圖表縮圖（卡片、列表）
相同元件可以支援靜態且裁切的縮圖顯示：thumb 會停用面板與漸現效果，並將 viewBox 變更為 520 × 400（13:10，與卡片圖片比例相同），並以訊息為中心。每個圖表一個縮圖，放在 FRAMES 中，並在 350 px 寬度下進行截圖驗證：圖形中 11 px 以上的文字必須清晰可讀。詳見 reference/exemple-TemplateDiagrams.tsx 中的 Drawing 與 TemplateDiagramThumb。
常見錯誤
| 錯誤 | 修正方式 |
|---|---|
| 加入循環動畫（繞圈的小點、閃爍的狀態）「為了讓它看起來有生命力」 | 繪製過程本身就是動畫。只有在時間是圖表主題時才能使用循環，且只能有一個，在繪製完成後透過 useLoop 實現 |
| 使用強調色，綠色/紅色表示通過/拒絕 | 只使用墨色與灰色；結果應透過形狀（實心、虛線、排除）或文字來表達 |
| 在圖形旁放置圖例 | 文字應直接標示在圖形上，靠近所描述的內容 |
| 箭頭標籤使用目標畫面的名稱 | 應使用轉換的動詞（例如：「已驗證」、「未保留」） |
| 標籤居中放在兩個相距 60 px 的節點之間 | 標籤會溢出到節點上：應放置在節點上方 |
| 為了效果而選擇延遲時間 | 延遲時間應跟隨閱讀順序，訊息最後出現 |
| 未經截圖就宣告完成 | 必須在滾動並等待 3 秒後截圖，並檢查截圖 |