/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.
The runtime model is not guaranteed to be JSON-serializable: custom data and Polymorpheus labels can contain Angular component references, templates or other application objects. Persist serializable fields in your own storage format, then restore runtime content through your application's component or label registry.
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 node anchor in graph coordinates. Pan and zoom change the viewport without changing these values. 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 and focus is inside the editor. Typing in an input, textarea, select or editable content does not delete the selected graph element.
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 and focus is inside the editor. Editable node or label content keeps its normal keyboard behavior.
NgDrawFlow