Skip to content

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. 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:

bash
code --install-extension miragon-gmbh.vs-code-bpmn-modeler

Open a diagram

Create or open any .bpmn or .dmn file in your workspace — the modeler opens automatically as the default editor for that file type.

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".

CommandKeybindingDescription
BPMN Modeler: Toggle Standard Text EditorCtrl+Shift+ESwitch between the graphical modeler and the raw XML view
BPMN Modeler: Copy Diagram as SVGCopy the current diagram to the clipboard as SVG
BPMN Modeler: Save Diagram as SVGSave a SVG file of the current diagram next to the BPMN file
BPMN Modeler: Change Modeler LanguageSwitch the modeler UI language
BPMN Modeler: Deploy DiagramOpen the Deployment sidebar for the current diagram
BPMN Modeler: Change Engine VersionSwitch between engine versions
BPMN Modeler: Migrate All BPMN DiagramsSwitch engine version for all BPMN diagrams in the workspace
BPMN Modeler: Display Logging InformationOpen 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.