Skip to content
Angular module to draw flow diagrams
Branch: master
Clone or download

ngxFlowchart (work in progress)

An angular module to create flow diagrams


  • For the demo: ng serve (runs on localhost:4200)
  • To build ngxflowchart: ng build ngxflowchart
  • Add <flowchart [data]='flowchart_data'> to use

Workflow / Roadmap / Todolist

  • Update to angular 7
  • Add a library using ng generate library ngflow; The library appears unders projects folder. This will need to be built before use. Be sure to add the --prefix or angular appends lib- as default prefix. On adding a library, 3 changes take place:
  • Build the library: ng build ngxflowchart
  • Use the library in a demo: After building the library, you can directly import the module in your demo app. Make sure you've exported the module in public_api.ts file in your library folder though - this is your entrypoint file.
  • Build the library
  • Import the library in app.module.ts; always import the entire module, not individual files. If the module is not found, make sure you've built the module first and restart the server after building
  • Add a simple node and wire and render it
  • Add position data to node and wire
  • Render a graph using a data structure
  • Add ability to drag nodes
  • [] Add ability to connect nodes
  • [] Add ability to transfer data between nodes
  • [] Add callback to process content flowing through node
  • [] Add multiple inputs to node

Topics to explore

Difference between control flow and data flow

SVG vs HTML5 elements to render the graph

You can’t perform that action at this time.