/Terms and Definitions
NgDrawFlow represents a graph as application data and renders it through four building blocks: the model, nodes, connectors and connections.
Data Model
DfDataModel contains exactly two collections: nodes and connections . It is bound through Angular Forms, so persistence, undo and redo, collaboration and validation can all operate on one application-owned value.
A DfDataNode stores an explicit position . A DfDataInitialNode may omit it; the editor assigns its first position from the current viewport before writing the positioned node back to the model.
Nodes
A node renders a registered Angular component that extends DrawFlowBaseNode . Its X and Y values identify the top-left corner of the visual wrapper in world coordinates. The workspace grows from rendered node bounds instead of using a fixed board size.
startNode and endNode are application-facing role metadata. Core passes them to the custom component and uses a start node for initial camera framing, but the node template decides whether to render input or output connectors.
Select a node and press Delete or Backspace to remove it when nodesDeletable is enabled.
Connectors
df-input and df-output are real elements rendered by a custom node. Their CSS placement determines the physical anchor point; their position input tells the path which direction to leave or approach.
Connector ids must be unique across the complete graph. Prefixing an id with its node id, for example node-1-input-1 , is the recommended convention. Drag a regular output to an input to create a connection.
Connections
A DfDataConnection stores source and target node ids, connector ids and connector types. Core draws it as a Bezier or SmoothStep SVG path and can add an arrowhead or Polymorpheus label.
Select a connection and press Delete or Backspace to remove it when connectionsDeletable is enabled.
NgDrawFlow 