ngx-workflow

Node editors for Angular,
built on Signals.

A cinematic, high-performance workflow canvas with ELK layout, direction-aware bezier edges, and zero Zone.js overhead.

Get startedOpen studio
npm install ngx-workflow
Developer experience

Signal-native API. Instant canvas.

Define nodes and edges as signals — the diagram stays in sync.

app.component.ts
import { Component, signal } from '@angular/core';
import { NgxWorkflowModule, Node, Edge } from 'ngx-workflow';

@Component({
  standalone: true,
  imports: [NgxWorkflowModule],
  template: `<ngx-workflow-diagram [nodes]="nodes()" [edges]="edges()" />`
})
export class App {
  nodes = signal<Node[]>([
    { id: '1', label: 'Input Trigger',
      position: { x: 40, y: 120 }, ports: 2 },
    { id: '2', label: 'Data Processing',
      position: { x: 260, y: 120 }, ports: 4 },
    { id: '3', label: 'Database Storage',
      position: { x: 500, y: 120 }, ports: 2 },
  ]);
  edges = signal<Edge[]>([
    { id: 'e1-2', source: '1', target: '2',
      sourceHandle: 'right', targetHandle: 'left', animated: true },
    { id: 'e2-3', source: '2', target: '3',
      sourceHandle: 'right', targetHandle: 'left' },
  ]);
}
Live output
Capabilities

Enterprise graph tooling, Angular-native.

Performance, layout, projection, and studio chrome — without the canvas bridge tax.

Signals-native performance

OnPush rendering and signal sync keep pan, zoom, and drag smooth at scale — without Zone.js digest churn.

ELK auto-layout

Hierarchical, force, and circular helpers ship with the library so complex graphs settle in one call.

Template projection

Bring Angular components into nodes and edges. No canvas bridge, no foreign rendering model.

Studio chrome included

Minimap, undo/redo, search, properties sidebar, context menu, and export — composable out of the box.

Why ngx-workflow

Built for Angular, not ported to it.

Capabilityngx-workflowGeneric libraries
Angular SignalsNativeZone / RxJS heavy
Component projectionDirect templatesCanvas bridge
Auto-layoutELK built-inThird-party setup
Undo / redoIncludedManual
FAQ

What is ngx-workflow?

ngx-workflow (sometimes searched as “ngx workflow”) is an open-source Angular library for building flowchart and node-based workflow editors.

What is ngx-workflow?

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

How do I install ngx-workflow?

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

Which Angular versions does ngx-workflow support?

ngx-workflow supports Angular 17.1 through Angular 22.

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.

Official site: ngx-workflow.vercel.app · npm: npmjs.com/package/ngx-workflow · GitHub: github.com/abdulkyume/ngx-workflow

Ship your next diagram surface.

MIT licensed. Angular 17.1–22. Ready for production editors.

Explore docsLaunch sandbox