Repository files navigation

View and edit BPMN 2.0 diagrams in the browser.

Use the librarypre-packagedor include itvia npminto your node-style web-application.

To get started, create abpmn-js instanceand renderBPMN 2.0 diagrams in the browser:

constxml='...';// my BPMN 2.0 xmlconstviewer=newBpmnJS({container:'body'});try{const{ warnings}=awaitviewer.importXML(xml);console.log('rendered');}catch(err){console.log('error rendering',err);}

Checkout ourexamples for manymore supported usage scenarios.

You may attach or detach the viewer dynamically to any element on the page, too:

constviewer=newBpmnJS();// attach it to some elementviewer.attachTo('#container');// detach the panelviewer.detach();

• Demo
• Issues
• Examples
• Forum
• Changelog

Prepare the project by installing all dependencies:

npm install

Then, depending on your use-case you may run any of the following commands:

# build the library and run all testsnpm run all# spin up a single local modeler instancenpm start# run the full development setupnpm run dev

You may need to performadditional project setup whenbuilding the latest development snapshot.

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 manyadditional utilities.

Use under the terms of thebpmn.io license.