README

BPMN Visualization

BPMN Visualization example

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:

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

Some BPMN icons used by bpmn-visualization are derived from existing projects. See the BPMN Support documentation 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)

Usage no npm install needed!