CI/CD 可視化
GitHub Actions 可視化工具
使用 Mermaid.js 可視化 GitHub Actions 工作流 YAML。解析作業間的依賴關係 (needs) 並以流程圖形式顯示。
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。
這個工具的相關文章
Recent Articles
工具介紹
2026-05-02
CSV 與 JSON 轉換：API 串接與資料移轉的格式選擇
了解如何安全地在 CSV 與 JSON 之間轉換，包含標題列、分隔符號、值的型別、巢狀資料與實務工作流程。
工具介紹
2026-05-02
JSON 格式化與驗證：安全檢查 API 回應的方法
了解如何格式化 JSON、找出語法錯誤、確認值的型別，並將 API 回應延伸成 TypeScript 型別、Zod Schema 或 OpenAPI 文件。
開發故事
2026-04-06
「誰也沒有更新架構圖」的問題
當有人問「等等，中間不是還有另一台伺服器嗎？」時，你是否曾感到背脊發涼？這就是打造即時 Mermaid 基礎設施視覺化工具的故事。
開發故事
2026-04-05
在 YAML 地獄中崩潰：為什麼我寫了一個 CI/CD 視覺化工具
當 GitHub Actions 中的 'needs' 依賴關係變得混亂到人類無法看清時，我決定將 YAML 迷宮變成一張俐落的流程圖。
開發故事
2026-04-04
別再為了 JOIN 哭泣：視覺化 SQL 產生器背後的故事
「等等，LEFT JOIN 是怎麼運作的？」我建立了這個無程式碼 SQL 工具，讓我們不用再浪費時間去除錯漏寫的逗號和語法錯誤。
開發故事
2026-03-09
用遞迴解決 JSON 轉 TypeScript：不依賴第三方庫的強大之處
「從 API 回應中瞬間生成型別定義。介紹不使用外部解析器、僅憑遞迴演算法實現輕量且高速轉換的幕後故事。」