Flowcharts / Flow Diagrams for Angular2/4

Question

I am currently developing an app using MEAN stack with Angular version 4. I have a requirement to create dynamic flowcharts. I want similar to what is available in http://fiddle.jshell.net/awolf2904/aw2e3ovz/ It is exactly matchingn my requirement. It is using Flowchart.js and Angular 1.X. Also Mermaid seems to be matching my requirement but onceagan support Angular 1.x. Could someone help me in this?

Answer 1

As long as the libraries are not available as Angular packages you have to utilize it by defining a typing in your project:

declare var flowchart:any

This type definition makes the library available.

See this plunker example: http://embed.plnkr.co/OAW8ow2WU9ugKBPTG8uX/

Answer 2

I believe the fiddle you are referencing shows quite nicely that Flowchart.js really is not bound to the version of angular at all. After all that library simply updates a part of the DOM which angular just manages. There is no tight integration between the two.

So basically you can just take the official migration guide and upgrade the code you have from version 1 to version 4. The flowchart js specific parts will be largely unaffected.

We also had to port our flowchart solution for AngularJS to Angular 2/4/... and the changes were all just pure angular specific changes. The integrative part was mostly the same and it will be the same for flowchart.js

^{Full disclosure: I work for the company that creates the library that is used in the example I linked, however on SO I do not represent my employer.}