API Reference

<ngx-workflow-diagram
  [nodes]="nodes()"
  [edges]="edges()"
  [maxConnectionsPerHandle]="2"
  (nodesChange)="nodes.set($event)"
  (edgesChange)="edges.set($event)"
  (connect)="onConnect($event)"
/>

nodes = signal<Node[]>([
  {
    id: 'a',
    label: 'Source',
    position: { x: 80, y: 100 },
    ports: 4,
    maxConnectionsPerPort: 1,
    handleConfig: {
      bottom: { maxConnections: 3 } // override one port
    }
  },
  {
    id: 'b',
    label: 'Target',
    position: { x: 360, y: 100 },
    ports: 4
  }
]);

<ngx-workflow-diagram
  [nodes]="nodes()"
  [edges]="edges()"
  [optimization]="{
    lazyLoadTrigger: 'viewport',
    virtualization: true,
    adaptiveBuffer: true,
    keepSelectedVisible: true,
    maxRenderedNodes: 400,
    edgeVirtualization: 'any-endpoint',
    virtualizationBuffer: 500
  }"
/>

export interface Node {
  id: string;
  label?: string;
  type?: string;
  position: { x: number; y: number };
  data?: Record<string, any>;
  width?: number;
  height?: number;
  selected?: boolean;
  /** Colors: hex / rgb() / rgba() — backgroundColor, color, borderColor */
  style?: Record<string, string>;
  borderColor?: string;
  borderWidth?: number;
  /** 0=None, 1=Top, 2=Top/Bottom, 3=Left/Right, 4=All */
  ports?: 0 | 1 | 2 | 3 | 4;
  /** Default max edges for every port on this node */
  maxConnectionsPerPort?: number;
  handleConfig?: {
    [handleId: string]: {
      isConnectable?: boolean | number | ((node: Node, edges: Edge[]) => boolean);
      maxConnections?: number;
    };
  };
  easyConnect?: boolean;
}

export interface Edge {
  id: string;
  source: string;
  target: string;
  /** Handle side: 'top' | 'right' | 'bottom' | 'left' — drives bezier/step direction */
  sourceHandle?: string;
  targetHandle?: string;
  type?: 'bezier' | 'step' | 'smoothstep' | 'straight' | 'smart' | 'dashed';
  animated?: boolean; // defaults animationType to 'flow' when unset
  animationType?: 'flow' | 'dot' | 'both';
  animationDuration?: string; // e.g. '1s'
  animationStyle?: { fill?: string }; // moving-dot color (rgba ok)
  markerStart?: 'arrow' | 'arrowclosed' | 'dot' | string;
  markerEnd?: 'arrow' | 'arrowclosed' | 'dot' | string; // built-ins match stroke
  label?: string; // legacy center label
  edgeLabels?: { start?: string | EdgeLabel; center?: string | EdgeLabel; end?: string | EdgeLabel };
  labelStyle?: Record<string, string>;
  style?: Record<string, string>; // stroke, strokeWidth, strokeDasharray
}