/

Terms and Definitions

In this part of the docs we are explaining some basic NgDrawFlow terms and definition. Three things you’ll be using a lot in NgDrawFlow are nodes, connections, and connectors.

Nodes

Node in NgDrawFlow is an Angular component. This means it can display anything you desire. Each node has X and Y coordinates that refer to the point at the center of the node, relative to the workspace. To create a node, you need to extend from DrawFlowBaseNode .

The workspace itself is dynamic. It is derived from the rendered node bounds rather than from a fixed predefined board size, so it expands together with the graph content.

To delete a node, select it and press Delete or Backspace

Some of the things you might do with a custom node are:

  • Render form elements
  • Visualize data
  • Support multiple connectors

Connectors

A Connector is used to link nodes together. By default they are displayed as blue circles but the colour can be changed using css variables. When creating a custom node, you may use as many connector handles as you need. The main requirement is that each connector has a unique name starting with its nodeId (example: node-1-input-1 ). More information can be found in the connector documentation .

Connectors are divided into two types: input connectors and output connectors.

To connect two nodes, simply drag an output connector from one node to an input connector of another node.

Connections

A Connection links two nodes together. It is represented by a Bezier curve. An edge is an SVG path, allowing its line thickness and color to be adjusted through CSS variables.

More details can be found in the connection lines documentation .

To delete a connection, select it and press the Delete or Backspace key .