Drawing Business Process Diagrams
Visualize and design Business Process Diagrams (BPMN) in your application
Business process diagrams help to visualize and design business processes in an organization. They enable managers to understand, control, and optimize business processes. A useful diagram makes it easy to identify which tasks are essential to a larger business goal and streamline them to improve efficiency.
Tools for modeling, simulating, or executing business processes are commercially available on the market. While these are suitable for general purposes, some use cases may require a custom solution. Developers who intend to create such a custom solution can save a lot of money, time, and workforce by using a software library that provides ready-to-use components for this task. yFiles is a commercial programming library that facilitates the creation of custom graph editors. yFiles is available for many different platforms.
The Business Process Model and Notation (BPMN) is a standard for business process modeling. It provides a graphical notation for specifying business processes in business process diagrams. The goal of BPMN is to provide a notation to both technical and business users to intuitively model and understand complex business processes. Therefore, BPMN diagrams consist of a limited number of graphical elements that are easy to understand.
BPMN divides the graphic elements into four categories:
Flow objects are the main elements of business process diagrams and consist of three basic elements: events, activities, and gateways.
An activity describes a task that needs to be done in a business process. It is displayed as a rectangle with rounded corners.
A gateway represents a decision point or a point at which various control flows merge. It is drawn as a square standing on the top.
An event is something that can happen in a business process. Examples are the arrival of a message, the arrival of a specific date, or the occurrence of an exceptional situation.
Sequence flows connect activities, gateways, and events. They specify the execution order of activities.
A message flow indicates that two lanes or pools or two of their elements exchange messages.
An association connects an Artifact or text to a Flow Object and is represented with a dotted line.
A pool represents the main process participants, typically different organizations each. A lane subdivides a pool and extends the full length of the pool. It represents a participant in a workflow that is a user or a system.
Artifacts add additional information to the diagram to make it more legible and easier to understand. An annotation is a comment that can be associated with an element of a business process. A data object represents data that is required or produced in an activity. A group visually summarize elements of a business process.
The symbols are not only visual elements, but they can also have behavior. For example, an activity node with a dynamic sub-state can group other items that are hidden in the closed state. Collapsing elements hide specific details to reduce the complexity of large diagrams and to achieve a clear presentation.
Implementing the full range of BPMN symbols is very time-consuming. yFiles provides the complete palette ready to use. Since all symbols are available as source code, it is quite easy to adapt their appearance as well as their behavior to the look and feel of any business process application.
The BPMN Editor Sample Application demonstrates all aspects of a BPMN editor, including interactive editing, BPMN node visualizations, and a specialized BPMN layout algorithm.
A BPMN editor should support navigation features like zooming, panning, and scrolling. These features help the users to keep track of large diagrams but also lets them inspect specific details of diagrams.
The most basic graph editor features are, of course, the creation and deletion of elements. For example, elements can be created by dragging from a palette and dropping onto the canvas. Creating connections between elements is merely a simple drag gesture from one element to another. Furthermore, text can easily be added to elements, as well.
Besides the gestures to create elements, there are countless others to modify the diagram, such as dragging the mouse to change the size or position of elements. Or context menus that only display menu entries concerning the currently selected elements.
yFiles provides support for all of these tasks. More, all aspects from higher-level gestures down to specific details are highly customizable.
For mobile devices, an extended input for touch devices is essential. The example application Touch Interaction shows many customizations for touch input, which makes it even possible to edit diagrams on smartphones.
Aligning elements means placing the elements so that the diagram looks nice and highlights some specific characteristics of the model. In the case of a business diagram, the timing of events or tasks is often essential for planning the entire process. For example, it is crucial to recognize the critical path. The critical path is the sequence of tasks that limits the minimum amount of time required to complete the overall process.
yFiles helps the users align their diagrams with powerful features:
A grid consists of equally spaced lines in the horizontal and vertical direction. The lines make it easier for the user to align BPMN elements on the canvas. yFiles displays the grid as points or lines. Besides, the grid magnetically attracts the mouse as it moves or resizes elements. This feature makes it very easy to align elements on the grid.
Snapping shows visual guides during gestures near other elements to ease alignment. Ensuring that an element has the same height as other elements in the diagram is just as easy as aligning an element in the exact center of two others or creating orthogonal connections.
yFiles features efficient and highly customizable algorithms for automatic layouts. The BPMN layout calculates positions for the BPMN elements and paths of their connections, creating a look that is typical for BPMN diagrams. Also, the algorithm places the labels to locations where they are easy to see. With one click, the user can create a beautiful BPMN diagram from a very confusing presentation.
An essential feature of any diagram editor is loading and saving diagrams from disk, cloud storage, or any other location, which makes it possible to continue working with the diagram at a later time or to make it available to other persons. The built-in serialization uses GraphML, an XML based format, to read or write the diagram considering each aspect of item placement and styling. However, yFiles allows to store and create business process diagrams from the format and location that fits the use case best. This allows the editor to use formats to exchange data with other business processing tools.
yFiles comes with an extensive BPMN Editor Sample Application. This application features interactive editing, BPMN node visualizations, and a specialized BPMN layout algorithm.
The source code of the BPMN Editor Sample Application is part of all yFiles packages and available on GitHub:
Test the yFiles diagramming library with a fully-functional trial package. To implement your own BPMN application, start with the BPMN Editor Sample Application that is part of the yFiles package. It’s not only a showcase application but also provides best-practice source code that you can re-use in your own project. yFiles makes it easy to customize all aspects of this application, for example, restrict user interaction or load the BPMN diagrams from your own data source. Features like the BPMN node visualizations and the specialized automatic layout are separate components that work in any yFiles-based project.
Download the trial version of yFiles for your target platform at the yWorks Customer Center.
Navigate to the source directory of the BPMN Editor Sample Application.
Explore the sample application’s features and
adjust its source code to match your requirements or
copy the source code of the features you like to your own project.