Yfiles Nodestyle Configure

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

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