Installing and Rendering Your First Flow

Build your first interactive diagram in Angular: install Foblex Flow, render two draggable nodes, and connect them with a live connection.

Description

This guide is the shortest path from installation to a working flow. You will:

add or update the library in your Angular app,
render a minimal flow (f-flow + f-canvas),
place nodes with explicit positions,
connect them with f-connection,
apply small baseline styles you can reuse.

Install

Why / when to use this

Start here if you are:

evaluating Foblex Flow in an existing Angular application,
bootstrapping a workflow / node editor screen,
building internal tools with draggable, connected nodes,
creating the base layout before adding selection, minimap, alignment, and spacing helpers.

Minimal flow template

A minimal interactive flow consists of:

f-flow — the root container.
fDraggable — enables interaction (drag, pointer handling, editor UX pipeline).
f-canvas — the layer where nodes and connections are rendered.
Nodes with fNode and explicit positions via fNodePosition.
Connectors (fNodeOutput / fNodeInput) + f-connection that joins matching fOutputId and fInputId.

Styling baseline

Foblex Flow is intentionally UI-agnostic: it does not enforce a design system.
Use this as a practical baseline, then adapt it to your app styles.

Explanation

f-flow — root container that provides flow context.
f-canvas — viewport/rendering layer for nodes and connections.
fNode — directive that turns an element into a node.
fNodeOutput / fNodeInput — connectors that represent connection endpoints.
f-connection — renders a connection between matching fOutputId and fInputId.

Try it yourself

After you get the minimal template working, try:

moving nodes by changing [fNodePosition],
adding more nodes and connections,
experimenting with connector sides (fOutputConnectableSide, fInputConnectableSide),
changing the connection look/behavior via fType and fBehavior,
enabling additional UX helpers (selection area, minimap, alignment and spacing).

Notes / pitfalls

Nodes and connections must be inside f-canvas. Elements outside it will not participate in transform and interaction.
fOutputId and fInputId must match connector ids exactly — otherwise the connection will not render.
Always define initial node positions for predictable layout.
Keep ids stable across re-renders if your app persists or recalculates the graph.

For custom connection types, see the Examples section: /examples/custom-connection-type.

Next steps

Continue with the API references:

Example

Support Foblex Flow

If this page helped you build something (or saved you from writing drag+drop and SVG connection logic from scratch), please ⭐ the repo on GitHub — it directly helps the project grow.