Awesome
chor-js
:rocket: Try it live! :rocket:
View and edit BPMN 2.0 choreography diagrams in the browser. Based on bpmn-js.
:boom: Supports most of the elements in the choreography diagram standard
:boom: Imports/exports standard-compliant BPMN2 XML
:boom: 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.
Research
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]
Installation
a) Pre-Packaged
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.
b) NPM
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.
Usage
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');
Further Documentation
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.