Skip to content

README.md

Latest commit

 

History

History
160 lines (118 loc) · 7.62 KB

README.md

File metadata and controls

160 lines (118 loc) · 7.62 KB

Contributors Forks Stargazers Issues MIT License


Logo

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)