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)
Please check ⏩ live environment.
You will find there basic usage as well as detailed examples showing possible rendering customizations.
The bpmn-visualization is in early development stage and is subject to changes prior to the 1.0.0 release.
Already available features:
Planned features:
- Display options for execution data with interactive capacities
- BPMN extensions
- Library extension points
We do our best to support recent versions of major browsers
 Chrome |
 Firefox |
 Safari |
|
|---|---|---|---|
| ✔️ | ✔️ | ✔️ | ✔️ |
Note: Internet Explorer will never be supported.
The library may work with the other browsers. They must at least support ES6.
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.
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 testsYou 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 🙂
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)
statically.io (demo and examples live environments)