bpmn-visualization

BPMN Visualization

bpmn-visualization is a TypeScript library to visualize process execution data on BPMN diagrams with:

• additional display options for execution data (highlight some transitions, counters, and more)
• interactive capacities (mouse hover, click)

🎮 Demo and examples

Please check ⏩ live environment.
You will find there basic usage as well as detailed examples showing possible rendering customizations.

🎨 Features

The bpmn-visualization is in early development stage and is subject to changes prior to the 1.0.0 release.

Already available features:

• Supported BPMN Elements.
• Navigate through the BPMN diagram

Planned features:

• Display options for execution data with interactive capacities
• BPMN extensions
• Library extension points

🌏 Browsers Support

We do our best to support recent versions of major browsers

Chrome	Firefox	Safari	Edge
✔️	✔️	✔️	✔️

Note: Internet Explorer will never be supported.
The library may work with the other browsers. They must at least support ES6.

♻️ Usage

The library is available from NPM.
We support various module formats such as:

• IIFE: dist/bpmn-visualization.js
• ESM: dist/bpmn-visualization.esm.js
• CommonJS: dist/bpmn-visualization.cjs.js

⚒️ If you want to configure yourself:

• Install the dependency in your package.json file:

npm i bpmn-visualization

• In the HTML page:
  • bpmn-visualization script (replace {version} by the recent version)
  • define the container that displays the BPMN diagram. Here bpmn-container

    <script src="https://unpkg.com/bpmn-visualization@{version}/dist/bpmn-visualization.js"></script>
    ...
    <div id="bpmn-container"></div>

• Define your BPMN content using one of the following ways:
  • Copy/Paste directly the XML content in a variable
  • Load it from a url, like this example
  • Load from your computer, like the demo example

    let bpmnContent; // your BPMN 2.0 XML content
    // initialize BpmnVisualization and load the diagram
    const bpmnContainerElt = document.getElementById('bpmn-container');
    const bpmnVisualization = new bpmnvisu.BpmnVisualization(bpmnContainerElt);
    bpmnVisualization.load(bpmnContent);

💡 Want to know more about bpmn-visualization usage and extensibility? Have a look at the ⏩ live examples site.

For more technical details and how-to, go to the bpmn-visualization-examples repository.

🔧 Contributing

To contribute to bpmn-visualization, fork and clone this repository locally and commit your code on a separate branch.
Please write tests for your code before opening a pull-request:

npm run test  # run all unit & e2e tests

You can find more detail in our Contributing guide. Participation in this open source project is subject to a Code of Conduct.

✨ A BIG thanks to all our contributors 🙂

📃 License

bpmn-visualization is released under the Apache 2.0 license.
Copyright © 2020, Bonitasoft S.A.

Some BPMN icons used by bpmn-visualization are derived from existing projects. See the BPMN Support page for more details:

• draw.io (Apache-2.0)
• flaticon (freepikcompany license)
• noun project (mainly Creative Commons CCBY 3.0)

⚡ Powered by

statically.io (demo and examples live environments)