Yfiles nodestyle configure

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

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-configure

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 "make a node style configurable", "bind node data to visuals", "render text in a node style", "use node.tag in a style", or mentions "configurable style", "node.tag", "data binding", "TextRenderSupport", or "text rendering in custom style".

SKILL.md

2.6 KB, as published. Nobody here has run it

Configurable Custom Node Styles

Make custom node styles configurable via constructor parameters and data-driven via node.tag.

Before Configuring

Always query the yFiles MCP for current API:

yfiles:yfiles_get_symbol_details(name="TextRenderSupport")
yfiles:yfiles_search_documentation(query="node tag data binding")
yfiles:yfiles_search_by_description(query="text rendering")

Quick Start

export class ConfigurableNodeStyle extends NodeStyleBase {
  constructor(public fillColor: string = '#0b7189') {
    super()
  }

  protected createVisual(context: IRenderContext, node: INode): SvgVisual {
    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect')
    const { x, y, width, height } = node.layout

    // node.tag overrides constructor default
    rect.setAttribute('fill', node.tag?.color ?? this.fillColor)
    rect.setAttribute('x', String(x))
    rect.setAttribute('y', String(y))
    rect.setAttribute('width', String(width))
    rect.setAttribute('height', String(height))

    return new SvgVisual(rect)
  }
}

Core Concepts

Constructor params: Style-level defaults, shared across all nodes using this style instance
node.tag: Per-node data — use node.tag?.property ?? defaultValue to allow overrides
TextRenderSupport: Proper text rendering with font, alignment, and wrapping
Combination pattern: node.tag takes precedence over constructor params

Configuration Strategies

Strategy	When to use
Constructor params only	All nodes share the same appearance
`node.tag` only	Each node has its own data
Constructor + `node.tag`	Shared defaults, per-node overrides

Additional Resources

references/examples.md — Constructor-based configuration, node.tag data binding, text rendering with TextRenderSupport, conditional styling, combined patterns
references/reference.md — Constructor patterns, node.tag structure recommendations, TextRenderSupport API, font and text wrapping options

Related Skills

/yfiles-nodestyle-basic — Learn basic rendering first
/yfiles-nodestyle-interaction — Add hit testing
/yfiles-nodestyle-advanced — Advanced rendering features