CI/CD 可視化
GitHub Actions 可視化工具
使用 Mermaid.js 可視化 GitHub Actions 工作流 YAML。解析作業間的依賴關係 (needs) 並以流程圖形式顯示。
graph TD
A[Start] --> B[Input YAML]
B --> C[Visualize]
指南
使用方式與特色
- 將您的 GitHub Actions YAML 貼入「輸入工作流 YAML」區塊。
- 點擊「可視化」按鈕即可在右側渲染圖表。
- 作業間的依賴關係 (needs) 會被繪製成箭頭 (-->)。
- 點擊「複製 Mermaid 代碼」即可取得可用於 GitHub Markdown 或其他支援 Mermaid 之工具的代碼。
FAQ
常見問題
可以可視化大型工作流嗎？
可以，但對於作業數量非常多（數十個或更多）的工作流，圖表可能會變得非常大且難以閱讀。在這種情況下，建議分段可視化工作流。
支援除了「needs」以外的依賴關係嗎？
目前該工具僅可視化由「needs」屬性定義的作業級依賴關係。作業內部的個別步驟（steps）不會被可視化。
我的 YAML 資料安全嗎？
絕對安全。所有運算都在您的瀏覽器本地完成，不會將資料傳送到伺服器，因此可用於私有或企業級的工作流配置。
使用情境
常見的使用情境
瞭解工作流依賴關係
透過 `needs` 可視化作業間的連接，直觀地瞭解執行順序和潛在的瓶頸。
協助 Pull Request (PR) 審閱
可視化變更後的 YAML 並分享圖表，幫助審閱者快速理解作業配置的變化。
簡化文檔製作
產生 Mermaid 代碼並嵌入 GitHub README 或 Wiki，輕鬆保持工作流圖表為最新狀態。
範例
輸入與輸出範例
基本的作業依賴關係
輸入範例
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