What is ngx-workflow?

ngx-workflow is an Angular Signals library for building interactive flowchart and node-based workflow editors with ELK layout, smart edges, minimap, and studio chrome.

Which Angular versions does ngx-workflow support?

ngx-workflow supports Angular 17.1 through Angular 22.

How do I install ngx-workflow?

Install with npm install ngx-workflow, then import NgxWorkflowModule or the standalone diagram component.

Is ngx-workflow a React Flow alternative for Angular?

Yes. It is an Angular-native Signals alternative to React Flow / xyflow for flowchart and node-editor UIs.

DocsJump to section

optimization

Performance tuning options for large diagrams (spatial culling, adaptive zoom buffer, edge virtualization, and hideEdgesBelowZoom threshold).

CategoryBehavior

TypeFlowOptimization

Default{ virtualization: true, adaptiveBuffer: true, hideEdgesBelowZoom: 0.4 }

Example

<ngx-workflow-diagram
  [optimization]="{
    virtualization: true,
    adaptiveBuffer: true,
    hideEdgesBelowZoom: 0.4,
    edgeVirtualization: 'any-endpoint'
  }"
/>

Interactive preview

Try the diagram (drag ports to connect):

Diagram canvas

ngx-workflow-diagram