This example uses bpmn-js and bpmn-js-transaction-boundaries. It implements a BPMN 2.0 modeler that allows you to visualize transaction boundaries in the diagram.
Add bpmn-js-transaction-boundaries to your project:
npm install --save bpmn-js-transaction-boundaries
Now extend the bpmn-js modeler with the transaction boundaries module (cf. app/index.js
for details).
import BpmnModeler from 'bpmn-js/lib/Modeler';
import transactionBoundariesModule from 'bpmn-js-transaction-boundaries';
var canvas = $('#js-canvas');
var bpmnModeler = new BpmnModeler({
container: canvas,
additionalModules: [
transactionBoundariesModule
]
});
bpmnModeler.importXML(xml, function(err) {
if (err) {
console.error(err);
} else {
var transactionBoundaries = bpmnModeler.get('transactionBoundaries');
transactionBoundaries.show();
}
});
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 browserify 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 dist
folder.
Serve the application locally or via a web server (nginx, apache, embedded).