Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bptlab/chor-js
An editor for BPMN 2.0 choreography diagrams based on bpmn-js
https://github.com/bptlab/chor-js
Last synced: 5 days ago
JSON representation
An editor for BPMN 2.0 choreography diagrams based on bpmn-js
- Host: GitHub
- URL: https://github.com/bptlab/chor-js
- Owner: bptlab
- License: mit
- Created: 2018-10-07T19:52:17.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-14T10:52:23.000Z (almost 4 years ago)
- Last Synced: 2024-05-22T07:50:15.917Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 4.66 MB
- Stars: 146
- Watchers: 6
- Forks: 24
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-starred - bptlab/chor-js - An editor for BPMN 2.0 choreography diagrams based on bpmn-js (others)
README
# chor-js
[](https://travis-ci.com/bptlab/chor-js)
### ***[:rocket: Try it live! :rocket:](https://bpt-lab.org/chor-js-demo/)***
View and edit [BPMN 2.0](https://www.omg.org/spec/BPMN/2.0.2/) choreography diagrams in the browser.
Based on [bpmn-js](https://github.com/bpmn-io/bpmn-js/).
[](https://github.com/bptlab/chor-js-demo)
: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](https://github.com/bptlab/chor-js-demo) 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]](http://ceur-ws.org/Vol-2469/ERDemo02.pdf)
> [[Bibtex]](https://dblp.org/rec/bibtex/conf/er/LadleifWW19)
## Installation
### a) Pre-Packaged
Just include the pre-packaged code in your webpage:
```html
```
You can find a sample webpage [here](./docs/prepackaged.html).
### b) NPM
Install the package via `npm install chor-js` and import chor-js in your application:
```javascript
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](https://github.com/bptlab/chor-js-demo).
A development setup is described there as well.
## Usage
Create a chor-js instance and link it to a canvas:
```javascript
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](https://github.com/bpmn-io/bpmn-js/), a lot of the instructions and techniques described there also work for chor-js.
## License
Licensed under the [MIT license](https://github.com/bptlab/chor-js/blob/master/LICENSE).