SF Flow Visualizer

Transform Salesforce Flow XML files into beautiful, interactive diagrams

🖼️ Preview

Visualize complex Salesforce Flows with an intuitive, modern interface

✨ Why SF Flow Visualizer?

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.

Key Features

• 🎨 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 - Real-time quality analysis powered by 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

What's New in 1.1.5

• 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.

What's New in 1.1.4

• 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

📋 Supported Flow Elements

🚀 Quick Start

Installation

1. Open VS Code
2. Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux)
3. Search for "SF Flow Visualizer"
4. Click Install

Or install directly from the marketplace

First Use

1. Open any .flow-meta.xml file in your Salesforce project
2. Click the graph icon (📊) in the editor title bar
3. Explore your flow visually!

📖 Usage

Opening a Flow

From Editor:

1. Open any .flow-meta.xml file
2. Click the graph icon (📊) in the editor title bar

From Explorer:

1. Right-click any .flow-meta.xml file
2. Select "SFFV: Visualize Flow"

From Command Palette:

1. Open a flow file
2. Press Cmd+Shift+P / Ctrl+Shift+P
3. Run "SFFV: Visualize Flow"

Navigation Controls

Understanding the Diagram

• 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)

⚙️ Extension Settings

This extension provides the following configurable settings:

Access settings via Preferences > Settings and search for "SF Flow Visualizer".

💡 Tips & Tricks

• 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

🐛 Troubleshooting

Flow doesn't display?

• Ensure the file has a .flow-meta.xml extension
• 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?

• Open an issue on GitHub

🗺️ Roadmap

• [ ] Export flow diagrams as images (PNG/SVG)
• [ ] Search and filter nodes within flows
• [ ] Flow comparison view (diff two versions)
• [ ] Integration with Salesforce CLI for live flows
• [ ] Flow metrics and complexity analysis

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Development Setup

# 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 package

📝 License

MIT License - see LICENSE for details.

⭐ Show Your Support

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

🙏 Acknowledgments

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

GitHub • Marketplace • Report Bug • Request Feature