Getting Started
The Miragon BPMN Modeler is a VS Code extension for editing BPMN 2.0 and DMN diagrams with full Camunda 7 and Camunda 8 support. It also provides a visual editor for bpmn-io form-js .form files. Camunda 7-compatible engines such as Operaton and CIB7 are also supported — they share the same BPMN metamodel.
Install
Install from the VS Code Marketplace, or from the command line:
code --install-extension miragon-gmbh.vs-code-bpmn-modelerOpen a diagram
Create or open any .bpmn, .dmn, or .form file in your workspace. The matching graphical editor opens automatically.
Run BPMN Modeler: New BPMN Model to scaffold a fresh diagram. The picker offers three choices: Camunda 7, Camunda 8, and Engine-neutral — the last scaffolds an untagged model that opens in the engine-neutral Design surface. Which mode an editor opens in is controlled by miragon.bpmnModeler.defaultMode; see Editor Modes for the View / Design / Implement surfaces and how they are remembered per editor.
Element templates
Drop Camunda element templates into a .camunda/element-templates/ folder next to your diagrams (or anywhere up the path to the workspace root). The modeler auto-discovers them and surfaces them in the Element Template Chooser and the Append Menu — no extra config needed.
The folder name is configurable via the miragon.bpmnModeler.configFolder setting.
Deploy
Open the Deploy Diagram view in the VS Code activity bar to push the current diagram directly to a Camunda 7 or Camunda 8 cluster — no CLI, no separate tool. See the Deployment page for details on engine credentials and one-click publish.
Switch language
The modeler supports 9 languages (English, German, French, Spanish, Dutch, Brazilian Portuguese, Russian, Simplified and Traditional Chinese). Set miragon.bpmnModeler.language in your VS Code settings, or run BPMN Modeler: Change Modeler Language from the command palette. See Language Support for the full list.
Commands
All commands are accessible via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) — search for "BPMN Modeler".
| Command | Keybinding | Description |
|---|---|---|
| BPMN Modeler: Toggle Standard Text Editor | Ctrl+Shift+E | Switch between the graphical modeler and the raw XML view |
| BPMN Modeler: Copy Diagram as SVG | Copy the current diagram to the clipboard as SVG | |
| BPMN Modeler: Save Diagram as SVG | Save a SVG file of the current diagram next to the BPMN file | |
| BPMN Modeler: Change Modeler Language | Switch the modeler UI language | |
| BPMN Modeler: Deploy Diagram | Deploy the current diagram to the active deployment target | |
| BPMN Modeler: Change Engine Version | Switch between engine versions | |
| BPMN Modeler: Migrate All BPMN Diagrams | Switch engine version for all BPMN diagrams in the workspace | |
| BPMN Modeler: Display Logging Information | Open a console showing modeler log output |
Next steps
- Tune the modeler to your workflow in Configuration.
- Explore the individual Features for architecture notes and deep dives.
- Contributing? See the Development guide.