TypeScript icon, indicating that this package has built-in type declarations

    0.21.2 • Public • Published

    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:

    Planned features:

    • Library extension points

    🌏 Browsers Support

    We do our best to support recent versions of major browsers

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


    • 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' });

    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'});

    👤 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 © 2020-present, Bonitasoft S.A.

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

    Powered by

    statically.io logo

    statically.io (demo and examples live environments)

    surge.sh logo

    surge.sh (demo and documentation preview environments)


    npm i bpmn-visualization

    DownloadsWeekly Downloads






    Unpacked Size

    4.67 MB

    Total Files


    Last publish


    • csouchet
    • tbouffard