chor-js

Try it online!

View and edit BPMN 2.0 choreography diagrams in the browser. Based on bpmn-js.

Features

• model complex choreography diagrams
• create and reuse roles on the fly
• intuitively manage participant bands
• show, hide and swap messages
• import/export standard-compliant BPMN2 XML

chor-js supports most of the elements in the choreography diagram standard.

Installation

chor-js is packaged via npm.

Usage

Create a chor-js instance and link it to a canvas:

// Import modeler or viewer class
import ChorJS from 'chor-js/lib/Modeler';

let xml; // your BPMN2 choreography XML

// Setup modeler
let modeler = new ChorJS({
  container: '#canvas',
  keyboard: {
    bindTo: document
  }
});

// Load model
modeler.importXML(xml, {
  // [optional] ID of a specific choreography to display
  choreoID: '_choreo1'
}).then(() => {
  modeler.get('canvas').zoom('fit-viewport');
}).catch(error => {
  console.error('something went wrong: ', error);
});

For a more elaborate example of how to use the package, see our demo. A development setup is described there as well.

As the library is based on bpmn-js, a lot of the instructions and techniques described there also work for chor-js.

License

Licensed under the MIT license.