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.
