Dagre Tree

Description

This example demonstrates automatic graph layout using dagre.js together with Foblex Flow and Angular. The component builds a tree from a set of nodes and edges, computes positions using dagre.layout(graph), and renders nodes and connections on the flow canvas.

Example

What this example shows

• Switching layout direction: left-to-right and top-to-bottom.
• Optional auto layout behavior, where the flow resets before recalculation.
• Automatic viewport fitting after layout completes.

Technical details

• The graph is built using dagre.graphlib.Graph.
• Nodes come from GRAPH_DATA, while edges are derived from parentId.
• After layout, coordinates are mapped back into your Angular node state.

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.

Related docs and examples

• Angular Diagram Library
• ELKJS Layout Example
• Flow Docs