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

Give a try to the ⏩ demo live environment. The demo let you load a BPMN file to see how bpmn-visualization renders it. Various versions of the lib are available.

If you need BPMN examples, you can use resources from

• the BPMN Model Interchange Working Group (BPMN MIWG)
  • https://github.com/bpmn-miwg/bpmn-miwg-test-suite
  • https://github.com/bpmn-miwg/bpmn-miwg-demos
• bpmn-visualization BPMN test diagrams

🌏 Browser Support

Chrome	Firefox	Safari	Edge
Yes	Yes	Yes	Yes

Note: Internet Explorer will never be supported.
The library may work with the other browsers, currently not list, if they support ES6.

🎨 Features

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

Implemented features:

• Rendering of the most common BPMN elements.
  Notice that there is currently no plan to support Conversation and Choreography.

Current implementation:

• The packaging of the library.

Future features:

• BPMN extensions
• The library extension points
• Display options for execution data with interactive capacities.

♻️ Usage

For now, we don't put the released library on npm. So you need to clone the repository in local, get the last tag, and build it.
⚠️ WE ARE CURRENTLY WORKING ON THE PACKAGING ⚠️

• Load necessary scripts

    <!-- load global settings -->
    <script src="./static/js/configureMxGraphGlobals.js"></script>
    <!-- load mxGraph client library -->
    <script src="./static/js/mxClient.min.js"></script>
    <!-- load BPMN Visualization library -->
    <script src="<YOUR_PATH>/bpmn-visualization-js/dist/index.es.js"></script>

• 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

    const bpmnContent = ``; // your BPMN 2.0 XML content

• Define the mxGraph container

    <div id="graph"></div>

• Initialize BpmnVisualization from the container

    console.log(`Initializing BpmnVisualization with container '${container}'...`);
    const bpmnVisualization = new BpmnVisualization(window.document.getElementById(container));  

• Load the bpmn content from BpmnVisualization

    console.log('Loading bpmn....');
    bpmnVisualization.load(bpmnContent);
    console.log('BPMN loaded');

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