<ngx-workflow-diagram [nodes]="nodes()" [edges]="edges()" [showPropertiesSidebar]="false" (nodeDoubleClick)="onNodeDoubleClick($event)">
  <!-- Shows above selected node -->
  <ngx-workflow-node-toolbar [nodeId]="selectedNodeId">
    <button (click)="deleteNode()">Delete</button>
  </ngx-workflow-node-toolbar>

  <!-- Anchored Workflow Legend Panel -->
  <ngx-workflow-panel position="top-right" [style]="{ minWidth: '280px', background: 'rgba(15, 23, 42, 0.94)', color: '#f8fafc' }">
    <div class="legend-card">
      <h4>Workflow Legend</h4>
      <div class="legend-item"><span class="dot bg-blue"></span> Active / Ingestion</div>
      <div class="legend-item"><span class="dot bg-emerald"></span> Database Sink</div>
    </div>
  </ngx-workflow-panel>

  <!-- Custom Node Double-Click API Inspector -->
  @if (inspectorOpen()) {
    <ngx-workflow-panel position="center-right" [style]="{ zIndex: 30 }">
      <div class="inspector-card glass-panel">
        <h4>{{ activeNode()?.label }} API Config</h4>
        <input [(ngModel)]="activeEndpoint" placeholder="API endpoint" />
        <button (click)="syncApi()">Save & Sync API</button>
      </div>
    </ngx-workflow-panel>
  }
</ngx-workflow-diagram>

npm install ngx-workflow

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxWorkflowModule],
  template: `
    <div style="height: 100vh; width: 100%;">
      <ngx-workflow-diagram
        [nodes]="nodes"
        [edges]="edges"
        (nodeClick)="onNodeClick($event)"
        (connect)="onConnect($event)"
      ></ngx-workflow-diagram>
    </div>
  `
})
export class AppComponent {
  nodes: Node[] = [
    { id: '1', position: { x: 100, y: 100 }, label: 'Start', type: 'default' },
    { id: '2', position: { x: 300, y: 100 }, label: 'End', type: 'default' }
  ];

  edges: Edge[] = [
    { id: 'e1-2', source: '1', target: '2', sourceHandle: 'right', targetHandle: 'left', animated: true }
  ];

  onNodeClick(node: Node) {
    console.log('Clicked:', node);
  }

  onConnect(connection: any) {
    console.log('Connected:', connection);
  }
}

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

nodes.set([{
  id: 'a',
  position: { x: 0, y: 0 },
  ports: 4,
  maxConnectionsPerPort: 1,
  handleConfig: { bottom: { maxConnections: 3 } }
}]);

interface Node {
  id: string;              // Unique identifier
  position: { x: number; y: number }; // Position on canvas
  label?: string;          // Default label
  data?: any;              // Custom data passed to your custom node component
  type?: string;           // 'default', 'group', or your custom type
  width?: number;          // Width in pixels (default: 170)
  height?: number;         // Height in pixels (default: 60)
  draggable?: boolean;     // Is the node draggable? (default: true)
  selectable?: boolean;    // Is the node selectable? (default: true)
  connectable?: boolean;   // Can edges be connected? (default: true)
  resizable?: boolean;     // Is this specific node resizable? (default: true)
  zIndex?: number;         // Manual Z-Index
  class?: string;          // Custom CSS class
  // Styling — colors accept hex / rgb() / rgba()
  style?: {
    backgroundColor?: string;
    color?: string;
    borderColor?: string;
    [key: string]: any;
  };
  shadow?: boolean | string;   // Drop shadow
  borderStyle?: 'solid' | 'dashed' | 'dotted' | 'none';
  borderColor?: string;
  borderWidth?: number;

  // Behavior
  ports?: 0 | 1 | 2 | 3 | 4; // 0=None, 1=Top, 2=Top/Bottom, 3=Left/Right, 4=All
  maxConnectionsPerPort?: number; // Default max edges per port on this node
  handleConfig?: {
    [handleId: string]: {
      isConnectable?: boolean | number | ((node: Node, edges: Edge[]) => boolean);
      maxConnections?: number; // Override for this port
    };
  };
  easyConnect?: boolean;   // Drag from node body to connect
  
  // Visuals
  badges?: Array<{
    content: string;
    color?: string;
    backgroundColor?: string;
    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  }>;
}

interface Edge {
  id: string;
  source: string;          // ID of source node
  target: string;          // ID of target node
  sourceHandle?: string;   // ID of source handle (optional)
  targetHandle?: string;   // ID of target handle (optional)
  label?: string;          // Label text displayed on the edge
  type?: 'bezier' | 'straight' | 'step' | 'smoothstep' | 'smart' | 'dashed';
  animated?: boolean;      // Defaults animationType to 'flow' when unset
  animationType?: 'flow' | 'dot' | 'both';
  animationDuration?: string; // e.g. '1s'
  animationStyle?: { fill?: string };
  markerStart?: 'arrow' | 'arrowclosed' | 'dot' | string;
  markerEnd?: 'arrow' | 'arrowclosed' | 'dot' | string; // Built-ins match stroke
  style?: { stroke?: string; strokeWidth?: string | number; strokeDasharray?: string; [key: string]: any };
  labelStyle?: { fill?: string; [key: string]: any };
}

<ngx-workflow-diagram
  [nodes]="nodes()"
  [edges]="edges()"
  [zoomControlsConfig]="{
    position: 'bottom-left',
    orientation: 'horizontal',
    items: [
      { id: 'undo', type: 'action', action: 'undo' },
      { id: 'redo', type: 'action', action: 'redo' },
      { id: 'sep1', type: 'separator' },
      { id: 'zoomIn', type: 'action', action: 'zoomIn', icon: 'plus' },
      { id: 'zoomPercent', type: 'view', view: 'zoomPercent' },
      { id: 'zoomOut', type: 'action', action: 'zoomOut', icon: 'minus' },
      { id: 'sep2', type: 'separator' },
      { id: 'fitView', type: 'action', action: 'fitView', icon: 'fit' },
      { id: 'fullscreen', type: 'action', action: 'fullscreen', icon: 'fullscreen' }
    ]
  }"
  (fullscreen)="toggleFullscreen()"
/>

<ngx-workflow-handle
    type="source"
    position="right"
    [isConnectable]="true"
    [isValidConnection]="validateConnectionFn"
></ngx-workflow-handle>

<ng-template #defs>
  <svg:marker id="my-marker" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
    <circle cx="5" cy="5" r="5" fill="red" />
  </svg:marker>
</ng-template>

<ngx-workflow-diagram [defsTemplate]="defs" ...></ngx-workflow-diagram>

:root {
  --ngx-workflow-primary: #3b82f6;
  --ngx-workflow-bg: #f8fafc;
  --ngx-workflow-grid-color: #e2e8f0;
  --ngx-workflow-node-bg: #ffffff;
  --ngx-workflow-node-border: #cbd5e1;
  --ngx-workflow-handle-color: #3b82f6;
  --ngx-workflow-edge-stroke: #64748b;
  --ngx-workflow-selection-stroke: #3b82f6;
}