This article demonstrates how to utilize the npm packages to produce BPMN diagrams with Camunda web Modeler in Angular application.
Continue reading to learn how to include the following features
- A component palette with BPMN 2.0 symbols
- Canva for creating BPMN with easy smooth drag and drop of components
- Mini map to locate the diagram in Canva
- Zoom in and out for better readability
- Color picker for BPMN components
- Finally, a page to view the XML of the BPMN diagram.
Let’s begin with the fundamentals
Create an angular application and the following angular components for BPMN diagram editor and XML viewer
Install the dependencies
Install the bpmn-js package, which lets you examine and edit BPMN diagrams while also providing a palette and Canva to the modeler.
The following packages are used to add a mini map in the modeler and color picker for components, as the package name implies.
Add styling and scripts
Include the following style sheets in index.js file
For color picker,
For mini map, copy the mini map styling attributes from the link given below and paste them into the styles.css file.https://github.com/Sankeerthana-Optisol/camunda-modeler/blob/master/src/styles.css?source=post_page—–e2df170b9b2a
Let us do some configuration in tsconfig.json file
Now navigate to app.modules.ts file to import angular components and define routes.
Remember to include router-outlet in the app.component.html file.
Let us now look at the article’s goal
Integrate the modeler
In .ts file of your diagram component (diagram.component.ts), import the following as a modules
Now it is time to put Canva to work.
As seen in the code below, define a property ‘bpmnJS’ of the type BpmnJS and customize the bpmnJS property for the modules such as mini map and color picker within the constructor of the DiagramComponent class.
To make the modeler visible, place the HTML tag below in the diagram.component.html file
Although Canva is ready with mini map, we are unable to construct a BPMN diagram currently. This is because the modeler requires an XML code of a BPMN as a template in order to activate this Canva.
Create a basic bpmn file with a reference to this template.bpmn file in the assets folder as shown in the below screenshot.
A BPMN file to serve as template for the modeler
Import the XML code of the template.bpmn in the bpmnjs. As we know this must be done immediately after initialization of the angular application to make the modeler itself interactive.
Let us add the code below in diagram.components.js file under ngOnInit method.
Modeler working fine after providing it with a BPMN file as a template
Canva has now reached its potential to create and edit a BPMN diagram. We can see the Canva with a start event because the template.bpmn file only includes a start event as a component.
A start event, which is required for each BPMN diagram, is a nice place to start.
Color picker and Mini map
Here is a BPMN diagram created with some BPMN components with color picker module used.
Sample of Colored BPMN
Let us have a look at how the mini map is used. Because Canva may be scrolled horizontally and vertically, the diagram may become invisible at times. In such a case, the mini map can assist us in locating the diagram in Canva.
Use mini map to locate the BPMN diagram in the Canva
Zoom In and Out
We need to zoom in and out as the diagram becomes more intricate. Even though bpmnjs provides zoom in and zoom out capability through ctrl+mouseScrollUp and ctrl+mouseScrollDown, let’s add a zoom in and zoom out button.
Add the zoom in and zoom out buttons to the diagram.component.html file, as well as reorganise the HTML code to prevent scrolling due to overflows through stylings.
Also, let us include the ability to inspect the current BPMN diagram’s XML code.
Add the functions zoomIn() and zoomOut() in diagram.component.ts file
The zoom in and out controls can be found in the bottom right corner, and they operate well.
Added Zoom in and out buttons
BPMN XML viewer
We are currently working on the diagram component, but we already have a component for reading the existing BPMN’s XML code.
Let us start with the XML viewing feature, which will need a service to get the XML code from a child component (diagram component) to another child component (XML viewer component).
Run the following command to create app.service.ts file.
Add the following getter and setter constructors within the class AppServiceprivate xml: string
To make the XML code visible and to get back to the diagram page, add the following HTML code to the xmlviewer.component.html
In the xmlviewer.component.ts file import required libraries
Within the class XMLviewerComponent, add the code below.
Returning to the diagram component
Add a button to navigate to the XML viewer component, edit the diagram.component.html file using the HTML code below.
Write the function viewXML(), in the diagram.component.ts file
Finally, the File structure looks like this,
Hence, the article’s goal has been accomplished,
Image of BPMN digram zoomed, located in minimap and colored
XML of the BPMN diagram
You can find this project in the GIT Repository link given below