How do I install the Yfiles Layout skill?

Run npx skillmds@latest add majiayu000/yfiles-layout in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Yfiles Layout safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Yfiles Layout?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Yfiles Layout free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Yfiles Layout?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Yfiles Layout by majiayu000 — Agent Skill

Name: Yfiles Layout
Rating: 4.2 (5 reviews)
Author: majiayu000

Yfiles Layout

Applies automatic layout algorithms (HierarchicalLayout, OrganicLayout, TreeLayout, CircularLayout, OrthogonalLayout, RadialLayout) to arrange graph elements. Use when organizing graphs, applying layouts, or when user mentions "hierarchical", "organic", "tree", "circular", "orthogonal", "radial", "arrange nodes", or "apply layout".

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

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

---name: yfiles-layoutdescription: Applies automatic layout algorithms (HierarchicalLayout, OrganicLayout, TreeLayout, CircularLayout, OrthogonalLayout, RadialLayout) to arrange graph elements. Use when organizing graphs, applying layouts, or when user mentions "hierarchical", "organic", "tree", "circular", "orthogonal", "radial", "arrange nodes", or "apply layout".--- # Apply Automatic Layouts Executes layout algorithms to automatically arrange graph elements. ## Quick Start ```typescript 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](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](configuration.md) for: - LayoutData (constraints, hints) - Sequential layouts - Partial layouts - Incremental layouts - Fixed nodes ## Complete Examples See [examples.md](examples.md) for working code. ## LayoutExecutor Options ```typescript 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

Frequently asked questions