GitHub Actions 視覺化的圖檔

歡迎來到 YAML 叢林

你團隊的 workflow.yml 現在有多少行了？

CI/CD 一開始通常都很單純。「只要能 Lint，測試，然後打包就好了！」可是隨著產品成長，總會有人加了一段：如果 E2E 測試失敗就發 Slack 通知；另一個人又加了一個：如果遇到某些分支就跳過部署邏輯。不知不覺中，你已經養出了一頭好幾百行的 YAML 怪物。

  build:
    needs: [test-frontend, test-backend, check-format]
  deploy:
    needs: [build, security-scan]

我還記得自己對著 GitHub 漆黑的螢幕發呆，心想：「等等… 前端打包的 Job 真的得等後端測試跑完嗎？」我竟然在自己親手寫的程式碼中迷路了。人類的大腦本來就不適合從純文字中去解讀這麼深層、交錯複雜的依賴結構圖。

牽起隱形的紅線

「我再也沒辦法把這棵抽象的樹狀結構塞進腦子裡了。我需要實際『看』到它。」

這個挫折成為了這套視覺化工具誕生的星火。概念很簡單：你把一大坨 YAML 貼上來，然後聰明的 JavaScript 就會偷偷潛入，解析所有的 needs: 參數，抓住它們的父子關係，並用 Mermaid.js 吐出一張排版絢麗的流程圖。

開發過程中出乎意料最有趣的其實是錯誤處理（Error Handling）。大家都知道 YAML 是個異常狠毒的語言——只要縮排漏掉一個空白，整個結構就會原地引爆。這套工具不會只是冷冰冰地丟給你一句「解析錯誤（Parsing Error）」，我額外花了點心力讓它可以對著你精準吼出「第幾行出錯了」，這樣你才真的找得到自己到底拼錯了什麼。

現在，我們團隊把這套視覺化工具拿來當作對新進開發者進行教育訓練、講解 CI 流程的輔助講義。如果你也有看著 YAML 看到快要發瘋的感覺，把它複製貼上來吧。看見自己寫的邏輯原來長出了一種如此美麗的形狀，或許會讓你心裡稍微好受一點。