CI/CD 可視化
GitHub Actions 可視化ツール
GitHub ActionsのワークフローYAMLをMermaid.jsで可視化します。ジョブ間の依存関係（needs）を解析し、フローチャートとして表示します。
graph TD
A[Start] --> B[Input YAML]
B --> C[Visualize]
ガイド
使い方・特徴
- 「Workflow YAML を入力」欄に GitHub Actions の YAML を貼り付けます。
- 「可視化する」ボタンをクリックすると、右側に図が表示されます。
- ジョブ間の依存関係（needs）が矢印（-->）として描画されます。
- 「Mermaidコードをコピー」で、GitHub の Markdown などに貼り付け可能な Mermaid コードを取得できます。
FAQ
よくある質問
大きなワークフローでも可視化できますか？
はい、可能ですが、ジョブ数が非常に多い（数十個以上）場合は、図が巨大になり読みづらくなることがあります。その場合は、ワークフローを分割して読み込むことを検討してください。
「needs」以外の依存関係も表示されますか？
現在はジョブ間の「needs」プロパティに基づく依存関係のみをサポートしています。ステップ間の実行順序などは表示されません。
入力した YAML は安全ですか？
はい。処理はすべてお使いのブラウザ内（クライアントサイド）で実行されます。サーバーには一切送信されませんので、機密性の高いワークフロー定義でも安心してご利用いただけます。
使い道
よくある使い道
ワークフローの依存構造の把握
複雑になった `needs` によるジョブの繋がりを可視化し、実行順序やボトルネックを直感的に把握できます。
プルリクエスト（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