Dagre Layout

This page shows how to use @foblex/flow-dagre-layout to calculate a manual graph layout with Dagre and then render the result with Foblex Flow.

The important split is:

@foblex/flow-dagre-layout calculates positions
@foblex/flow renders nodes, connections, zoom, drag, and viewport behavior
your app remains the owner of graph state

Example

[example.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/dagre-layout/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/dagre-layout/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/dagre-layout/example.scss [apply-layout.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/utils/apply-layout.ts [generate-graph.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/utils/generate-graph.ts [layout-connection-sides.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/utils/layout-connection-sides.ts [layout-controls.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/utils/layout-controls.ts

Install

If your project already includes a custom Flow theme, you can keep schematic installation but skip style injection:

For Nx workspaces:

ng add checks @foblex/flow and the required Foblex companion packages, adds only the missing ones, and wires the default Flow theme into application styles when it is missing.

If you prefer manual installation:

You do not need to install the underlying dagre package separately because the adapter ships it as a runtime dependency.

Minimal Usage

calculate(...) returns only calculated node positions. In a real app you merge them back into your own node model by id.

How To Work With It

Build your own graph state in the shape your app needs.
Convert that graph to IFLayoutNode[] and IFLayoutConnection[].
Call calculate(...) on DagreLayoutEngine.
Merge returned positions back into your state.
Render the updated nodes in f-flow.

Options You Will Usually Change

direction: graph direction via EFLayoutDirection
algorithm: Dagre ranker via EDagreLayoutAlgorithm
nodeGap: spacing between nodes on the same level
layerGap: spacing between levels
defaultNodeSize: fallback size when a node does not provide size

What This Example Shows

Switching layout direction reactively
Switching Dagre algorithms reactively
Rebuilding the example graph from one graph factory
Adding nodes and recalculating the layout
Fitting the viewport after each render

When to use it

Use Dagre when your diagram has a mostly hierarchical structure and you want a predictable directed layout for org charts, dependency graphs, or workflow trees.