Skip to content
An editor for BPMN 2.0 choreography diagrams based on bpmn-js
JavaScript HTML CSS
Branch: master
Clone or download
Latest commit 4254c92 Jan 7, 2020


Build Status

Try it online!

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

chor-js screencast


  • 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.


chor-js is packaged via npm.


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(() => {
}).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.


chor-js was presented at the ER Forum and Poster & Demos Session 2019 co-located with the 38th International Conference on Conceptual Modeling (ER 2019) in Salvador, Bahia, Brazil. You can find the peer-reviewed paper online.


Licensed under the MIT license.

You can’t perform that action at this time.