Camunda modeler in Angular

November 2, 2023

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

ng new camunda-modeler

ng g c diagram

ng g c XMLviewer

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.

npm i bpmn-js

The following packages are used to add a mini map in the modeler and color picker for components, as the package name implies.

npm i diagram-js-minimapnpm i bpmn-js-color-picker

Add styling and scripts

Include the following style sheets in index.js file

For Bootstrap,

For Modeler,

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

{“compileOnSave”: false,”compilerOptions”: {

“baseUrl”: “./”,

“outDir”: “./dist/out-tsc”,

“sourceMap”: true,

“declaration”: false,

“module”: “es2020”,

“moduleResolution”: “node”,

“experimentalDecorators”: true,

“target”: “es5”,

“typeRoots”: [

“node_modules/@types”

“lib”: [

“es2018”,

“dom”

]

}

Define Routes

Now navigate to app.modules.ts file to import angular components and define routes.

import { NgModule } from ‘@angular/core’;

import { RouterModule, Routes } from ‘@angular/router’;

import { DiagramComponent } from ‘./diagram/diagram.component’;

import { XMLviewerComponent } from ‘./xmlviewe/xmlviewer.component’;const routes: Routes = [

{ path: ‘’, component: DiagramComponent },

{ path: ‘xmlViewer’, component: XMLviewerComponent }

];@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})export class AppRoutingModule { }

Remember to include router-outlet in the app.component.html file.

<router-outlet></router-outlet>

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

import { Component, ElementRef, ViewChild, OnInit } from ‘@angular/core’;import * as BpmnJS from ‘bpmn-js/dist/bpmn-modeler.production.min.js’;

import minimapModule from ‘diagram-js-minimap’;

import BpmnColorPickerModule from ‘bpmn-js-color-picker’;

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.

private bpmnJS: BpmnJS
@ViewChild(‘ref’, { static: true }) private el: ElementRef;

constructor(){

this.bpmnJS = new BpmnJS({

additionalModules: [

minimapModule,

BpmnColorPickerModule

]

})

}

ngAfterContentInit(): void{

this.bpmnJS.attachTo(this.el.nativeElement);

}

ngOnDestroy(): void {

this.bpmnJS.destroy();

}

To make the modeler visible, place the HTML tag below in the diagram.component.html file

Interactive Modeler

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.

ngOnInit(): void{

fetch(‘../assets/template.bpmn’)

.then(response => response.text())

.then(xml => {

this.bpmnJS.importXML(xml)

});

}

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.

<div>

// As the article progresses, the use of this block will be

revealed.

</div>

<div>

</button>

</div>

<div>

</button>

</div>

Add the functions zoomIn() and zoomOut() in diagram.component.ts file

zoomIn() {

this.bpmnJS.get(‘zoomScroll’).stepZoom(1);

}

zoomOut() {

this.bpmnJS.get(‘zoomScroll’).stepZoom(-1);

}

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.

ng generate service app

Add the following getter and setter constructors within the class AppServiceprivate xml: string

getXMl(){

return this.xml

}

setXML(xml: string){

this.xml = xml

}

To make the XML code visible and to get back to the diagram page, add the following HTML code to the xmlviewer.component.html

<button class=”btn btn-primary” (click)=”viewDiagram()”>View Diagram</button>

</div>

In the xmlviewer.component.ts file import required libraries

import { Component, OnInit } from ‘@angular/core’;

import { Router } from ‘@angular/router’;

import { AppService } from ‘../app.service’;

Within the class XMLviewerComponent, add the code below.

public xml: string

constructor(

private route: Router,

private appService: AppService)

{ }

ngOnInit(): void {

this.xml = this.appService.getXMl()

if(this.xml == undefined)

this.xml = ‘To design a workflow, go to the diagram page.’

}

viewDiagram(){

this.route.navigate([”]);

}

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.

<div>

</div>

<div>

</button>

</div>

<div>

</button>

</div>

Write the function viewXML(), in the diagram.component.ts file

viewXML(){

this.bpmnJS.saveXML().then(xml=>{

this.appService.setXML(xml.xml)

}

this.route.navigate([‘/xmlViewer’]);

}

Finally, the File structure looks like this,

File Structure

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

https://github.com/Sankeerthana-Optisol/camunda-modeler/tree/modeler-part1?source=post_page—–e2df170b9b2a

Company

Services

Connect with us