Skip to content

GitHub Actions ワークフロービューア

VMark は GitHub Actions のワークフロー YAML をインタラクティブな有向非巡回グラフ(DAG)としてレンダリングし、ジョブ、ステップ、トリガーを構造化されたフォームから編集できるようにします — 元のファイルのコメント、アンカー、フォーマットを失うことなく行えます。

この機能は 2 つの場面で動作します:

  1. .github/workflows/ 配下のスタンドアロンの .yml ファイル(またはトップレベルの構造がワークフローに一致する任意のファイル): 左側にソース、右側にインタラクティブなキャンバスとフォームエディタを配置した分割ビュー。
  2. Markdown のコードフェンス: 三連バッククォートの yaml または yml フェンスブロックに認識可能なワークフローが含まれている場合、VMark はそれを mermaid ブロックと同じ方法でインライン Mermaid スタイルの DAG としてレンダリングします。

スタンドアロンのワークフローファイル

VMark で任意の .github/workflows/*.yml ファイルを開きます。右側のサイドパネルが自動的に開き、以下を表示します:

  • ワークフロー全体をインタラクティブな React Flow キャンバスとして表示(ジョブはノード、needs: 依存関係はエッジ)。
  • キャンバスの下に構造化エディタパネル。
  • エディタヘッダーに保存/破棄コントロール。

キャンバス内のジョブをクリックして編集します。ジョブ内のステップをクリックしてそのステップを編集します。

ジョブの編集

編集可能なフィールド:

フィールドパッチ種別
namejob.set
runs-onjob.set
ifjob.set

読み取り専用のサマリー: ステップ数、needs:、および uses:(再利用可能なワークフロージョブ用)。

ステップの編集

編集可能なフィールド:

フィールドパッチ種別
namestep.set
run(run-step 用)step.set
working-directorystep.set
ifstep.set
with: キーwith.set / with.remove

with: ブロックは、追加/編集/削除のキー/値の行としてレンダリングされます。キーの名前を変更すると、古いキーに対する with.remove の後に新しいキーに対する with.set が発行されます。

uses: ステップでは、アクション参照自体は読み取り専用です — 別のアクションが必要な場合はソースで変更してください。

トリガー

トリガーのサマリー(イベント、ブランチ、タグ、パス、cron、種別)はこのバージョンでは読み取り専用です。密度の高いトリガー構造を 1 行入力で編集すると情報が失われやすいため、専用のピッカーが提供されるまではソースで編集してください。

編集の保存

フィールドを変更するとメモリ上のパッチリストに編集がキューイングされます。保存ボタンには現在の数(例: 未保存 3 件)が表示されます。

保存をクリックすると、VMark は以下を行います:

  1. エディタから現在の YAML を読み取ります。
  2. キューイングされたすべてのパッチを YAML の CST(具象構文ツリー)に適用 — コメント、アンカー、既存のフォーマットを保持します。
  3. 入力したかのように結果をエディタに書き戻します。

ファイルは通常の意味でダーティになります。Cmd+S を押してディスクに書き込みます。

フォーマットの保持

デフォルトの保存パスは、すべてのパッチを yaml パッケージの CST API で実行します — コメント、アンカーノード、カスタムインデント、既存のフロー対ブロックスタイルの選択は保持されます。

正規化された再フォーマット出力を望む場合は、設定 → 詳細設定で 保存時に YAML フォーマットを保持 を無効にします。再フォーマットパスはコメントを削除するため、これはオプトインです。

Markdown 内のコードフェンス

YAML コードフェンスにワークフローを入力します:

markdown
```yaml
name: ci
on: push
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: pnpm test
```

VMark はワークフローの形状(ジョブごとに runs-on を持つトップレベルの jobs:)を検出し、ダイアグラムをインラインでレンダリングします。ダイアグラムは読み取り専用です — ワークフローを変更するにはソースを編集してください。

診断

VMark はパース+ Lint の診断をソースの隣に表示します:

コードのプレフィックス意味
GHA-PARSE-*YAML の形式不正、または必須キーの欠落
GHA-JOB-*ジョブレベルの問題(重複 ID、uses:steps: の競合)
GHA-NEEDS-*依存関係の問題(不明な参照、循環)
GHA-STEP-*ステップレベルの問題
GHA-EXPR-*不明なコンテキスト参照
GHA-MATRIX-*マトリックス展開の問題
GHA-SEC-*セキュリティ警告(例: pull_request_target のチェックアウトパターン)
GHA-ACTIONLINT-*actionlint がインストールされている場合に転送される

より豊富な式の診断のためには、actionlint をインストールし、設定 → 詳細設定で 利用可能な場合 actionlint を使用 をオンにしてください。

アクションメタデータ

公開 GitHub アクションを参照する uses: ステップに対して、VMark は各アクションの action.yml を取得して、構造化エディタに入力の説明を取り込めます。これはオプトインで、ディスクに 24 時間キャッシュされます。

設定 → 詳細設定で アクションメタデータを取得 を切り替えます。すべてのアクション参照を純粋なテキストのままにしたい場合は無効にします — ネットワークリクエストは行われません。

エクスポート

ワークフローのサイドパネルには、ヘッダーメニューからアクセスできる 3 つのエクスポートオプションが含まれています:

形式用途
MermaidREADME やその他の Markdown ドキュメントへの埋め込み。情報の損失あり: 実行ステータス、アクションアイコン、カスタムバッジ、マトリックス展開の詳細は省略されます。
SVGベクターグラフィックスを必要とするドキュメントへの埋め込み。HTML コンテンツに foreignObject を使用します。
PNGチャットや SVG がサポートされていない場所での共有。キャンバスの現在のズームでレンダリングされます。

この機能でないもの

VMark は GitHub Actions ワークフローを実行しません。これはビューア兼エディタです — 実行は GitHub の役割のままです。この機能は純粋にワークフロー YAML の閲覧、レビュー、作成のためのものです。