BPMN VS Code Modeler

Report Bug · Request Feature

About The Project

The BPMN VS Code Modeler is a VS Code extension for BPMN and DMN process modeling, built on top of bpmn-js. It targets teams working with Camunda 7 and Camunda 8 and integrates directly into your existing VS Code workflow.

Features

• BPMN Modeling: Create and edit BPMN 2.0 diagrams with full Camunda 7 and Camunda 8 support.
• DMN Modeling: Create and edit DMN decision tables.
• Element Templates: Convention-based element template discovery — place templates under <configFolder>/element-templates/ anywhere between your BPMN file and the workspace root. No extra project config file needed.
• Copy & Paste: Full clipboard support for BPMN elements within and across editor tabs, as well as text copy/paste inside diagram labels — working around VS Code webview clipboard restrictions.
• Deployment: Deploy BPMN/DMN diagrams and start process instances directly from a sidebar panel. Supports Camunda 7 and Camunda 8 with no auth, Basic Auth, and OAuth2 Client Credentials. Payload files are discovered by convention from <configFolder>/payloads/.
• Multi-Language UI: The modeler UI (palette, context pad, properties panel) is available in English, Deutsch, Français, Nederlands, Português (Brasil), Русский, 简体中文, and 繁體中文. Change the language via settings or the command palette.

Getting Started (Users)

Install the extension from the VS Code Marketplace and open any .bpmn or .dmn file. The modeler opens automatically as a custom editor.

Configuration

Search for "BPMN Modeler" in Settings (Ctrl+, / Cmd+,) to view all available options.

Setting	Default	Description
miragon.bpmnModeler.configFolder	.camunda	Folder name used for element template and payload file discovery
miragon.bpmnModeler.language	en	UI language for the modeler (e.g. de, fr, zh-Hans)
miragon.bpmnModeler.colorTheme	automatic	Color theme for the BPMN canvas (automatic or light)
miragon.bpmnModeler.favouriteBpmnElements	["bpmn:ServiceTask", ...]	BPMN element types to pin at the top of the append menu palette (max 6)
miragon.bpmnModeler.showTransactionBoundaries	true	Show transaction boundaries in the BPMN canvas (C7 only)
miragon.bpmnModeler.c8ApiVersion	v2	REST API version prefix for Camunda 8 deployment endpoints

Command Palette

Search for "BPMN Modeler" in the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) to view all available commands.

Command	Keybinding	Description
BPMN Modeler: Change Modeler Language		Change the UI language of the modeler
BPMN Modeler: Deploy Diagram		Open the Deployment sidebar for the current BPMN/DMN diagram
BPMN Modeler: Copy Diagram as SVG		Copy the current diagram to the clipboard as SVG
BPMN Modeler: Save Diagram as SVG		Create a SVG file of the current diagram next to the bpmn file
BPMN Modeler: Change Engine Version		Switch between engine versions (not between platforms C7 -> C8)
BPMN Modeler: Migrate All BPMN Diagrams		Switch the engine versions of all BPMN diagrams in the workspace
BPMN Modeler: Toggle Standard Text Editor	Ctrl+Shift+E	Open the XML text editor next to the bpmn modeler
BPMN Modeler: Display Logging Information		Open a console showing modeler log output

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions are greatly appreciated.

For a full contributor guide including setup, project structure, development workflow, code style, branching model, and CI/CD details, see docs/README.md.

Quick Start

1. Prerequisites: Node.js v20+, corepack enable, VS Code
2. Clone and install:

   git clone https://github.com/Miragon/bpmn-vscode-modeler.git
   cd bpmn-vscode-modeler
   corepack yarn install

3. Start watch mode: yarn dev
4. Launch the extension: Open the Run and Debug panel in VS Code, select "Run modeler-plugin", and press F5.

Opening a Pull Request

1. Open an issue with the tag enhancement or bug
2. Fork the repository
3. Create a feature branch (git checkout -b feat/my-feature)
4. Use semantic commit messages scoped to the affected workspace:

   feat(bpmn): add token simulation toolbar
   fix(dmn): correct decision table rendering
   

5. Push and open a Pull Request

Please use semantic commit messages as described in here.

(back to top)

Support

If you have questions or need support, reach out via email (info@miragon.io).

License

Distributed under the Apache License Version 2.0.

(back to top)