Power Automate Flow Visualizer

A VS Code extension that renders Power Automate / Logic Apps workflow JSON files as interactive visual flowchart trees with built-in validation.

Features

Interactive flowchart — actions rendered as node cards connected by vertical lines
If/Switch branches displayed side-by-side with horizontal connectors
Scope/Foreach children in dashed-border containers
Click any node to expand its full action settings (inputs, expressions, metadata)
Zoom +/- and reset controls
Search by action name or type (highlighted with yellow glow)
Expand/Collapse all panels or by depth level (L1, L2, L3)
Keyboard shortcuts: Ctrl+F to search, Ctrl+/- to zoom

Duplicate JSON keys — detects keys that were silently dropped by JSON.parse (common from merge conflicts)
Invalid runAfter references — flags references to actions that don't exist in the same scope
Missing type property — detects actions with stripped "type" field
Results appear in VS Code's Problems panel with precise line numbers
Validate on save (configurable)

Open any Power Automate workflow .json file
Click the tree icon in the editor title bar, or:
- Command Palette → Flow Visualizer: Visualize Flow Tree
- Right-click in editor or Explorer → Visualize Flow Tree
The visual flowchart opens in a side panel

Command	Description
`Flow Visualizer: Visualize Flow Tree`	Open the visual flowchart tree
`Flow Visualizer: Validate Workflow`	Run all validation checks
`Flow Visualizer: Find Duplicate JSON Keys`	Scan for duplicate keys

Setting	Default	Description
`flowVisualizer.autoDetect`	`true`	Auto-detect workflow files
`flowVisualizer.defaultZoom`	`1`	Default zoom level
`flowVisualizer.validateOnSave`	`true`	Validate on file save

Power Automate cloud flows (Skills, Automated, Scheduled)
Logic Apps workflow definitions
Any JSON following the Microsoft.Logic/schemas/2016-06-01/workflowdefinition.json schema

cd tools/flow-visualizer
npm install
npm run compile

npm run package   # Creates .vsix file

code --install-extension power-automate-flow-visualizer-0.1.0.vsix

npm run watch     # Recompile on change

Press F5 in VS Code to launch the Extension Development Host for testing.