The bpmn-visualization project celebrates its 1st anniversary
Tags: typescript, bpmn, opensource, processanalytics
Published: 2021-05-25 14:38:35

To celebrate the first year of our work on the [**bpmn-visualization**](https://github.com/process-analytics/bpmn-visualization-js) library, here's a look back about what has been achieved.

`bpmn-visualization` is an open source TypeScript library for visualizing process execution data on [BPMN](https://www.omg.org/spec/BPMN/2.0.2/) diagrams.

From its first public release in March 2020 to the introduction of diagram interactions in January 2021, here it is: an overview of the first year achievements.

![2020 timeline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rf1gct67udbt0vmgqpyo.png)
*Template from [Simple Blackboard Background](https://slidesgo.com/theme/simple-blackboard-background)*



What can you already do today with bpmn-visualization?
======================================================

Below are some examples of what can be done with `bpmn-visualization`.
Visit the [dedicated GitHub repository](https://github.com/process-analytics/bpmn-visualization-examples) if you want a more complete overview of the available capabilities.



BPMN Support
------------

[BPMN diagrams](https://www.omg.org/spec/BPMN/2.0.2/) are at the foundation of the `bpmn-visualization` capabilities.

This animation shows the evolution of BPMN support over time. It uses the [B.2.0 diagram](https://github.com/bpmn-miwg/bpmn-miwg-test-suite/blob/9e8416f04db90c25d93a39d34719c9cdc62848c2/Reference/B.2.0.bpmn) of the [BPMN Model Interchange Working Group](https://github.com/bpmn-miwg/bpmn-miwg-test-suite) which promotes interoperability across BPMN vendors. The fully supported diagram would look like the [B.2.0 image reference](https://github.com/bpmn-miwg/bpmn-miwg-test-suite/blob/8ecdd934462640bd5e22b8fb7e931cd22fc38de6/Reference/B.2.0.png)

![Rendering evolution of the B.2.0 BPMN Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/003w6rol2kps961gywus.gif)
*Rendering evolution of the B.2.0 BPMN Diagram*



BPMN diagram navigation
-----------------------

In addition to BPMN model diagram rendering, `bpmn-visualization` provides several ways to explore and navigate through the BPMN diagrams. This is made available at load time or at runtime, through user interactions or API calls.

The navigation features are:

-   zoom: change the diagram scale to show details or have an overview of the diagram

-   fit: reset/set the zoom level and eventually translate the diagram (for instance, center the diagram)

-   pan: drag the diagram and move/translate it, to see hidden parts or change the position in the view

Navigation is particularly useful for large diagrams. Fitting the view to the screen provides a good overview of a large diagram, but it can be hard to see details.

You can *zoom* to highlight specific parts, then *pan* to view different diagram portions.

After navigating around, you may want to reset the zoom level and go back to a full diagram overview.

![Diagram navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouu86xwwi9r44fmdijme.gif)
*Navigation with the [miwg-test-suite C.2.0](https://github.com/bpmn-miwg/bpmn-miwg-test-suite/blob/cc75e467fd2b3009e67d4b24943591c66ce91a23/Reference/C.2.0.bpmn) BPMN diagram*



Theming
-------

Colors, font, icons...everything can be customized. Here is an example we created to promote the **Process Analytics** project participation at [HacktoberFest](https://hacktoberfest.digitalocean.com/) in October 2020.


![Hacktoberfest BPMN dark theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4wb12iw48jbshttkpha.png)
*"Hacktoberfest Participation" process with the Hacktoberfest dark theme*



Interacting with BPMN elements
------------------------------

This custom example demonstrates how to let users interact with a BPMN diagram when clicking on a task, or passing the mouse over a transition  between two elements.

In the following, we display BPMN information only, but you can use this feature to display execution data related to the current BPMN element:  execution time and details, pending user of an activity, current error at this stage of the process, and more.

![popovers on BPMN Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eieozba7sqwru5juehrw.png)

*Display popovers on user interaction with the BPMN Diagram*



Navigate between diagrams
-------------------------

Here is another kind of interaction with BPMN elements. When your main process has a call activity, you can navigate back and forth between the main process and the call activity subprocess.

![Navigate between diagrams](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unc2r31qo243r268sl7c.gif)

*"Procurement Processes with Error Handling" diagram from [BPMN 2.0 examples non-normative machine readable files](https://www.omg.org/cgi-bin/doc?dtc/10-06-03.zip)*



Path highlighting
-----------------

This custom example shows how to see which path in a process is the current running activity.

![miwg-test-suite C.1.1 path highlighting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3r49nuwnw7ad997n2r1.gif)

*Path highlighting with the [miwg-test-suite C.1.1](https://github.com/bpmn-miwg/bpmn-miwg-test-suite/blob/cc75e467fd2b3009e67d4b24943591c66ce91a23/Reference/C.1.1.bpmn) BPMN diagram*



What next in 2021?
==================

Now we are working on providing support to display process execution statistics, predictions, counters, badges (and much more) to aid monitoring, process optimization, and bottleneck detection scenarios for instance.

Visit our [bpmn-visualization GitHub repository](https://github.com/process-analytics/bpmn-visualization-js) for more details and follow us on Twitter [@ProcessAnalyti1](https://twitter.com/ProcessAnalyti1) to stay up to date with news and releases.


*This article was originally published at [LinkedIn](https://www.linkedin.com/pulse/bpmn-visualization-project-celebrates-its-1st-thomas-bouffard/).*