/

Connection Lines

Overview

Connection lines define how nodes are visually linked in NgDrawFlow. The library provides two styles: Bezier and SmoothStep . Select the style via the connection.type option.

When a node is selected, NgDrawFlow highlights every outgoing connection from that node. Lines that originate at the node’s output connectors receive the emphasis so you can immediately follow the path of data leaving the selection instead of manually inspecting each edge.

The highlight palette ties into the same CSS custom properties that drive connector styling. Override --df-connection-selected-node-output-color (and its hover counterpart --df-connection-selected-node-output-hover-color ) to adjust the accent used for these emphasized connections and align them with your application’s branding.

Arrowheads

Customize connection arrowheads using the connection.arrowhead option.

  • type : arrowhead style ( DfArrowhead.None , DfArrowhead.Arrow , DfArrowhead.ArrowClosed )
  • width : width in pixels
  • height : height in pixels

SmoothStep

SmoothStep edges use horizontal and vertical segments joined by rounded bends, making them suitable for orthogonal layouts.

  • curvature : radius of each bend in pixels.

Example

Bezier

Bezier edges are cubic Bézier curves calculated from connector directions, creating smooth flowing lines between nodes.

  • curvature : dimensionless coefficient that controls how strongly the curve bends when connectors face away from each other.

Example