@denysvuika/ng-bpmn v0.0.3

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:

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:

CMMN

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

Properties Panel

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

Keyboard Hotkeys

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

Supported hotkeys: