BPMN Modeler

BPMN Modeler

BPMN 2.0 and DMN modeling for Camunda 7 and Camunda 8 — directly in VS Code.

Documentation · Report Bug · Request Feature

What it is

A BPMN (Business Process Model and Notation) diagram describes a business process as a flowchart of events, tasks, and decisions; a DMN (Decision Model and Notation) diagram captures the decision logic behind it as tables — both are open standards you can run on a workflow engine such as Camunda.

This extension opens .bpmn and .dmn files in a graphical editor inside VS Code, while the text file stays the source of truth — so save, Git, and diff keep working, and diagrams are versioned and reviewed in the same workflow as the rest of your project. No context switch into a separate desktop modeler.

Powered by bpmn.io — built on bpmn-js and dmn-js.

Getting started

Install BPMN Modeler (publisher miragon-gmbh) from the VS Code Marketplace, then get oriented in a couple of minutes:

1. Take the walkthrough first. The built-in Get Started with BPMN Modeler walkthrough is the recommended first stop — open it from Help: Get Started in the Command Palette. It walks you through creating, editing, and deploying a diagram.
2. Create a diagram. Make a new file ending in .bpmn (a BPMN 2.0 process) or .dmn (a DMN decision table). VS Code opens it straight in the graphical modeler instead of the plain text editor.
3. Open an existing one. Any .bpmn or .dmn file opens the same way.

Reading a diagram

New to the notation? Here is the 30-second version — full primers are linked under Develop and learn more.

A BPMN process reads left to right along its flow:

• Events (circles) mark what starts, happens during, or ends the process.
• Tasks (rounded rectangles) are the work being done.
• Gateways (diamonds) split or merge the flow to model decisions and parallel paths.
• Sequence flows (arrows) connect the elements in the order they run.

A DMN decision table reads as rows of rules: input columns on the left map to output columns on the right, so each row says "when the inputs look like this, the decision is that".

Editing a diagram

• Graphical editor for .bpmn / .dmn. Add elements from the palette or the context pad on a selected shape, connect them into sequence flows, and set each element's name, type, and Camunda 7 / Camunda 8 attributes in the Properties panel. Everything is written straight back into the underlying XML. Flip to the raw XML at any time with BPMN Modeler: Toggle Standard Text Editor (Ctrl+Shift+E); it also sits in the editor title bar.
• Element templates — convention-based discovery: drop templates under <configFolder>/element-templates/ anywhere between your BPMN file and the workspace root. No extra project config needed.
• Deploy to Camunda — open the Deploy Diagram view from the activity bar (the rocket icon) or run BPMN Modeler: Deploy Diagram from the editor title bar to deploy a diagram and start process instances against Camunda 7 or 8. Supports no auth, Basic Auth, and OAuth2 Client Credentials; payload files are discovered by convention from <configFolder>/payloads/.
• Compare two diagrams — select two .bpmn files in the Explorer (or right-click one, BPMN Modeler: Select for Compare, then Compare with Selected on another) to open a side-by-side read-only diff with element-level colour coding (added / removed / changed / moved) via bpmn-js-differ, synchronized pan/zoom, and a prev/next change navigator.
• Export — copy the current diagram to the clipboard as SVG, or save an SVG next to the source file, via the SVG commands below.
• Multi-language UI — palette, context pad, and properties panel available in English, Deutsch, Español, Français, Nederlands, Português (Brasil), Русский, 简体中文, and 繁體中文.

Commands

Search for "BPMN Modeler" in the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).

The compare commands — Select for Compare, Compare with Selected, and Compare Selected — are available from the Explorer right-click menu on .bpmn files rather than the Command Palette.

Settings

Search for "BPMN Modeler" in Settings (Ctrl+, / Cmd+,).

Troubleshooting

The modeler logs to the bpmn.modeler output channel. Open it from the Output panel (View: Output, then select bpmn.modeler) or with the command BPMN Modeler: Display Logging Information.

By default the channel shows Info and above. When a diagram, element template, or the webview misbehaves, raise the level to see the full trace: run Developer: Set Log Level…, pick bpmn.modeler, and choose Debug. Debug adds the per-message transport trace, the element-template discovery scan (which config folder was searched and what was found), and any warnings or errors the webview forwards (prefixed with [webview:<file>]).

Filing a bug? Set the log level to Debug, reproduce the problem, then copy the whole bpmn.modeler channel into the report — the Info-level breadcrumbs (editor opened/closed, deployment started/result, SVG export) plus the Debug transport trace let us reconstruct the exact steps that led to the failure. Credentials are never logged, so the channel is safe to paste.

Develop and learn more

• New to BPMN or DMN? Learn the notation at camunda.com/bpmn and camunda.com/dmn.
• Contributing — building from source and the dev loop are documented in CONTRIBUTING.md.

Support and feedback

• Documentation: https://miragon.github.io/bpmn-modeler/
• Bugs / feature requests: https://github.com/Miragon/bpmn-modeler/issues
• Contact: info@miragon.io

License

Distributed under the Apache License 2.0.