Skip to content
| Marketplace
Sign in
Visual Studio Code>Visualization>GitHub Actions Flow PreviewNew to Visual Studio Code? Get it now.
GitHub Actions Flow Preview

GitHub Actions Flow Preview

Jesse Jabez Arendse

|
2 installs
| (0) | Free
Visualize GitHub Actions workflow YAML as a draggable, zoomable job-dependency graph, right inside the editor
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

GitHub Actions Flow Preview

Open any .github/workflows/*.yml file and see it as a live, interactive job graph instead of raw YAML — no more tracing needs: chains by eye.

Features

  • Flow view — a compact graph of your jobs, laid out left-to-right in dependency order, with arrows showing what needs what.
  • Details view — the same graph, but every job card expands to show if: conditions, environment, matrix, permissions, env, and each step's run script or uses: action with its with: inputs.
  • Draggable cards — rearrange job cards freely; a "Reset layout" button snaps back to the auto-generated columns.
  • Pan & zoom — two-finger trackpad scroll (or click-drag) pans the canvas, Ctrl/Cmd+scroll or the zoom buttons zoom in and out, and a "fit to view" button frames the whole graph.
  • Minimap — jump to any part of a large workflow at a glance.
  • Live updates — the preview re-renders as you edit the YAML, no manual refresh needed.
  • Theme-aware — built entirely from VS Code workbench colors, so it matches your editor theme automatically.

Usage

  1. Open a workflow file under .github/workflows/.
  2. Click the eye icon in the editor toolbar (or right-click the file → Open GitHub Actions Preview) to open the graph alongside your YAML.
  3. Toggle between Flow view and Details view with the buttons in the top-right.

Notes

  • The preview is read-only — edits happen in the YAML file as usual, and the graph follows along.
  • Invalid YAML shows a parse-error panel instead of a blank preview.

License

MIT

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft