Creating a Visual Call Workflow Editor with Angular

In this tutorial, we build a visual call-flow editor in Angular using @foblex/flow. It is a useful reference if you want to turn the library into a domain-specific workflow builder instead of a generic diagram.

Create project and install dependencies

For Nx workspaces, use:

If you prefer manual installation, install the required companion packages explicitly:

Defining models

To manage workflow elements, define base models:

Workflow elements configuration

We define node types and a node metadata map (name, icon, color, outputs):

Editor component

Generate the editor component:

Then initialize basic editor state:

Flow visualization

Render connections and nodes inside f-flow / f-canvas:

Adding new nodes

Prepare draggable node templates and handle node creation:

dropPosition is optional. When it is unavailable, externalItemRect provides the dragged item’s flow-space coordinates.

Editing connections

Enable connection creation/reassignment and process events:

previousSourceId and previousTargetId contain the endpoints before reassignment. The corresponding nextSourceId or nextTargetId can be undefined when the endpoint is dropped on the canvas; dropPosition contains that canvas position. For connection creation, the same case is represented by an undefined targetId together with dropPosition.

This gives users a flexible way to build and modify call routing logic visually.