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:

Editing connections

Enable connection creation/reassignment and process events:

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