Yfiles layout

Skill yWorks/yfiles-for-html-skills/skills/yfiles-layout

Comprehensive Claude Code plugin for yFiles for HTML development - includes skills for initialization, graph building, layouts, custom styling, and interactive features

Install

npx -y skills add yWorks/yfiles-for-html-skills --skill yfiles-layout

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.md

1.9 KB, as published. Nobody here has run it

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

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

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

Gives 0 of the 12 instructions most ui components skills give

Counted across 343 of the 344 authors here whose files we hold, read 2026-08-06

Make touch targets at least 44x44 pixelsin 48 of 343, across 17 files
Use SVG icons instead of emojisin 39 of 343, across 12 files
Ensure minimum color contrast of 4.5:1in 36 of 343, across 9 files
provide visible focus rings on interactive elementsin 26 of 343, across 10 files
Use semantic color tokens instead of raw hex codesin 26 of 343, across 10 files
Generate a design system before codingin 23 of 343, across 6 files
Respect prefers-reduced-motion user settingsin 22 of 343, across 6 files
use semantic html elementsin 21 of 343, across 14 files
use semantic tailwind colorsin 19 of 343, across 6 files
Match style to product type and industryin 18 of 343, across 2 files
use consistent design tokensin 18 of 343, across 6 files
build complex interfaces from composable primitivesin 18 of 343, across 6 files

Said here and by no other author read

query yfiles mcp for current api
execute layout algorithms to arrange graph elements
use tree layout for graphs without cycles
use hierarchical layout for directed or hierarchical graphs
use organic layout for undirected networks
use radial layout for center focus or star graphs

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.