Transform Salesforce Flow XML files into beautiful, interactive diagrams
Visualize complex Salesforce Flows with an intuitive, modern interface
Working with Salesforce Flows in XML format can be challenging. This extension brings your flows to life with an interactive, visual representation that makes understanding and debugging flows effortless.
- 🎨 Interactive Flow Diagram - Beautiful, modern visualization of your Salesforce Flows with color-coded elements
- 🔍 Detailed Node Inspector - Click any node to view its properties, connections, and raw XML in a convenient sidebar
- 🛡️ Flow Quality Analysis - Interactive Diagram: Pan, zoom, and auto-layout capabilities.
- Smart Centering:
- Initial Load / Home (0): Centers the Start Node at 90% scale, ensuring the flow's entry point is always in focus.
- Fit to View (F): Fits the entire flow content within the screen.
- Flow Analysis: Built-in quality scanner (based on lightning-flow-scanner) to detect best practice violations.
- 🔄 Smart Auto-Layout - Intelligent tree-based layout algorithm that handles complex flows, branches, and merges
- 🖱️ Smooth Navigation - Pan with drag, zoom with scroll wheel, and reset view with one click
- 📁 Multiple Access Points - Open from editor title bar, context menu, explorer, or command palette
- 🎯 Branch Visualization - Clear representation of decision outcomes, loop iterations, and fault paths
- ⚡ Fault Path Tracking - Red dashed connectors clearly show error handling and fault paths
- ✨ Animated Flow Lines - Optional flowing animation on connectors to visualize flow direction
- 🚀 Zero Configuration - Works out of the box with any Salesforce Flow XML file
- 🎭 Theme Support - Light, dark, and auto themes to match your VS Code setup
- 💾 Persistent Preferences - Theme and animation settings are remembered across sessions
- Sidebar: New sidebar for viewing node details and properties
- Conditions: Enhanced visualization of decision conditions and outcomes
- Fixed an issue where branch lines from different decision nodes could appear connected. Now, decision subtrees are visually distinct, ensuring clarity in complex flows.
- Header Redesign: Completely redesigned flow header with improved quality status visualization and cleaner layout
- Tooltips: Added comprehensive tooltips across the UI for better user guidance
- Error Boundary: Implemented robust error handling with friendly empty states and loading overlays
- Scan Results: Integrated flow quality scan results directly into the header for immediate visibility
- Routing Improvements: Optimized connector routing for straighter, cleaner lines
- Start nodes that only define scheduled paths now mirror Salesforce's canvas by auto-terminating the "Run Immediately" branch with an End node, so the async lane is the only vertical column
- Start connector parsing now ignores nested scheduled path connectors, which keeps branch labels ("Run Immediately", "Run Asynchronously", etc.) perfectly aligned even when the immediate path is missing
- Scheduled path connectors ("Run Immediately" / "Run Asynchronously") continue to route cleanly without the extra vertical drop introduced in prior versions
| Element | Type | Description |
|---|---|---|
| Trigger | Record-triggered, Scheduled, or Auto-launched | |
| 🖥️ Screen | UI | User interaction screens |
| 🔀 Decision | Logic | Branching with multiple outcomes |
| ✅ Assignment | Data | Variable assignments |
| 🔁 Loop | Iteration | For-each loops with next/end paths |
| ➕ Record Create | DML | Create new records |
| ✏️ Record Update | DML | Update existing records |
| 🔍 Record Lookup | Query | Get records from database |
| 🗑️ Record Delete | DML | Delete records |
| ⚡ Action | Invocable | Apex actions and quick actions |
| 📦 Subflow | Flow | Call another flow |
| ⏰ Wait | Pause | Wait events and scheduled paths |
| Error | Custom error handling |
- Open VS Code
- Press
Cmd+Shift+X(Mac) orCtrl+Shift+X(Windows/Linux) - Search for "SF Flow Visualizer"
- Click Install
Or install directly from the marketplace
- Open any
.flow-meta.xmlfile in your Salesforce project - Click the graph icon (📊) in the editor title bar
- Explore your flow visually!
From Editor:
- Open any
.flow-meta.xmlfile - Click the graph icon (📊) in the editor title bar
From Explorer:
- Right-click any
.flow-meta.xmlfile - Select "SFFV: Visualize Flow"
From Command Palette:
- Open a flow file
- Press
Cmd+Shift+P/Ctrl+Shift+P - Run "SFFV: Visualize Flow"
| Action | Control |
|---|---|
| Pan | Click and drag on canvas |
| Zoom In/Out | Scroll wheel or toolbar buttons |
| Reset View | Click home icon (🏠) in toolbar |
| Fit to View | Click fit icon or press F |
| Toggle Auto-Layout | Click layout button in toolbar |
| Toggle Animation | Click animation button or press A |
| Toggle Theme | Click theme button or press T |
| View Node Details | Click on any node |
| Toggle Sidebar | Click arrow on left edge |
- Solid gray lines: Normal flow paths
- Red dashed lines: Fault/error handling paths
- Branch labels: Show decision outcomes (e.g., "Match Found", "Default")
- Loop connectors: "For Each" (into loop) and "After Last" (exit loop)
This extension provides the following configurable settings:
| Setting | Default | Description |
|---|---|---|
sf-flow-visualizer.autoLayout |
true |
Automatically arrange nodes for optimal visibility when coordinates are missing |
sf-flow-visualizer.theme |
light |
Visual theme: light, dark, or auto (follows VS Code theme) |
Access settings via Preferences > Settings and search for "SF Flow Visualizer".
- Keyboard Navigation: Use your mouse wheel to zoom in/out for better focus on specific flow sections
- Node Details: Click on any node to see its full configuration, including formulas and filters
- Branch Analysis: Follow the color-coded paths to understand decision logic and loop iterations
- Error Handling: Red dashed lines show fault paths - perfect for reviewing error handling logic
- Performance: Large flows are handled efficiently with optimized rendering
Flow doesn't display?
- Ensure the file has a
.flow-meta.xmlextension - Check that the XML is valid Salesforce Flow metadata
Layout looks odd?
- Try clicking the "Auto-Layout" button in the toolbar
- Reset the view with the home icon (🏠)
Still having issues?
- Export flow diagrams as images (PNG)
- Search and filter nodes within flows
- Flow comparison view (diff two versions)
- Integration with Salesforce CLI for live flows
- Flow metrics and complexity analysis
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
# Clone the repository
git clone https://github.com/Avinava/vscode-sf-flow-visualiser.git
cd vscode-sf-flow-visualiser
# Install dependencies
npm run install:all
# Start development
npm run watch # Terminal 1: Watch extension
npm run dev:webview # Terminal 2: Dev server
# Build and package
npm run build
npm run packageMIT License - see LICENSE for details.
If this extension helps you work with Salesforce Flows more efficiently, please:
- ⭐ Star the GitHub repository
- ✍️ Leave a review on the marketplace
- 🐦 Share with your team and the Salesforce community
Built with modern web technologies:
- React - UI framework
- Vite - Lightning-fast build tool
- Tailwind CSS - Utility-first styling
- Lucide Icons - Beautiful icon set
- GitHub Copilot - AI pair programmer that helped build and polish this extension
Made with ❤️ for the Salesforce Developer Community