@memberjunction/ng-flow-editor

A generic, entity-agnostic visual flow editor component powered by Foblex Flow, with an agent-specific Flow Agent Editor for building AI agent workflows.

Installation

npm install @memberjunction/ng-flow-editor

Overview

The Flow Editor provides a canvas-based visual editor for building node-and-connection graphs. It wraps Foblex Flow with a clean MemberJunction-style API and includes automatic layout via the Dagre graph algorithm. A specialized Agent Editor component is also included for visually designing AI agent step flows.

flowchart TD
    subgraph Generic["Generic Flow Editor"]
        A["FlowEditorComponent"] --> B["FlowNodeComponent"]
        A --> C["FlowPaletteComponent"]
        A --> D["FlowToolbarComponent"]
        A --> E["FlowStatusBarComponent"]
    end
    subgraph Agent["Agent Editor"]
        F["FlowAgentEditorComponent"] --> G["AgentPropertiesPanelComponent"]
        F --> H["AgentStepListComponent"]
        F --> I["AgentFlowTransformerService"]
        I --> A
    end
    subgraph Services["Services"]
        J["FlowStateService"]
        K["FlowLayoutService (Dagre)"]
    end

    A --> J
    A --> K

    style Generic fill:#2d6a9f,stroke:#1a4971,color:#fff
    style Agent fill:#7c5295,stroke:#563a6b,color:#fff
    style Services fill:#2d8659,stroke:#1a5c3a,color:#fff

Usage

Module Import

import { FlowEditorModule } from '@memberjunction/ng-flow-editor';

@NgModule({
  imports: [FlowEditorModule]
})
export class YourModule {}

Basic Flow Editor

<mj-flow-editor
  [Nodes]="myNodes"
  [Connections]="myConnections"
  [NodeTypes]="myNodeTypes"
  [ShowMinimap]="true"
  [ShowPalette]="true"
  [ShowGrid]="true"
  (NodeSelected)="onNodeSelected($event)"
  (ConnectionCreated)="onConnectionCreated($event)"
  (NodesChanged)="onNodesChanged($event)">
</mj-flow-editor>

Agent Flow Editor

<mj-flow-agent-editor
  [AgentId]="selectedAgentId"
  [ReadOnly]="false"
  (StepSelected)="onStepSelected($event)"
  (FlowChanged)="onFlowChanged($event)">
</mj-flow-agent-editor>

Components

| Component | Selector | Purpose | |-----------|----------|---------| | FlowEditorComponent | mj-flow-editor | Generic canvas-based flow editor | | FlowNodeComponent | internal | Renders individual nodes on the canvas | | FlowPaletteComponent | internal | Draggable palette of node types | | FlowToolbarComponent | internal | Toolbar with zoom, layout, grid controls | | FlowStatusBarComponent | internal | Displays node/connection counts | | FlowAgentEditorComponent | mj-flow-agent-editor | Agent-specific flow editor wrapper | | AgentPropertiesPanelComponent | internal | Agent property editing panel | | AgentStepListComponent | internal | List of agent steps |

FlowEditorComponent API

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | Nodes | FlowNode[] | [] | Array of flow nodes | | Connections | FlowConnection[] | [] | Array of connections between nodes | | NodeTypes | FlowNodeTypeConfig[] | [] | Available node type definitions | | ReadOnly | boolean | false | Disable editing | | ShowMinimap | boolean | true | Show minimap overlay | | ShowPalette | boolean | true | Show the node palette | | ShowGrid | boolean | true | Show background grid | | ShowStatusBar | boolean | true | Show the status bar | | ShowToolbar | boolean | true | Show the toolbar | | ShowLegend | boolean | true | Show the node type legend | | GridSize | number | 20 | Grid snap size in pixels | | AutoLayoutDirection | FlowLayoutDirection | 'vertical' | Dagre auto-layout direction |

Outputs

| Event | Type | Description | |-------|------|-------------| | NodeSelected | EventEmitter<FlowNode \| null> | A node was selected or deselected | | NodeAdded | EventEmitter<FlowNodeAddedEvent> | A node was added to the canvas | | NodeRemoved | EventEmitter<FlowNode> | A node was removed | | NodeMoved | EventEmitter<FlowNodeMovedEvent> | A node was repositioned | | ConnectionCreated | EventEmitter<FlowConnectionCreatedEvent> | A connection was created | | ConnectionRemoved | EventEmitter<FlowConnection> | A connection was removed | | ConnectionReassigned | EventEmitter<FlowConnectionReassignedEvent> | A connection endpoint was moved | | SelectionChanged | EventEmitter<FlowSelectionChangedEvent> | Selection state changed | | NodesChanged | EventEmitter<FlowNode[]> | The nodes array was modified | | ConnectionsChanged | EventEmitter<FlowConnection[]> | The connections array was modified | | NodeEditRequested | EventEmitter<FlowNode> | Double-click to edit a node |

Exported Types

• FlowNode -- A node on the canvas with id, type, label, position, size, ports, badges
• FlowConnection -- A connection between two node ports with optional label
• FlowNodeTypeConfig -- Configuration for a node type (icon, color, ports, palette info)
• FlowNodePort -- Input/output port definition
• FlowPosition / FlowSize -- Position and size types
• FlowSnapshot -- Serializable snapshot of the entire flow state
• FlowLayoutDirection -- 'vertical' | 'horizontal'

Services

| Service | Purpose | |---------|---------| | FlowStateService | Manages undo/redo, snapshots, dirty state | | FlowLayoutService | Dagre-based auto-layout for flow graphs | | AgentFlowTransformerService | Transforms MJ Agent entities into flow graph data |

Dependencies

• @memberjunction/core -- Core MJ functionality
• @memberjunction/core-entities -- Entity types for agent editor
• @foblex/flow -- Canvas rendering engine
• @dagrejs/dagre -- Graph layout algorithm