Live Mermaid preview for Elsa Workflow JSON definitions, side by side with the editor. Supports Elsa v2.x and v3+.
Features
- Open Mermaid Preview to the Side —
cmd/ctrl+shift+P→ Elsa to Mermaid: Open Mermaid Preview to the Side. The preview updates as you edit the JSON. - Direction toggle — TD / LR / BT / RL inside the preview toolbar.
- Export to Markdown — produces a
<workflow>.mdwith the diagram inside a```mermaidfenced block, ready to drop into a README. - Theme-aware — the diagram follows your VS Code light/dark theme.
How it knows it's an Elsa workflow
Same detection the CLI/library uses: V3 if the JSON has a root.activities array,
V2 if it has an activities array whose first element has activityId. Anything else
shows an empty state.
Settings
| Setting | Default | Description |
|---|---|---|
elsaToMermaid.defaultDirection |
TD |
Flowchart direction the preview opens with. |
elsaToMermaid.previewDebounceMs |
200 |
Debounce window for live preview updates while editing. |
Architecture
Conversion runs in-process via the same Rust → WASM core that powers the
elsa-to-mermaid npm package and CLI. The wasm-node/ build is shipped inside the
extension — no network, no sandboxed shell-out, fully offline. Mermaid rendering
happens inside the webview using the bundled Mermaid 11 runtime.