Github Workflowファイルを視覚的に生成できるサービス作ってみた

Github Workflowファイルを視覚的に生成できるサービス作ってみた

ワークフロー・ジョブ・ステップノードを接続することで簡単にGithub Actionsのワークフローファイルが生成できるサービスを最近はまっているReact Flowを使用して作りました。

画面

機能

ノードの接続

ワークフロー・ジョブ・ステップに対応するノードはすべて接続することができます。ワークフロー・ジョブ・ステップの順番でのみ接続することができます。

ノードの生成

サイドバーにある追加というラベルのボタンをクリックすることでノードを追加することができます。
逆にノードの削除はバックスペースキーをクリックすることで行えます。

ワークフローファイルの生成

生成したワークフローはyamlファイルでダウンロードするかクリップボードにコピーのどちらかでダウンロードすることができます。

ノードの接続状態の保存・復元

保存ボタンをクリックすると現在のノードの接続状態の保存を行うことができます。作成日が新しい順に表形式で表示されます。データはlocalStorageに保存されていますので、復元も容易に行えます。現在削除機能はありません。

最後に

正直AIがあればいらないとは思っていますが、面白いかなと思い作ってみました。改善点、感想などをお教え頂ければ幸いです。よろしくお願いいたします。