node package manager


Activiti Diagrams Component for Angular 2

    Status travis
    Status Coverage Status npm downloads license alfresco component angular 2 typescript node version


Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.


Follow the 3 steps below:

  1. Npm

    npm install ng2-activiti-diagrams --save
  2. Html

    Include these dependencies in your index.html page:

    <!-- Raphael -->
    <script src="node_modules/raphael/raphael.min.js"></script>
    <!-- Diagrams -->
    <script src="node_modules/ng2-activiti-diagrams/assets/Polyline.js"></script>
    <!-- Google Material Design Lite -->
    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
    <script src="node_modules/material-design-lite/material.min.js"></script>
    <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
    <!-- Load the Angular Material 2 stylesheet -->
    <link href="node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css" rel="stylesheet">
    <!-- Polyfill(s) for Safari (pre-10.x) -->
    <script src="node_modules/intl/dist/Intl.min.js"></script>
    <script src="node_modules/intl/locale-data/jsonp/en.js"></script>
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="//"></script>
    <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script>
    <!-- Polyfill(s) for dialogs -->
    <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script>
    <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
    <style>._dialog_overlay { position: static !important; } </style> 
    <!-- Modules  -->
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
  3. SystemJs

    Add the following components to your systemjs.config.js file:

    • ng2-translat
    • ng2-alfresco-core
    • alfresco-js-api
    • ng2-activiti-diagrams
    • raphael

    Please refer to the following example file: systemjs.config.js .

Basic usage example Activiti Diagrams

This component shows the diagram of a process.

<activiti-diagram [processDefinitionId]="processDefinitionId"></activiti-diagram>

Or below component shows the diagram of a running process instance with the activities highlighted according to their state (Active/Completed/Pending).

<activiti-diagram [processInstanceId]="processInstanceId"></activiti-diagram>

Usage example of this component :


import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { CoreModule, AlfrescoSettingsService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
import { DiagramsModule } from 'ng2-activiti-diagrams';
    selector: 'activiti-diagrams-demo',
    template: `<activiti-diagram [processDefinitionId]="'HealthCareExpressVisitationLog:10:27642'"></activiti-diagram>`
export class DiagramDemoComponent {
    constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
        settingsService.bpmHost = 'http://localhost:9999';
        this.authService.login('admin', 'admin').subscribe(
            ticket => {
            error => {
    imports: [
    declarations: [ DiagramDemoComponent ],
    bootstrap:    [ DiagramDemoComponent ]
export class AppModule { }


Name Description
onSuccess The event is emitted when the diagrams element are loaded
onError The event is emitted when the an error occur during the loading


Name Description
metricPercentages The array that contains the percentage of the time for each element
metricColor The array that contains the color for each element
metricType The string that specifies the metric type

Build from sources

Alternatively you can build component from sources with the following commands:

npm install
npm run build

Build the files and keep watching for changes

$ npm run build:w

Running unit tests

npm test

Running unit tests in browser

npm test-browser

This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.

Code coverage

npm run coverage


If you want have a demo of how the component works, please check the demo folder :

cd demo
npm install
npm start

NPM scripts

Command Description
npm run build Build component
npm run test Run unit tests in the console
npm run test-browser Run unit tests in the browser
npm run coverage Run unit tests and display code coverage report


Apache Version 2.0