IntegrationLens

Visualize integration message flows and FSM state machines directly in VS Code.

No more switching to Eclipse-based toolkits just to inspect a .msgflow. FlowLens renders .msgflow, .subflow, and .fsm files as interactive node graphs right inside your editor.

Features

Message Flow Viewer (.msgflow / .subflow)

• Zero-config -- just open a file and see the graph
• Pan (drag), zoom (scroll), fit to view toolbar
• Drag nodes to rearrange the layout interactively
• Click any node to inspect all properties: queue names, ESQL references, compute modes, message domains
• Connections color-coded by terminal type; failure paths shown as dashed red lines
• View raw XML side-by-side with one click
• Nodes color-coded by category:

FSM Viewer (.fsm)

• State machine diagram with automatic circular layout
• States color-coded by stereotype: Normal (blue), Alert (red), OpsControl (yellow), Terminal (gray)
• Click any state to see transitions, events, actions, and constraints
• Transition labels show event / action pairs
• Guard conditions displayed on edges
• Self-transitions rendered as loops

Supported File Types

Installation

From VS Code Marketplace

Search for "FlowLens" in the Extensions sidebar, or:

code --install-extension shoaib.integrationlens

From VSIX (manual)

code --install-extension flowlens-0.1.0.vsix

From Source

git clone https://github.com/ShoaibKhan/flowlens.git
cd flowlens
npm install
npm run build
npm run package
code --install-extension flowlens-*.vsix

Usage

Sample Files

The samples/ directory includes example files you can open immediately:

• IBAN_Validation.msgflow -- 8-node validation flow with MQ input, compute, filter routing, and error handling
• PaymentFSM.fsm -- 12-state SWIFT outbound payment FSM with alert/opscontrol stereotypes and guard conditions

Tech Stack

• TypeScript + esbuild for fast, bundled extension code
• SVG rendering in VS Code webview (no heavy dependencies)
• Custom Editor API (CustomReadonlyEditorProvider) for seamless file association
• Regex-based XML parsing -- zero runtime dependencies beyond VS Code

Roadmap

• [ ] Edit mode -- modify node properties and save back to XML
• [ ] Search / filter nodes in large flows
• [ ] Minimap for navigation in complex flows
• [ ] ESQL preview on compute node click
• [ ] Dark / light theme auto-detection
• [ ] Export diagram as PNG / SVG
• [ ] SQL-based FSM import (FTM export format)

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

License

MIT

Built by Shoaib with Claude Code.