DyVProMo - A Lightweight Web-Based Tool for
the Dynamic Visualization of Additional
Information in Business Process Models
Florian Gallik1, Michael Winter1, Yusuf Kirikkayis1, R¨
udiger Pryss2, Manfred Reichert1
1Institute of Databases and Information Systems, Ulm University, Germany
2Institute of Clinical Epidemiology and Biometry, University of W¨
urzburg, Germany
{florian-1.gallik, michael.winter, yusuf.kirikkayis, manfred.reichert}@uni-ulm.de, ruediger.pryss@uni-wuerzburg.de
Abstract—Business process models represent detailed informa-
tion regarding the documentation, optimization, and automation
of organizational processes. With an increasing level of detail,
such models become rapidly complex, thus hindering their
correct comprehension (i.e., both, the efficiency and accuracy
of understanding decrease). Furthermore, once a process model
is created, the view on it and the respective level of detail remains
rigid for all stakeholders. However, a process model may contain
information, which is less relevant for certain stakeholders (e.g.,
domain experts). Consequently, the comprehension of process
models becomes more difficult, as all information in a model
needs to be read. Existing modeling systems do not offer the
functionality to dynamically change the level of detail of a process
model according to the stakeholders’ preferences. To address
this issue, the work at hand presents the Dynamic Visualization
of Process Models (DyVProMo), a lightweight web-based tool
that enables the dynamic visualization of information in process
models expressed in terms of the Business Process Model and
Notation 2.0.
Index Terms—Business Process Models, BPMN 2.0, Process
Model Viewer, Dynamic Visualization
I. INTRODUCTION
Business process models constitute crucial artifacts for orga-
nizations from different domains [1]. These models represent
and visualize complex processes, including their activities,
data, functions, and resources [2], and establish a common un-
derstanding among the involved stakeholders [3]. Furthermore,
they provide means for collaboration and offer additional
merits concerning process automation and optimization [4].
The Business Process Model and Notation (BPMN) 2.0 is
the de facto standard for specifying comprehensible process
models [5]. Aside from the basic modeling elements for
the representation of processes in visual models, BPMN 2.0
provides additional elements to enrich a process model on
a fine-grained level. More specifically, additional information
and artifacts (e.g., annotations) may be included in a process
model to enhance their level of detail, thus fostering model
pragmatics [6]. Especially, novices benefit from additional
details through a better process model comprehension [7].
BPMN 2.0 also enables the modeling of the data perspec-
tive fostering the implementation of processes in information
systems [2]. However, such a comprehensive level of detail
is not required for all stakeholders. Especially, large process
models are challenging with respect to comprehension [8].
Usually, the display of process model within a tool is
rather static [9]. With existing process modeling tools, changes
can only be made through remodeling in the modeling tool.
Consequently, with current solutions it is neither possible to
dynamically hide information from the process model nor to
visualize additional information (e.g., on process semantics)
afterwards. As a result, the final process model in its given
level of detail needs to be comprehended by all stakeholders
[10]. In general, a process model should provide an adjustable
level of detail, which fosters correct process model com-
prehension. According to [11], it is challenging to find a
user-friendly and easy-to-comprehend model representation. In
particular, the ability to comprehend a process model correctly
is based on personal factors such as expertise in working
with process models [12]. This paper introduces Dynamic
Visualization of Process Models (DyVProMo), a lightweight
web-based tool enabling the dynamic visualization of model
information at run-time. Its process model viewer is able
to change the level of detail of a process model according
to users’ needs. DyVProMo shall foster the comprehension
of process models based on specific visualization techniques
(e.g., coloring).
Section II discusses related work, whereas Section III
introduces the web-based application. Finally, Section IV
summarizes the paper and gives an outlook on future work.
II. RELATED WORK
[13] reviews literature dealing with the visualization of
process models. No features for dynamically visualizing in-
formation in process models are discussed.
Tools, such as proView, rely on sophisticated algorithms
for changing the view of process models (e.g., aggregating
activities or abstracting process models) [14]. The proView
framework generates personalized views based on pre-defined
parameters [15]. However, the generated views are rigid, and
changes cannot be made dynamically at run-time.
Proviado [16] applies a configurable XML file to customize
the visualization of process models. Style adjustments as well
as the assignment of specific symbols in process models can be
defined. However, changes of the model visualization require
changes of its XML representation.
Concerning model comprehension, [17] shows that the col-
oring of process models fosters their comprehension. Related
to this are the results reported by [18], which presents an
approach coloring the activities according to their importance.
Additional text in process models can be useful for novices
regarding correct model comprehension [19]. [20], [21] apply
annotations to enrich process models with details. However, a
high level of detail might hinder process model comprehen-
sion for certain stakeholders, as non-relevant information is
displayed as well.
Existing tools, such as Signavio [22] and ARIS Express [23]
only allow for a static coloring of pools and lanes in process
models.
To the best of our knowledge, there is no tool that allows the
process model viewer to change the level of detail dynamically
at run-time. None of the discussed approaches support the
process model viewer with the dynamic highlighting (i.e.,
coloring) of swimlanes.
III. SYSTEM OVERVIEW
This section describes the main functions, architecture, and
demonstration of DyVProMo.
A. Main Functions
DyVProMo provides the following three main functions to
support an end user who is viewing a process model in the
comprehension of process models:
•Highlighting: Process model viewers may use this func-
tion to highlight selected swimlanes or pools in a process
model. One may select any number of swimlanes, even
nested highlighting is supported.
•Explanation: This function is intended to support
novices in the correct comprehension of process models.
An explanation in the form of an overlay is shown for
each model element that appears for the first time in
the displayed process model. In the current DyVProMo
version, the explanation is limited to the display of
element names.
•Visibility of BPMN Elements: The visibility of process
model details, which are displayed as annotations and
data flow components, may be changed dynamically.
Hereby, the sequence flow is not affected. In detail,
process model information can be shown and hidden dy-
namically. The BPMN elements are selected and grouped
based on their type.
B. Architecture
DyVProMo is implemented as a lightweight web-based
software application. In particular, it is platform-independent
and accessible to the general public via GitHub. DyVProMo
is designed as a React single-page application to improve
performance and response times between client and server.
The basic structure of DyVProMo is created with create-react-
app1, which is available as a Node.js2package. The latter
1https://github.com/facebook/create-react-app
2https://nodejs.org/
is responsible for creating mandatory directories and files.
In addition, the configuration of DyVProMo is accomplished
automatically by this package. Create-react-app utilizes the
JavaScript compiler Babel3and module bundler Webpack4to
create a transpiled and bundled single file that contains the
entire web-based tool. DyVProMo is hosted by a Node.js web
server. Once the file and, thus, all components are successfully
transferred to the client browser, no further requests become
necessary for the deployed server. The web-based application
runs on the client-side in a web browser. Note that offline
support is provided as well. All manipulations are processed
and executed on the client-side. Fig. 1 shows the individual
components of DyVProMo and their interactions.
Web-based Tool
Styling
Bootstrap Sass
ManipulationBPMN Viewer
JavaScript
React
Bpmn.io
Fig. 1. System Overview
Bpmn.io5is a configurable open-source BPMN 2.0 frame-
work, which is responsible for rendering the BPMN 2.0
process models. For example, Bpmn.io enables a process
model viewer to navigate and zoom inside process models. The
manipulation (i.e., switching between element visibility and
highlighting of swimlanes) is implemented with JavaScript.
The User Interface (UI) components are realized with Re-
act. These UI components interact via JavaScript with the
framework Bpmn.io. DyVProMo is mostly styled with the
front-end framework Bootstrap 56. Only the UI components
of DyVProMo that need custom styling are designed using
Syntactically Awesome Stylesheets7(Sass).
C. Demonstration
DyVProMo8is divided into two different screens. On the
home screen, a process model viewer can upload a BPMN 2.0
process model that may contain comprehensive information
(e.g., heavy use of annotations and data flows). As a prerequi-
site, the model must be in a valid XML format. The upload of
the process model is realized either with file selection or by
3https://babeljs.io/
4https://webpack.js.org/
5https://bpmn.io/
6https://getbootstrap.com/
7https://sass-lang.com/
8Demo video of the web-based application: https://tinyurl.com/pukhc7w
Fig. 2. Main Screen Illustrating a Process Model on the Highest Detail Level
drag and drop. After the file upload, validation and processing,
the view of DyVProMo switches automatically to the main
screen.
The core view of the web-based application is defined as the
main screen. It is used to show and manipulate the uploaded
process model. Different control elements are provided. Fig.
2 illustrates the main screen on the highest detail level. The
process model (cf. Fig. 2A) is always displayed in centered
mode across the entire screen. The visibility of certain process
model elements can be controlled either with the provided
detail slider (cf. Fig. 2B) or the more precise toggle switches
(cf. Fig. 2D). For the detail slider, certain process model
elements are selected and grouped based on their type. The
groups are called levels. There are four predefined levels,
which may be adjusted individually with the help of the detail
slider. Each level change has an effect on the visibility of
certain process model elements. The goal of selecting these
specific elements and dividing them into four levels is to
reduce the total number of elements and, thus, to increase
the efficiency of understanding. At the same time, novices
should be encouraged to understand the notation and process
by adding information. As the UI should be easy to use and
not overloaded, this limitation is made. The following list
shows which process model elements are displayed in each
level together with a corresponding use case.
•Level 0: Explanations, Annotations, Data Objects, and
Data Stores are hidden. Model viewers experienced with
BPMN 2.0 and the underlying process model, who are not
interested in the technical view benefit from the removed
additional information and data view at this level.
•Level 1: Explanations and Annotations are hidden,
whereas Data Objects and Data Stores are displayed.
Level 1 is mainly intended to support experienced tech-
nical users when implementing the data view.
•Level 2 (Default): Explanations are hidden. The process
model itself is displayed as modeled.
•Level 3: In addition to the process model, explanations
referring to the used model elements are displayed. This
level fosters novices with little BPMN 2.0 knowledge
to understand the notation. It provides memory aids for
infrequent elements to experienced users.
The current level is shown in the lower-left corner (cf. Fig.
2C), and can be derived from the position of the detail slider.
The process model viewer is able to change the level of
detail with the provided toggle switches, if the predefined
levels do not provide the required view. Moreover, DyVProMo
supports the creation of custom views. The colored markings
of Fig. 2 indicate which model elements can be displayed
or hidden with the corresponding switches. Changing the
level of detail of the message flow may change the control
flow. Therefore, it is not considered in Levels 0-3. However,
switching the visibility of message flows represents a useful
feature, if there are numerous message flows intersecting
activities and other elements.
The highlighting of the swimlanes can be controlled via the
component in the upper right corner (cf. Fig. 2E). This control
element dynamically lists all pools as well as swimlanes, and
enables the process model viewer to highlight any number of
swimlanes and the combination thereof with toggle switches.
Highlighting enables process model viewers to find their tasks
immediately. Thus, this feature is useful for viewers regardless
of their role and serves to increase efficiency. In order to keep
the user interface as intuitive as possible and at the same
time provide potential benefits for as many model viewers as
Fig. 3. Main screen in the default level with highlighted lane.
possible, highlighting is limited to swimlanes. Fig. 3 shows a
complex process model in the default level with a highlighted
swimlane.
In summary, the lightweight web-based characteristic of
DyVProMo allows for an easy access through the browser.
DyVProMo supports novices in comprehending BPMN 2.0
process models by assisting them with explanations and
switchable annotations. Experts working frequently with pro-
cess models can hide information to focus on relevant aspects
of a process model. The optional data view is useful for
users being responsible for the technical implementation of a
process model in an information system. For complex process
models, the highlighting of individual swimlanes is useful, as
the appropriate pool or lane can be identified immediately.
DyVProMo offers a wide range of visualizations for process
model viewers according to their preferences. The effort for
process modeling, in turn, is reduced, as different stakeholder
views do not have to be explicitly modeled. Currently, changes
to the process model are not persistent and, therefore, leave
room for trying out and exploring.
IV. SUMMARY AND OUTLOOK
DyVProMo9is a lightweight web-based tool that enables
a user to dynamically change the level of detail in BPMN
2.0 process models. This primary function is realized with
different components (i.e., detail slider and toggle switches),
which show and hide individual BPMN 2.0 elements such
as annotations, data stores, and data objects. In addition,
it becomes possible to display element explanations with
overlays and to highlight individual swimlanes with colors.
DyVProMo supports experts and novices in correctly compre-
hending process models. Novices may view additional details
and are supported with further explanations about the used
model elements. In turn, experts may reduce or increase the
level of detail to focus on relevant information needed for
completing the task at hand. The component-based design of
DyVProMo enables the easy enrichment of additional features.
Finally, DyVProMo is platform-independent and can be used
in offline mode as well.
9The source code of DyVProMo is provided at GitHub:
https://github.com/elmurd0r/DyVProMo
In future work, DyVProMo will be extended with additional
features to further enhance its usability. Another extension will
be a persistent storage. Thus, changes of a process model
may be stored and loaded. Moreover, we want to introduce
specific settings to define custom levels of detail. In addition,
the support of other visual process modeling notation will be
the subject of future work. Finally, a first empirical study is
planned in order to evaluate the usability and acceptance of
the web-based application.
REFERENCES
[1] M. Kocbek Bule, G. Jost, M. Hericko, and G. Polanˇ
ciˇ
c, “Business
process model and notation: The current state of affairs,” ComSIS,
vol. 12, pp. 509–539, June 2015.
[2] J. Recker, M. Rosemann, M. Indulska, and P. Green, “Business process
modeling- a comparative analysis,” JAIS, vol. 10, April 2009.
[3] J. Recker, “Opportunities and constraints: The current struggle with
bpmn,” Business Process Management Journal, vol. 16, February 2010.
[4] M. Indulska, P. Green, J. Recker, and M. Rosemann, “Business process
modeling: Perceived benefits,” in ER’09. Springer, 2009, pp. 458–471.
[5] OMG, Business Process Model and Notation (BPMN), Version 2.0,
Object Management Group Std., Rev. 2.0, January 2011.
[6] S. Overhage, D. Q. Birkmeier, and S. Schlauderer, “Quality marks,
metrics, and measurement procedures for business process models,”
BISE, vol. 4, no. 5, pp. 229–246, 2012.
[7] H. A. Reijers and J. Mendling, “A study into the factors that influence
the understandability of business process models,” IEEE Trans Sys Man
Cybern Part A, vol. 41, no. 3, pp. 449–462, 2011.
[8] S. Rinderle, R. Bobrik, M. Reichert, and T. Bauer, “Business process
visualization - use cases, challenges, solutions,” in ICEIS’06, no. 2.
INSTICC PRESS, May 2006, pp. 204–211.
[9] M. Hipp, B. Mutschler, and M. Reichert, “Navigating in complex
business processes,” in DEXA’12, ser. LNCS, no. 7447. Springer, 2012,
pp. 466–480.
[10] M. Schrepfer, J. Wolf, J. Mendling, and H. A. Reijers, “The impact of
secondary notation on process model understanding,” in The Practice of
Enterprise Modeling. Springer, 2009, pp. 161–175.
[11] E. Tufte and G. Press, Envisioning Information. Graphics Press, 1990.
[12] J. Mendling, H. A. Reijers, and J. Cardoso, “What makes process models
understandable?” in Business Process Management, 2007, pp. 48–63.
[13] V. Stein Dani, C. Freitas, and L. Thom, “Ten years of visualization of
business process models: A systematic literature review,” Comput. Stand.
Interfaces, vol. 66, April 2019.
[14] J. Kolb and M. Reichert, “A flexible approach for abstracting and per-
sonalizing large business process models,” Applied Computing Review,
vol. 13, no. 1, pp. 6–17, March 2013.
[15] J. Kolb, K. Kammerer, and M. Reichert, “Updatable process views for
adapting large process models: The proview demonstrator,” in BPM’12,
ser. CEUR Workshop Proceedings, no. 940, September 2012, pp. 6–11.
[16] R. Bobrik, T. Bauer, and M. Reichert, “Proviado – personalized and
configurable visualizations of business processes,” in E-Commerce and
Web Technologies. Springer, 2006, pp. 61–71.
[17] T.-F. Kummer, J. Recker, and J. Mendling, “Enhancing understandabil-
ity of process models through cultural-dependent color adjustments,”
Decision Support Systems, vol. 87, pp. 1–12, 2016.
[18] C. Natschl¨
ager, “Deontic bpmn,” in Database and Expert Systems
Applications. Springer, 2011, pp. 264–278.
[19] H. Leopold, J. Mendling, and A. Polyvyanyy, “Generating natural
language texts from business process models,” in Advanced Information
Systems Engineering. Springer, 2012, pp. 64–79.
[20] P. H. Meland and E. A. Gjære, “Representing threats in BPMN 2.0,” in
ARES’12, 2012, pp. 542–550.
[21] R. M¨
uller and A. Rogge-Solti, “BPMN for healthcare processes,” in
ZEUS’11, Karlsruhe, Germany, vol. 1, 2011.
[22] Signavio. Signavio process manager. [Online]. Available:
https://www.signavio.com/, last accessed 2021-16-08
[23] Software AG. Aris Express. [Online]. Available:
https://www.ariscommunity.com/aris-express, last accessed 2021-16-08
