跳至內容
CI/CD 可視化

GitHub Actions 可視化工具

使用 Mermaid.js 可視化 GitHub Actions 工作流 YAML。解析作業間的依賴關係 (needs) 並以流程圖形式顯示。

指南: 使用方式與特色

  • 將您的 GitHub Actions YAML 貼入「輸入工作流 YAML」區塊。
  • 點擊「可視化」按鈕即可在右側渲染圖表。
  • 作業間的依賴關係 (needs) 會被繪製成箭頭 (-->)。
  • 點擊「複製 Mermaid 代碼」即可取得可用於 GitHub Markdown 或其他支援 Mermaid 之工具的代碼。

範例: 輸入與輸出範例

基本的作業依賴關係

輸入範例

jobs:
  build:
    runs-on: ubuntu-latest
  test:
    needs: build
    runs-on: ubuntu-latest
  deploy:
    needs: test
    runs-on: ubuntu-latest

輸出範例

graph TD
  build
  test
  build --> test
  deploy
  test --> deploy

FAQ: 常見問題

  • 可以可視化大型工作流嗎?

    可以,但對於作業數量非常多(數十個或更多)的工作流,圖表可能會變得非常大且難以閱讀。在這種情況下,建議分段可視化工作流。
  • 支援除了「needs」以外的依賴關係嗎?

    目前該工具僅可視化由「needs」屬性定義的作業級依賴關係。作業內部的個別步驟(steps)不會被可視化。
  • 我的 YAML 資料安全嗎?

    絕對安全。所有運算都在您的瀏覽器本地完成,不會將資料傳送到伺服器,因此可用於私有或企業級的工作流配置。

使用情境: 常見的使用情境

  • 瞭解工作流依賴關係

    透過 `needs` 可視化作業間的連接,直觀地瞭解執行順序和潛在的瓶頸。

  • 協助 Pull Request (PR) 審閱

    可視化變更後的 YAML 並分享圖表,幫助審閱者快速理解作業配置的變化。

  • 簡化文檔製作

    產生 Mermaid 代碼並嵌入 GitHub README 或 Wiki,輕鬆保持工作流圖表為最新狀態。

graph TD A[Start] --> B[Input YAML] B --> C[Visualize]

GitHub Actions 視覺化工具

視覺化 GitHub Actions workflow 的 jobs、dependencies 與 needs 關係。適合理解複雜 CI/CD pipeline,並找出瓶頸或錯誤依賴。

常見用途

  • 檢查 CI/CD 流程:了解 job 執行順序。
  • 除錯依賴關係:確認 needs 是否符合預期。
  • 文件化 pipeline:用更清楚的視圖分享 workflow 結構。

修改重要 workflow 時,也請檢查 permissions、secrets 與 triggers。

這個工具的相關文章

最新文章

使用案例
2026-08-07

curl 選項速查|-X、-H、-d 實際做了什麼與常見陷阱

整理實務上會遇到的 curl 選項:為什麼加了 -d 就已經是 POST、-d 與 --data-raw 的差別、開頭的 @ 會悄悄讀取檔案的陷阱、單引號與雙引號的取捨,以及為什麼 -k 和 -L 值得多想一下。

工具介紹
2026-08-06

JSON Schema 與 Zod 雙向轉換的原理|required 與 .optional() 的對應

解析雙向轉換器的實作:把 JSON Schema 轉成 Zod 結構定義,也把 Zod 程式碼轉回 JSON Schema。內容涵蓋 required 與 .optional() 預設值相反的陷阱、限制條件對照表,以及不執行程式碼就完成剖析的做法。

使用案例
2026-08-06

SQL 子句執行順序參考|為什麼 WHERE 看不到 SELECT 的別名

SQL 並不是照您撰寫的順序執行。以邏輯執行順序(FROM → WHERE → GROUP BY → HAVING → SELECT → ORDER BY → LIMIT)為主軸,說明別名為何在 WHERE 無法使用、WHERE 與 HAVING 的分工、ONLY_FULL_GROUP_BY、COUNT(*) 與 COUNT(欄位) 的差異,以及 LEFT JOIN 搭配 WHERE 的陷阱。

使用案例
2026-08-06

unified diff 格式閱讀指南|看懂 git diff 的 @@ 標頭

說明如何閱讀 git 產生的 unified diff 格式:@@ -12,7 +12,9 @@ 四個數字的意義、只改一個字元為何顯示成整行替換、空白與換行字元的陷阱、\ No newline at end of file、合併提交的 @@@ 組合式 diff,以及以 similarity index 推斷檔案更名。

使用案例
2026-08-06

UTC⇄JST 換算參考手冊|9小時時差對照表與時區踩雷指南

以對照表整理 UTC 與日本時間(JST)的換算,並說明與台灣時間(UTC+8)相差 1 小時的關係。內容涵蓋 ISO 8601 的 Z 與 +09:00、JavaScript 日期解析悄悄位移 9 小時的條件、MySQL/PostgreSQL 的時區行為,以及 GitHub Actions cron 一律以 UTC 執行的陷阱。

使用案例
2026-08-04

CREATE TABLE 參考手冊|MySQL、PostgreSQL、SQLite 的型別與約束差異

以跨資料庫對照表整理 CREATE TABLE(DDL)的寫法:型別對應表、自動編號(AUTO_INCREMENT / IDENTITY / rowid)的方言差異、外鍵的 ON DELETE 行為,以及 MySQL 會靜默忽略的 CHECK 約束。

廣告

廣告