Foblex Flow
Introduction
Getting Started
Containers
Flow Canvas
Node
Node Drag Handle
Connectors
Output Input Outlet
Connection
Connection Create Connection Connection Marker
Extends
Drag and Drop Zoom Background Line Alignment Minimap
Layouts & Behaviors
Dagre Tree ELKJS Tree
Pro Examples
Visual Programming Flow DB Management Flow Call Center Flow Scheme Editor
Foblex Flow
v12.6.4

Dagre Tree

Examples

Dagre Layout Example

Example of a tree layout using the dagre.js with Foblex Flow to create simple tree layouts.

Node1
Node2
Node3
Node4
Node5
Node6
Node7
Node8

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/layout-and-behaviors/dagre-layout-example/dagre-layout-example.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/layout-and-behaviors/dagre-layout-example/dagre-layout-example.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/layout-and-behaviors/dagre-layout-example/dagre-layout-example.component.scss [common.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/_flow-common.scss