# Yfiles Layout

> This skill should be used when the user asks to "apply a layout", "arrange nodes", "organize the graph", "apply hierarchical layout", "use organic layout", "use tree layout", or mentions layout algorithms like "HierarchicalLayout", "OrganicLayout", "TreeLayout", "CircularLayout", "OrthogonalLayout", or "RadialLayout".

- Skill: `yworks/yfiles-layout` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add yworks/yfiles-layout`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yworks/yfiles-layout/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yWorks (https://skillmd.com/u/yworks)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/yworks/yfiles-layout

---


# Apply Automatic Layouts

Execute layout algorithms to automatically arrange graph elements.

## Before Applying

Always query the 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")
```

## Quick Start

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

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

## Choosing a Layout

| Graph type | Algorithm |
|---|---|
| Tree (no cycles) | `TreeLayout` |
| Directed / hierarchical | `HierarchicalLayout` |
| Undirected network | `OrganicLayout` |
| Center focus / star | `RadialLayout` |
| Orthogonal routing | `OrthogonalLayout` |
| Circular / cyclic | `CircularLayout` |

## LayoutExecutor Options

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

## Additional Resources

- **`references/algorithms.md`** — Per-algorithm configuration: HierarchicalLayout, OrganicLayout, TreeLayout, CircularLayout, OrthogonalLayout, RadialLayout
- **`references/configuration.md`** — LayoutData, sequential layouts, partial layouts, incremental layouts, fixed nodes
- **`references/examples.md`** — Complete working code examples