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'srunscript oruses:action with itswith: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.