Yfiles nodestyle advanced

Skill yWorks/yfiles-for-html-skills/skills/yfiles-nodestyle-advanced

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-nodestyle-advanced

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 "implement viewport culling", "implement isVisible", "implement getBounds", "create a group node style", "optimize rendering performance", or mentions "isVisible", "getBounds", "group node style", "folder tab", "viewport culling", or "rendering outside layout bounds".

SKILL.md

2.7 KB, as published. Nobody here has run it

Advanced Node Style Features

Implement viewport culling, custom rendering bounds, and group node styles.

Before Implementing

Always query the yFiles MCP for current API:

yfiles:yfiles_get_symbol_details(name="NodeStyleBase")
yfiles:yfiles_list_members(name="NodeStyleBase")
yfiles:yfiles_search_documentation(query="group node style")
yfiles:yfiles_get_symbol_details(name="INode")

Quick Start

export class AdvancedNodeStyle extends NodeStyleBase {
  protected isVisible(
    context: ICanvasContext,
    rectangle: Rect,
    node: INode
  ): boolean {
    // Only render if node intersects viewport
    return node.layout.toRect().intersects(rectangle)
  }

  protected getBounds(context: ICanvasContext, node: INode): Rect {
    // Return actual rendering bounds (including badges, shadows, etc.)
    return node.layout.toRect().getEnlarged(10)
  }
}

Core Concepts

isVisible(): Skips rendering when the node is outside the viewport — implement when the node renders outside its layout bounds (e.g. shadows, glows)
getBounds(): Returns the actual rendered bounding box — implement when visual elements extend beyond node.layout (badges, decorators)
Group node styles: Style class for container/parent nodes in hierarchical graphs
Folding: Collapsible group nodes

When to Implement Each Method

isVisible(): Node renders content beyond its layout rectangle
getBounds(): Badges, drop shadows, or other decorators extend outside the layout rect
Group styles: Hierarchical graph with parent/child node relationships

Note: When implementing yFiles interfaces, always use BaseClass() wrapper instead of TypeScript implements. The @yfiles/eslint-plugin rule @yfiles/fix-implements-using-baseclass enforces this pattern.

Additional Resources

references/examples.md — Viewport culling, custom bounds with badges, group node styles, folder tab rendering
references/reference.md — isVisible() strategies, getBounds() patterns, group node API, performance considerations

Related Skills

/yfiles-nodestyle-basic — Start here for rendering fundamentals
/yfiles-nodestyle-configure — Data-driven configuration
/yfiles-nodestyle-interaction — Hit testing and edge cropping