@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

FlowEditorComponent API

Inputs

Outputs

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

Dependencies

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