EMXLens

Visualize FTM Finite State Machines from RSAD .emx files directly in VS Code.

No more launching Eclipse or RSAD just to inspect an FSM. EMXLens parses .emx (Eclipse UML2/XMI) files and renders every state machine as an interactive graph right inside your editor.

Features

FSM Viewer (.emx)

• Zero-config -- just open an .emx file and see the graph
• Pan (scroll), zoom (Ctrl+scroll), fit to view toolbar
• Click any state to inspect all properties: stereotype, constraints, description, transitions, guards, actions
• FSM selector dropdown to switch between multiple state machines in a single file
• Sugiyama-style layered layout for clean, readable graphs with minimal edge crossings
• Backward edges and self-transitions routed cleanly
• States color-coded by type:

Properties Panel

• Outgoing transitions with event, guard, action, and target state
• Incoming transitions for tracing flow backwards
• Stereotype badge with color indicator
• Constraints (Cancel / Resubmit / Release / Continue)
• Description from UML comments
• Raw XMI attributes for debugging

Supported File Types

Installation

From VS Code Marketplace

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

code --install-extension shoaib.emxlens

From VSIX (manual)

code --install-extension emxlens-0.1.0.vsix

From Source

git clone https://github.com/ShoaibKhan/EMXLens.git
cd EMXLens
npm install
npm run compile
npm run package
code --install-extension emxlens-*.vsix

Usage

Sample Files

The samples/ directory includes an example file you can open immediately:

• TxnFSM_SWIFT_OUT.emx -- Two FSMs: a 10-state SWIFT outbound transaction FSM with alert/terminal stereotypes, guards, and operator resolution paths, plus a 4-state inbound transmission FSM

Tech Stack

• TypeScript for extension code
• SVG rendering in VS Code webview (no heavy graph libraries)
• Custom Editor API (CustomReadonlyEditorProvider) for seamless .emx file association
• fast-xml-parser for robust XMI/XML parsing
• Sugiyama-style layout algorithm for layered graph positioning

Roadmap

• [ ] Search / filter states in large FSMs
• [ ] Export diagram as PNG / SVG
• [ ] Dark / light theme auto-detection
• [ ] Transition highlighting on state hover
• [ ] Multi-region support for composite states
• [ ] Side-by-side raw XML view
• [ ] Bundle with esbuild for smaller package size

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines.

License

MIT

Built by Shoaib with Claude Code.