bpmn-iobpmn-js - BPMN 2.0 for the web
View and edit BPMN 2.0 diagrams in the browser.
Installation
Use the library pre-packaged or include it via npm into your node-style web-application.
Usage
To get started, create a bpmn-js instance and render BPMN 2.0 diagrams in the browser:
const xml = '...'; // my BPMN 2.0 xml
const viewer = new BpmnJS({
container: 'body'
});
try {
const { warnings } = await viewer.importXML(xml);
console.log('rendered');
} catch (err) {
console.log('error rendering', err);
}Checkout our examples for many more supported usage scenarios.
Dynamic Attach/Detach
You may attach or detach the viewer dynamically to any element on the page, too:
const viewer = new BpmnJS();
// attach it to some element
viewer.attachTo('#container');
// detach the panel
viewer.detach();Resources
Build and Run
Prepare the project by installing all dependencies:
npm installThen, depending on your use-case you may run any of the following commands:
# build the library and run all tests
npm run all
# spin up a single local modeler instance
npm start
# run the full development setup
npm run devYou may need to perform additional project setup when building the latest development snapshot.
Related
bpmn-js builds on top of a few powerful tools:
- bpmn-moddle: Read / write support for BPMN 2.0 XML in the browsers
- diagram-js: Diagram rendering and editing toolkit
It is an extensible toolkit, complemented by many additional utilities.
License
Use under the terms of the bpmn.io license.