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.

This is the default starting path for most Angular teams. You do not need caching, virtualization, or the connection worker on day one.

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.
validating whether Foblex Flow fits your Angular stack before adding optional advanced modules.

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).

Only add scaling features such as cache, virtualization, or worker-assisted connection rendering once you actually need them for larger scenes.

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.