Angular 5 SVG flowchart npm plugin

Question

Hi I'm using Angular 5 in my project and I need to create flowcharts. I've searched and found some plugins but they don't offer these features that I need:

1. the Ability to add/delete/redraw the nodes (There should be an array of nodes so that when I update it, the flowchart is redrawn).
2. put a label on nodes and add tooltips to them.
3. being able to do some thing on clicking the nodes.
4. panning and zooming

Thanks in advance

Solution 1

I suggest ngx-graph which has all the features you've asked for. Take a look at the demo. Here is the link in github

Solution 2

In a commercial scenario, you might want to look at yFiles for HTML. It can easily do all what you ask for in your list and has great Angular integration allowing you to both interactively and programmatically modify your diagrams, bind your data for both populating your graph structure and rendering your node visualizations, tooltips, context menus, etc.

The library offers the widest available range of automatic layout algorithms so that you don't need to arrange your diagram yourself, but can get nice drawings from bound data, easily.

Although it is a pure JavaScript library, it provides complete TS bindings for the whole library, so you can choose between JS and TS or have both during development and get decent code completion and documentation lookup.

^{Disclaimer: I work for the company that creates that library, however I don't represent my employer on SO.}