flowchartlisted

# flowchart — 產生 Mermaid 流程圖 把「一段流程／決策邏輯／既有程式碼或文件描述的步驟」轉成一張**語法正確、可直接渲染**的 Mermaid 圖。Claude Code 終端、Artifacts、GitHub、Obsidian 皆原生渲染 ```mermaid 圍籬,所以輸出一律用 Mermaid 而非 ASCII art。 這個 skill 是**手動觸發**:只在使用者點名時跑。它的價值在於一次把 Mermaid 的語法陷阱處理掉,不用每次重踩。 ## 流程 1. **先確認要畫什麼**——來源可能是三種,對應不同起手: - **文字描述**:使用者用自然語言講流程/決策 → 直接抽節點與邊。 - **既有程式��/函式**:先讀相關檔(用 Read/Grep 定位,別整庫盲讀),把控制流(分支、迴圈、early return、錯誤路徑)逆推成節點。 - **既有文件/流程**:讀來源,萃取步驟與判斷點。 若步驟或分支不明確(缺結束條件、某判斷的另一支去哪),**先問一題再畫**,不要自行腦補流程——畫錯的圖比沒有圖更誤導。 2. **選圖型**(預設 flowchart,別過度): - **flowchart**——有先後步驟、判斷分支、迴圈。九成情況用這個。 - **sequenceDiagram**——重點是多個角色/服務之間的**訊息往返時序**(A 呼叫 B、B 回 C)。 - **stateDiagram-v2**——重點是**狀態轉移**(pending → running → done,及觸發轉移的事件)。 3. **選方向**:縱向流程用 `flowchart TD`(top-down),節點多、標籤長或偏線性用 `flowchart LR`(left-right)較好讀。 4. **輸出**:把圖放進 ```mermaid 圍籬直接回給使用者。預設**只輸出圖**,不逐節點複述文字(圖本身就是說明)。若使用者要存檔,寫成 `.md` 檔(內含 ```mermaid 區塊)。 5. **一律附 mermaid.live 連結**:每張圖都接著產一條連結給使用者,一鍵開瀏覽器親眼確認渲染(不是選配、不等使用者開口)。圖一改就重產,連結永遠對應當前這張。做法見下節。 ## 附上 mermaid.live 連結 連結讓使用者一鍵開瀏覽器確認渲染、必要時線上微調,故每張圖都附(多數載體雖能原生渲染 ```mermaid,仍一律給)。**連結尾段是數百字 base64,手貼漏一字就 deflate 解成壞資料、圖渲染成亂碼且不報錯**,所以流程強制「產出即自我驗證 + 貼出後回驗」——三步照做: 1. **寫檔**:用 Write 工具把 Mermaid 原始碼寫成 `diagram.mmd`(別用 `echo`/`printf` 經 shell 塞長串——引號逃逸是跨 shell 地雷;有檔才好回驗)。**放暫存處**(系統 temp 或 harness 給的 scratchpad),別寫進使用者專案目錄——這是驗證用中間檔,留在人家 repo 裡是垃圾;只有使用者說要存檔才寫進專案(此時直接寫成 `.md` 含 mermaid 圍籬)。 2. **產連結**(腳本編碼後自我解碼比對,不符即 `exit 1`;通過才輸出)。檔案路徑用參數傳,**不要用 `< diagram.mmd` 重導向**——`<` 在 PowerShell 是保留運算子