Using BPMN Visualization in R
Published: 2021-10-14 13:53:05

With the [bpmn-visualization TypeScript library](https://www.npmjs.com/package/bpmn-visualization), you can visualize process execution data on [BPMN](https://www.omg.org/spec/BPMN/2.0.2/) diagrams in a web browser, by adding custom overlays and customizing the style of the diagram.

The new [BPMN Visualization - R Package](https://github.com/process-analytics/bpmn-visualization-R) is being developed to offer another way to visualize process execution data in R.

Let's see how it works.

## Prerequisites

[R Studio](https://www.rstudio.com/) or [R Console](https://cran.r-project.org/)

## Installation

First, you need to install the package from Github:
{% gist https://gist.github.com/csouchet/ddacac5ac6e68ff748e6147aeb4e35a0 %} 

## Load a BPMN file

The **bpmnVisualization** package accepts a BPMN file in XML format.
There are several ways to load this file. However, in this article, we will focus on how to load an example file from the package.
{% gist https://gist.github.com/csouchet/80315c17a1ef4cb0b0e24d24b95e353e %} 

You will find the other ways to load a BPMN file in the [README](https://github.com/process-analytics/bpmn-visualization-R#load-the-bpmn-file) of the package.

## Display the BPMN diagram

At the moment, there are 2 ways to display the BPMN diagram: **Just the diagram without overlay** or **The diagram with overlay(s)**.

### Just the diagram
{% gist https://gist.github.com/csouchet/34452ccfcddb037a5af6d86d2e4712c3 %} 

![Just the diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oh74v2la1vyalm3eoqsa.png)

### The diagram with overlays
{% gist https://gist.github.com/csouchet/8a5bf780d3dc83d13a33b5ef03b95a68 %} 

![The diagram with overlays](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oivuulqir8ta1t3se3zi.png)

Overlays customization and positioning will be possible in a future version of the package.

## Integrate in a Shiny App

You can also use the **bpmnVisualization** package in a [Shiny app](https://shiny.rstudio.com/).

If you are not familiar with Shiny, it is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in [R Markdown](http://rmarkdown.rstudio.com/) documents or build [dashboards](http://rstudio.github.io/shinydashboard/).

The following example displays a BPMN diagram provided as an example by the package, with an overlay on top of a BPMN element.
{% gist https://gist.github.com/csouchet/39a1d93fd28a78070b88050669fb4204 %} 

![Shiny App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaycw9fu79h8x4th722m.png)

## Participation in Hacktoberfest 2021

If you want to participate in Hacktoberfest to promote Open Source development and you don't know where to make a contribution, you can try with the labeled [issues](https://github.com/process-analytics/bpmn-visualization-R/issues?q=is%3Aopen+is%3Aissue+label%3Ahacktoberfest) from the **BPMN Visualization - R Package** repository.

We are also waiting for contributions in other repositories. For more information, see this [article](https://medium.com/@process-analytics/hacktoberfest-2021-with-process-analytics-44eecc238ead).

If you have any questions - let us know directly on [GitHub](https://github.com/process-analytics?type=source) issues or via [Twitter](https://twitter.com/ProcessAnalyti1).

![Hacktoberfest 2021](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iq13qsjqv1wvglq89a9v.gif)

## Conclusion

Now, you have everything you need to start your first project with [BPMN Visualization in R](https://github.com/process-analytics/bpmn-visualization-R).

Thank you for reading and I hope I helped or inspired you 😊

We also plan to publish the BPMN Visualization package in [CRAN](https://cran.r-project.org/) soon.

Follow us to keep up to date on the latest news:
-   Website: [https://process-analytics.dev](https://process-analytics.dev/)
-   Twitter: [@ProcessAnalyti1](https://twitter.com/ProcessAnalyti1)
-   GitHub: [https://github.com/process-analytics](https://github.com/process-analytics)