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
Open a workflow file under .github/workflows/.
Click the eye icon in the editor toolbar (or right-click the file → Open GitHub Actions Preview) to open the graph alongside your YAML.
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.