bpmn-visualization

BPMN Visualization

bpmn-visualization is a TypeScript library for visualizing 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 the ⏩ 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 change prior to the 1.0.0 release.

Already available features:

• Supported BPMN Elements.
• Navigate through the BPMN diagram
• Display options for execution data with interactive capacities

Planned features:

• Library extension points

🌏 Browsers Support

We do our best to support recent versions of major browsers

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

Notes:

• Internet Explorer and Legacy Edge will never be supported.
• Chromium based browsers should work (automatic tests are run with Chromium canary releases). In particular, the following browsers are known working with bpmn-visualization@0.13.0:
  • Brave 1.22.70
  • Chromium 89.0.4389.114
  • Opera 75.0.3969.93
• 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

📌 Project usage

• Install the dependency in your package.json file:

npm i bpmn-visualization

import { BpmnVisualization } from 'bpmn-visualization';

let bpmnContent; // your BPMN 2.0 XML content
// initialize BpmnVisualization and load the diagram
// 'bpmn-container' is the id of the HTMLElement that renders the BPMN Diagram
const bpmnVisualization = new BpmnVisualization({ container: 'bpmn-container'});
bpmnVisualization.load(bpmnContent);

You can set the BPMN content using one of the following ways:

• Copy/Paste directly the XML content in a variable
• Load it from an url, like this example
• Load from your computer, like the demo example

💠 Browser usage

• In the HTML page:
  • Load bpmn-visualization (replace {version} by the recent version)
  • Define the container that displays the BPMN diagram, here bpmn-container

    <script src="https://cdn.jsdelivr.net/npm/bpmn-visualization@{version}/dist/bpmn-visualization.min.js"></script>
    ...
    <div id="bpmn-container"></div>

• Put this Javascript snippet within the HTML page

    let bpmnContent; // your BPMN 2.0 XML content, see tips below
    // initialize BpmnVisualization and load the diagram
    const bpmnVisualization = new bpmnvisu.BpmnVisualization({ container: 'bpmn-container'});
    bpmnVisualization.load(bpmnContent);

👤 User documentation

The User documentation (with the feature list & the public API) is available in the documentation site.

⚒️ More

💡 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 © from 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)

surge.sh (demo and documentation preview environments)