ng-workflow-svg-js

ng-workflow-svg-js

workflow-svg.js is a library to display workflows as SVG. This library is an Angular Wrapper for it.

How to use

<ng-workflow-svg-js
  [id] = "'some-id'"
  [width] = "500"
  [height] = "500"
  [(entities)] = "entities"
  [(lines)] = "lines"
  [configuration] = "configuration"
  ></ng-workflow-svg-js>

Attribute	Type	In-Param	Out-Param
id	string	✔	☐
width	number	✔	☐
height	number	✔	☐
entities	NgWorkflowSvgJsEntity[]	✔	✔
lines	NgWorkflowSvgJsLine[]	✔	✔
configuration	NgWorkflowSvgJsConfiguration	✔	☐

How to install

1. Install the library via npm

npm install ng-workflow-svg-js

1. Next you have to install the Peer Dependencies in the right version (see package.json)
2. Add the scripts in your angular.json

"scripts": [
  "./node_modules/@svgdotjs/svg.js/dist/svg.min.js",
  "./node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.min.js",
  "./node_modules/workflow-svg.js/dist/workflow-svg.minified.js"
]

1. Add the ng-workflow-svg-js module to your app

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgWorkflowSvgJsModule // <== add the NgWorkflowSvgJsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use the ng-workflow-svg-js component.