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

zoomControlsConfig

Customize zoom controls toolbar position (e.g. bottom-left, top-right), visible slots, custom action buttons, icons, or separators.

CategoryControls

TypeZoomControlsConfig | undefined

Example

<ngx-workflow-diagram
  [zoomControlsConfig]="{
    position: 'bottom-left',
    items: [
      { id: 'zoomIn', type: 'action', action: 'zoomIn', icon: 'plus', title: 'Zoom In' },
      { id: 'zoomPercent', type: 'view', view: 'zoomPercent' },
      { id: 'zoomOut', type: 'action', action: 'zoomOut', icon: 'minus', title: 'Zoom Out' },
      { id: 'separator', type: 'separator' },
      { id: 'fitView', type: 'action', action: 'fitView', icon: 'fit', title: 'Fit View' }
    ]
  }"
/>

Interactive preview

Try the diagram (drag ports to connect):

Diagram canvas

ngx-workflow-diagram