To help you get started, we've collected the most common ways that bpmn-js is being used within popular public projects.

bpmn-io / bpmn-js-properties-panel / test / spec / provider / bpmn / DocumentationSpec.js View on Github

it('should remove the documentation for an element', inject(function(propertiesPanel, selection, elementRegistry) {

    var shape = elementRegistry.get('ServiceTask_1');
    selection.select(shape);
    var textField = domQuery('div[name=documentation]', propertiesPanel._container);
    var businessObject = getBusinessObject(shape);

    // given
    expect(textField.textContent).to.equal('Task');

    // when
    TestHelper.triggerValue(textField, '', 'change');

    // then
    expect(textField.textContent).to.equal('');
    expect(businessObject.get('documentation').length).to.equal(0);
  }));
});

View more ways to use bpmn-js

bpmn-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

• Demo
• Issues
• Examples
• Forum
• Changelog

Build and Run

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 tests
npm run all

# spin up a single local modeler instance
npm start

# run the full development setup
npm run dev

You 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.