Configurable Custom Node Styles

Make custom node styles configurable and data-driven.

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

    rect.setAttribute('fill', node.tag?.color ?? this.fillColor)
    // ... set other attributes

    return new SvgVisual(rect)
  }
}

Before Configuring

Always query 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")

Core Concepts

• •Constructor params: Class-level configuration
• •node.tag: Per-node data binding
• •TextRenderSupport: Proper text rendering with font, wrapping
• •Conditional rendering: Different visuals based on data

Configuration Strategies

1. •Constructor params - Style-level defaults
2. •node.tag - Per-node customization
3. •Combination - tag overrides constructor params

Code Examples

See examples.md for:

• •Constructor-based configuration
• •Data binding from node.tag
• •Text rendering with TextRenderSupport
• •Conditional styling
• •Combined configuration

Reference

See reference.md for:

• •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 next
• •/yfiles-nodestyle-advanced - Advanced features

MCP Tools

• •yfiles:yfiles_get_symbol_details(name="TextRenderSupport") - Text rendering API
• •yfiles:yfiles_get_symbol_details(name="Font") - Font configuration
• •yfiles:yfiles_search_by_description(query="text wrapping") - Wrapping options