README.md

bpmn-js Transaction Boundaries Example

This example uses bpmn-js and camunda-transaction-boundaries. It implements a BPMN 2.0 modeler that allows you to visualize transaction boundaries in the diagram.

Usage

Add camunda-transaction-boundaries to your project:

npm install --save camunda-transaction-boundaries

Now extend the bpmn-js modeler with the transaction boundaries module (cf. src/app.js for details).

import BpmnModeler from 'bpmn-js/lib/Modeler';

import transactionBoundariesModule from 'camunda-transaction-boundaries';

var canvas = $('#js-canvas');

var bpmnModeler = new BpmnModeler({
  container: canvas,
  additionalModules: [
    transactionBoundariesModule
  ]
});

await bpmnModeler.importXML(xml);

var transactionBoundaries = bpmnModeler.get('transactionBoundaries');
transactionBoundaries.show();

Building the Example

You need a NodeJS development stack with npm installed to build the project.

To install all project dependencies execute

npm install

Build the example using webpack via

npm run all

You may also spawn a development setup by executing

npm run dev

Both tasks generate the distribution ready client-side modeler application into the public folder.

Serve the application locally or via a web server (nginx, apache, embedded).