A VS Code extension that turns Workato recipe JSON into interactive workflow graphs. See your automation logic as a visual DAG — with click-to-inspect nodes, editor navigation, and support for complex control flow.
Works in VS Code, Cursor, Windsurf, and any VS Code fork.
- Visual workflow graphs — Nested recipe JSON rendered as clean, directed graphs with orthogonal edge routing
- Full control flow —
if/else,try/catch,foreachloops, and cross-recipe calls all visualized with swim lane layout - Click-to-inspect — Select any node to see its metadata, input/output schemas, connection info, and step inputs
- Editor navigation — "Go to Code" jumps from a graph node to the exact line in your JSON editor
- Cursor sync — Moving your cursor in the editor highlights the corresponding node in the graph
- Layout toggle — Switch between left-to-right and top-to-bottom layout directions
- Cross-recipe drill-down —
call_recipenodes open the target recipe in a new visualizer panel
code --install-extension src/releases/recipe-visualizer-1.0.0.vsixReplace code with cursor or windsurf as needed.
- Open a
.recipe.jsonfile - Click the preview icon in the editor title bar
- Or press Cmd+Shift+V (Mac) / Ctrl+Shift+V (Windows/Linux)
- Or right-click the file → "Visualize Recipe"
| Interaction | What happens |
|---|---|
| Click a node | Opens details panel with schemas, metadata, step inputs |
| Click "→ Code" | Navigates to the source JSON and focuses the editor |
| Click L-R / T-B | Toggles layout direction |
| Move cursor in editor | Highlights the corresponding graph node |
See src/README.md for build commands, architecture, project structure, and development workflow.
Contributions are welcome! Please open an issue to discuss your idea before submitting a PR.