Apply Automatic Layouts

Executes layout algorithms to automatically arrange graph elements.

Quick Start

import { HierarchicalLayout, LayoutExecutor } from '@yfiles/yfiles'

await new LayoutExecutor({
  graphComponent,
  layout: new HierarchicalLayout(),
  animationDuration: '0.5s'
}).start()

Before Applying

Always query yFiles MCP for current API:

yfiles:yfiles_search_by_description(query="layout algorithm")
yfiles:yfiles_get_symbol_details(name="HierarchicalLayout")
yfiles:yfiles_get_symbol_details(name="LayoutExecutor")

Choosing a Layout

Quick decision guide:

• Tree (no cycles)? → TreeLayout
• Directed/hierarchical? → HierarchicalLayout
• Undirected network? → OrganicLayout
• Center focus? → RadialLayout
• Orthogonal routing? → OrthogonalLayout
• Circular/cyclic? → CircularLayout

Common Layouts

See algorithms.md for:

• HierarchicalLayout (flowcharts, org charts)
• OrganicLayout (social networks)
• TreeLayout (file trees, decision trees)
• CircularLayout (cycles)
• OrthogonalLayout (technical diagrams)
• RadialLayout (star topologies)

Advanced Configuration

See configuration.md for:

• LayoutData (constraints, hints)
• Sequential layouts
• Partial layouts
• Incremental layouts
• Fixed nodes

Complete Examples

See examples.md for working code.

LayoutExecutor Options

new LayoutExecutor({
  graphComponent,        // Required
  layout,               // Required: ILayoutAlgorithm
  layoutData,           // Optional: Layout-specific data
  animationDuration: '1s',
  animateViewport: true,
  easedAnimation: true
})

After Layout

Layout is applied and animated. Viewport adjusts automatically if animateViewport: true.

MCP Tools

• yfiles:yfiles_search_documentation(query="layout algorithms") - Overview
• yfiles:yfiles_get_symbol_details(name="LayoutExecutor") - Executor API
• yfiles:yfiles_search_by_description(query="hierarchical layout") - Specific algorithms