🚀
GitHub Actionsのワークフローを可視化・GUIで編集できるツールを作った話
はじめに
GitHub Actionsは非常に強力なCI/CDツールですが、ワークフローが複雑になるとYAMLファイルが肥大化し、「どのジョブがどのジョブに依存しているのか」を読み解くのが大変になります。
数百行に及ぶYAMLを一行ずつ追いかけるのは、ミスのもとですし時間もかかります。
そこで、GitHub Actionsのワークフローを貼り付けるだけで、即座に図解（依存関係の可視化）し、GUI上で編集もできるツールを作りました。
どんなツール？
「GitHub Actions Visualizer & GUI Builder」は、ブラウザ上で動作する開発者向けツールです。
特徴
-
⚡ リアルタイム可視化: YAMLを貼り付けると、Mermaid.jsを使用してジョブ間の依存関係（
needs）を即座にグラフ化します。 - 🖱️ GUIで編集: グラフ上のノード（ジョブ）を操作したり、フォームからステップを追加・編集したりできます。
- 🔄 双方向同期: GUIでの変更はリアルタイムでYAMLコードに反映され、逆にYAMLの編集もグラフに反映されます。
- 🔒 ブラウザ完結: すべての処理はブラウザ上で行われるため、秘匿性の高いワークフローをサーバーに送信することなく安全に利用できます。
使い方
- GitHub Actions Visualizer にアクセスします。
- 左側のエディタに、可視化したいワークフローのYAMLをペーストします。
- 中央に依存関係のグラフが表示されます。ジョブ名をクリックすると、そのジョブの詳細設定を右側のパネルで編集できます。
- 編集が終わったら、左側のYAMLをコピーしてプロジェクトに戻すだけです。
開発の背景
複雑なパイプラインを構築する際、まず全体像を把握したいというニーズがありました。
また、YAMLの文法ミス（特に行末のコロン忘れやインデントミス）を防ぐために、GUIで構造を制御できるエディタがあれば便利だと考え制作しました。
おわりに
このツールが、複雑なCI/CDパイプラインを構築・メンテナンスする際の一助となれば幸いです。
他にも DevToolkits では、エンジニアの「ちょっとした作業」を楽にするツールを公開しています。ぜひチェックしてみてください。
Discussion