ELK.js Layout

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

The important split is:

@foblex/flow-elk-layout calculates positions with ELK.js
@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/f-layout/elk-layout/example.html [example.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/f-layout/elk-layout/example.ts [example.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/f-layout/elk-layout/example.scss [apply-layout.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/f-layout/utils/apply-layout.ts [generate-graph.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/f-layout/utils/generate-graph.ts [layout-connection-sides.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/f-layout/utils/layout-connection-sides.ts [layout-controls.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/libs/f-examples/plugins/f-layout/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 elkjs 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.

In the demo integration, non-directional ELK.js algorithms automatically switch connectors into calculate mode so anchors adapt to the actual node placement.

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 ElkLayoutEngine.
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: ELK.js algorithm via EElkLayoutAlgorithm
nodeGap: spacing between nodes
layerGap: spacing between layers
defaultNodeSize: fallback size when a node does not provide size
layoutOptions: raw ELK.js options forwarded to the engine

Available algorithms in the adapter:

EElkLayoutAlgorithm.FIXED
EElkLayoutAlgorithm.BOX
EElkLayoutAlgorithm.RANDOM
EElkLayoutAlgorithm.LAYERED
EElkLayoutAlgorithm.STRESS
EElkLayoutAlgorithm.MRTREE
EElkLayoutAlgorithm.RADIAL
EElkLayoutAlgorithm.FORCE
EElkLayoutAlgorithm.DISCO
EElkLayoutAlgorithm.SPORE_OVERLAP
EElkLayoutAlgorithm.SPORE_COMPACTION
EElkLayoutAlgorithm.RECT_PACKING

What This Example Shows

Switching layout direction reactively
Switching ELK.js algorithms reactively
Rebuilding the example graph from one graph factory
Adding nodes and recalculating the layout
Passing shared options and ELK.js-specific options through one API

When to use it

Generate automatic layouts for complex or dense graphs.
Recompute node placement after data changes.
Compare freeform editing with layout-assisted views.

If layout quality matters more than minimal configuration, ELK.js is usually the better starting point than a simpler tree-only approach.