BPMN Navigator

A VS Code extension that renders .bpmn, .bpmn2, and .dmn files as an interactive visual viewer — powered by bpmn-js.

Features

Opens every .bpmn / .bpmn2 file in a live read-only bpmn-js canvas with a clean white background:

Action	How
Pan the diagram	Click and drag on the canvas
Zoom in / out	Toolbar `＋` / `－` buttons or scroll wheel
Fit to viewport	Toolbar `⊡ Fit` button
Open raw XML	Toolbar `✎ Edit XML` button
Back / Forward	`◀` `▶` toolbar buttons or `Alt+←` / `Alt+→`

Click any gateway (highlighted in orange) to open a read-only side panel showing:

Gateway type — Exclusive (XOR), Inclusive (OR), or Parallel (AND)
Gateway name and element ID
All outgoing flows with:
- Target node name
- Flow name (if set)
- Condition expression (displayed in green code style)
- Default flow badge

Coloured nodes are clickable and navigate to referenced files:

Colour	Node type	Action
🟦 Teal	Call Activity	Click → opens referenced `.bpmn2` / `.bpmn`
🟣 Purple	Business Rule Task	Click → opens referenced `.dmn`
🟠 Orange	Service Task	Click → opens Kotlin / Java source file
🟢 Dashed teal	SubProcess	Click → opens referenced `.bpmn2`
🟣 Purple	Multi-Instance Process	Highlighted for visibility

Navigation history is maintained — use ◀ ▶ or Alt+← / Alt+→ to go back and forward.

.dmn files open as a formatted decision table viewer showing:

Open any .bpmn, .bpmn2, or .dmn file in VS Code.
The viewer panel opens automatically in the side panel.
Alternatively right-click the file in the Explorer → Open in BPMN Navigator.

Shortcut	Action
`Alt+←` / `Alt+→`	Back / Forward navigation
`Escape`	Close the side panel

Colour	Meaning
🟦 Teal border	Call Activity — click to navigate
🟣 Purple border	Business Rule Task (DMN) — click to navigate
🟠 Orange border	Service Task — click to open source
🟢 Dashed teal border	SubProcess — click to navigate
🟣 Solid purple border	Multi-Instance Process
🟡 Orange fill	Gateway — click to view conditions