Angular BPMN

Standalone BPMN components for your Angular applications.

Getting Started

Install the dependency:

npm i @denizz311/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 | | ↑ ↓ ← → | ↑ ↓ ← → | move selection (1px) | | Shift+↑ ↓ ← → | Shift+↑ ↓ ← → | move selection (10px) |

Requires an element to be selected. With [hotkeys]="false", click the diagram canvas first so it has focus.

Connection label link

When a sequence flow (or its label) is selected, a dashed line links the external label to the connection:

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

This matches the behavior added in bpmn-js 18.9 and is enabled by default.

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" />

Comments

Embedded comments are stored in the BPMN XML (bpmn:documentation with textFormat="text/x-comments") via bpmn-js-embedded-comments.

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

Select a flow node (task, event, gateway), then click the green comment icon on the element. Type your comment and press Enter to save (Shift+Enter for a new line). Click elsewhere on the canvas to collapse open comment boxes.

Access the underlying service from a component reference:

bpmnComponent.comments?.getComments(element);

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 |