Operaton BPMN Editor

An opinionated VS Code extension for creating and editing BPMN 2.0 diagrams targeting Operaton and Camunda 7.

Compatibility note: Diagrams produced by this extension use the standard Camunda 7 XML namespaces (xmlns:camunda="http://camunda.org/schema/1.0/bpmn"). These diagrams are fully compatible with both Camunda 7 and Operaton (the community-driven Camunda 7 fork). They are not compatible with Camunda 8 / Zeebe.

Features

✨ Core BPMN Modeling

• Full BPMN 2.0 support with Operaton/Camunda 7 extensions
• Visual diagram editor with drag-and-drop
• Properties panel for element configuration
• Split-pane layout (diagram + properties)

🚀 Productivity Tools

• Token Simulation: Visualize process flow and test scenarios
• Transaction Boundaries: Visualize Camunda transaction boundaries and wait states
• Linting: Real-time BPMN diagram validation with configurable rules
• Element Templates: Reusable templates for common patterns
• XML Toggle: Switch between visual and XML editing
• SVG Export: Copy diagram as SVG to clipboard
• Auto-save: Automatic diagram persistence

🎨 Customization

• Dark theme support (experimental)
• Align to origin configuration
• Keyboard shortcuts

Installation

From VSIX

1. Download the latest .vsix file from GitLab Releases
2. Open VS Code
3. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS)
4. Type "Install from VSIX" and select the downloaded file

From Source

git clone https://gitlab.com/vasara-bpm/vscode-operaton-bpmn-js-modeler.git
cd vscode-operaton-bpmn-js-modeler
make package
# Install the generated .vsix file

Usage

Creating a New Diagram

1. Command Palette: Press Ctrl+Shift+P → "BPMN Modeler: Create New Diagram"
2. Explorer Context Menu: Right-click a folder → "BPMN Modeler: Create New Diagram"
3. Enter a filename (must end with .bpmn)

Editing Diagrams

• Open any .bpmn file
• The visual editor opens automatically
• Use the palette on the left to add elements
• Configure properties in the panel on the right

Keyboard Shortcuts

• Ctrl+Shift+E: Toggle XML text editor
• Drag elements from palette
• Right-click elements for context menu

Commands

Configuration

Settings available in VS Code preferences:

Linting Configuration

The editor supports BPMN diagram validation using bpmnlint.

To configure linting rules:

1. Run command: "BPMN Modeler: Create .bpmnlintrc"
2. Edit .bpmnlintrc in your workspace root
3. Configure rules and extends

Example .bpmnlintrc:

{
    "extends": "bpmnlint:recommended",
    "rules": {
        "label-required": "warn",
        "no-implicit-end-event": "error",
        "conditional-flows": "warn"
    }
}

Available rule sets:

• bpmnlint:recommended - Best practices and BPMN compliance
• bpmnlint:correctness - BPMN specification compliance only
• bpmnlint:all - All available rules

See bpmnlint documentation for complete rule list.

About

This project is based on Miranum IDE by Miragon, but has been forked and is now being developed independently using AI coding agents.

⚠️ Note: This project is developed primarily with AI coding agents. While functional, the codebase may evolve rapidly and contain patterns that differ from traditional human-maintained projects.

Why Operaton?

Operaton is a community-driven fork of Camunda 7, ensuring long-term open-source support. Because Operaton is API- and schema-compatible with Camunda 7, diagrams edited here (which use standard Camunda 7 xmlns:camunda extensions) run on both engines without modification.

Development

Prerequisites

• devenv (recommended) or Node.js 20+
• npm (included with Node.js)

Build

make build     # install dependencies and build extension + webview
make package   # create .vsix package

Quality checks

make format    # format code with prettier
make check     # verify code formatting
make test      # run tests with coverage

Watch mode

make watch-extension   # in terminal 1
make watch-webview     # in terminal 2

Then press F5 to launch the Extension Development Host.

Note: All make targets automatically install dependencies if needed.