Introduction to ngx-workflow

ngx-workflow is a high-performance, developer-first flowchart and graph diagram library built for Angular 17.1–22 and Signals.

Installation

Install the library via your preferred Node package manager:

Quick Start Guide

Follow these 3 steps to render your first interactive flowchart canvas:

1. Import NgxWorkflowModule

In your Angular Standalone Component or NgModule, import NgxWorkflowModule:

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

@Component({
  selector: 'app-workflow-demo',
  standalone: true,
  imports: [NgxWorkflowModule],
  templateUrl: './workflow-demo.component.html'
})
export class WorkflowDemoComponent {
  // Define Reactive State using Signals
  nodes = signal<Node[]>([
    { id: '1', label: 'Start Trigger', position: { x: 100, y: 100 }, ports: 2 },
    { id: '2', label: 'Process Step', position: { x: 380, y: 100 }, ports: 4 },
    { id: '3', label: 'End Output', position: { x: 660, y: 100 }, ports: 1 }
  ]);

  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' }
  ]);
}

2. Render Diagram Component

In your component HTML template, add the <ngx-workflow-diagram> element:

<ngx-workflow-diagram
  [nodes]="nodes()"
  [edges]="edges()"
  [showBackground]="true"
  backgroundVariant="dots"
  [showZoomControls]="true"
  [showMinimap]="true"
  [showLayoutControls]="true"
></ngx-workflow-diagram>

Core Feature Matrix

• Pure Signals Reactivity: All viewport transformations, selection states, and node coordinate changes run inside reactive Signal pipelines.
• Automatic ELK Layout: Built-in integration with ELK.js for instant hierarchical graph layout calculation.
• Rich Overlays: Minimap navigation, Zoom toolbar, Undo/Redo stack manager, Node search panel, Properties sidebar (RGBA colors, edge animation & markers), and Context menus.
• Connection Routing: Direction-aware Bezier curves (respect handle sides), orthogonal step / smoothstep, straight lines, smart A* routing, plus flow/dot edge animation.
• 100% Type Safe: Strict TypeScript interfaces for Node, Edge, Connection, and Viewport.