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.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
- Prerequisites: Node.js v20+,
corepack enable, VS Code
- Clone and install:
git clone https://github.com/Miragon/bpmn-vscode-modeler.git
cd bpmn-vscode-modeler
corepack yarn install
- Start watch mode:
yarn dev
- Launch the extension: Open the Run and Debug panel in VS Code, select
"Run modeler-plugin", and press F5.
Opening a Pull Request
- Open an issue with the tag
enhancement or bug
- Fork the repository
- Create a feature branch (
git checkout -b feat/my-feature)
- Use semantic commit messages scoped to the affected workspace:
feat(bpmn): add token simulation toolbar
fix(dmn): correct decision table rendering
- 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)
