yfiles-nodestyle-configure - SKILL.md Agent Skill

name: yfiles-nodestyle-configure description: 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".

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