Yfiles Layout
Scannednpx machina-cli add skill yWorks/yfiles-for-html-claude-plugin/yfiles-layout --openclawFiles (1)
SKILL.md
1.9 KB
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, RadialLayoutreferences/configuration.md— LayoutData, sequential layouts, partial layouts, incremental layouts, fixed nodesreferences/examples.md— Complete working code examples
Source
git clone https://github.com/yWorks/yfiles-for-html-claude-plugin/blob/main/skills/yfiles-layout/SKILL.mdView on GitHub Overview
This skill runs layout algorithms to automatically arrange graph elements using yFiles. It covers hierarchical, organic, tree, circular, orthogonal, and radial layouts to keep diagrams readable as the graph evolves.
How This Skill Works
You first verify the desired algorithm via the yFiles MCP, then invoke a LayoutExecutor with a chosen layout (for example HierarchicalLayout) and optional layoutData. The call starts the layout and can animate the transition using animationDuration. Example usage follows the yFiles pattern of importing HierarchicalLayout and LayoutExecutor and starting the executor.
When to Use It
- You need to automatically rearrange a tree with no cycles using TreeLayout.
- You want a directed or hierarchical flow using HierarchicalLayout.
- You have an undirected network and prefer an organic arrangement with OrganicLayout.
- You want a center-focused or star topology layout using RadialLayout.
- You require orthogonal routing or circular arrangement via OrthogonalLayout or CircularLayout.
Quick Start
- Step 1: Import { HierarchicalLayout, LayoutExecutor } from '@yfiles/yfiles'.
- Step 2: Create a LayoutExecutor with graphComponent and layout: new HierarchicalLayout(), animationDuration: '0.5s'.
- Step 3: await new LayoutExecutor({ graphComponent, layout: new HierarchicalLayout(), animationDuration: '0.5s' }).start()
Best Practices
- Query the current API with yfiles_search_by_description before applying a layout.
- Choose the layout that matches graph type (Tree for trees, Hierarchical for directed graphs, Organic for networks, etc.).
- Tune LayoutExecutor options like animationDuration, animateViewport, and easedAnimation for UX.
- Provide layoutData when your layout needs constraints or hints.
- Test full vs incremental layouts and handle large graphs to avoid performance issues.
Example Use Cases
- Organize a software dependency graph with TreeLayout.
- Arrange an organizational chart using HierarchicalLayout.
- Visualize a social network with OrganicLayout.
- Position a circular network using CircularLayout.
- Align a circuit diagram with OrthogonalLayout.
Frequently Asked Questions
Add this skill to your agents
