@denysvuika/ng-bpmn

Angular BPMN

Standalone BPMN components for your Angular applications.

Getting Started

Install the dependency:

npm i @DenysVuika/ng-bpmn

BPMN

<ng-bpmn [url]="diagramUrl" />

Keyboard Hotkeys

<ng-bpmn [url]="diagramUrl" [hotkeys]="true" />

Supported hotkeys:

Keys	MacOS	Action
Ctrl+a	Command+a	select all
e	e	direct editing
h	h	hand tool
l	l	lasso tool
s	s	space tool
c	c	global connect tool
Ctrl+=	Command+=	zoom in
Ctrl+-	Command+-	zoom out
Ctrl+0	Command+0	reset zoom
Ctrl+9	Command+9	zoom to fit
Ctrl+z	Command+z	undo
Ctrl+Shift+z	Command+Shift+z	redo
Backspace	Backspace	remove selection
Ctrl+c	Command+c	copy selection
Ctrl+v	Command+v	paste
Ctrl+x	Command+x	cut selection
Ctrl+f	Command+f	find

Invoking Component API

You can get the reference to the ng-bpmn component, and pass to the underlying application code.

For the sake of simplicity, some of the code was omitted.

app.component.html

<ng-bpmn #bpmn [url]="diagramUrl" />
<button (click)="exportSVG(bpmn)">Export SVG</button>

app.component.ts

import { saveAs } from 'file-saver';

export class AppComponent {
  exportSVG(bpmnComponent: NgBpmnComponent) {
    bpmnComponent.saveXML().then((content) => {
      if (content) {
        const blob = new Blob([content]);
        saveAs(blob, 'diagram.xml');
      }
    });
  }
}

Properties Panel

<ng-bpmn [url]="diagramUrl" [showProperties]="true" />

Minimap

<ng-bpmn [url]="diagramUrl" [showProperties]="true" [showMinimap]="true" />

DMN

<ng-dmn [url]="diagramUrl" />

Properties Panel

<ng-dmn [url]="diagramUrl" [showProperties]="true" />

Keyboard Hotkeys

<ng-dmn [url]="diagramUrl" [hotkeys]="true" />

Supported hotkeys:

Keys	MacOS	Action
Ctrl+a	Command+a	select all
e	e	direct editing
h	h	hand tool
l	l	lasso tool
Ctrl+=	Command+=	zoom in
Ctrl+-	Command+-	zoom out
Ctrl+0	Command+0	reset zoom
Ctrl+9	Command+9	zoom to fit
Ctrl+z	Command+z	undo
Ctrl+Shift+z	Command+Shift+z	redo
Backspace	Backspace	remove selection

CMMN

<ng-cmmn [url]="diagramUrl" />

Properties Panel

<ng-cmmn [url]="diagramUrl" [showProperties]="true" />

Keyboard Hotkeys

<ng-cmmn [url]="diagramUrl" [hotkeys]="true" />

Supported hotkeys:

Keys	MacOS	Action
Ctrl+a	Command+a	select all
e	e	direct editing
h	h	hand tool
l	l	lasso tool
c	c	global connect tool
Ctrl+=	Command+=	zoom in
Ctrl+-	Command+-	zoom out
Ctrl+0	Command+0	reset zoom
Ctrl+9	Command+9	zoom to fit
Ctrl+z	Command+z	undo
Ctrl+Shift+z	Command+Shift+z	redo
Backspace	Backspace	remove selection
Ctrl+f	Command+f	find