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

💥 Supports most of the elements in the choreography diagram standard
💥 Imports/exports standard-compliant BPMN2 XML
💥 Provides features specifically designed for choreography modeling

Check out our demo application for an example web application using chor-js, adding additional features like a model validator and properties panel.

If you use chor-js in an academic setting, please cite our demo paper:

Jan Ladleif, Anton von Weltzien, Mathias Weske: chor-js: A Modeling Framework for BPMN 2.0 Choreography Diagrams. ER Forum/Posters/Demos (2019) [PDF] [Bibtex]

Just include the pre-packaged code in your webpage:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chor-js@latest/dist/assets/chor-js.css">
<script src="https://cdn.jsdelivr.net/npm/chor-js@latest/dist/chor-js-modeler.min.js"></script>
<!-- ... or 'viewer' or 'navigated-viewer'! -->

You can find a sample webpage here.

Install the package via npm install chor-js and import chor-js in your application:

import ChorJS from 'chor-js/lib/Modeler';
// ... or 'Viewer' or 'NavigatedViewer'!

You can include the bundled style files from dist/assets/chor-js.css or bundle the assets folder on your own.

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

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

const xml; // your BPMN2 choreography XML
// Setup modeler
const modeler = new ChorJS({
  container: '#canvas',
  keyboard: {
    bindTo: document
  }
});
// Load model (optionally with a specific diagram ID)
await modeler.importXML(xml, '_choreo1');

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

Licensed under the MIT license.