@yworks/yfiles-nodestyle-configure

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

```typescript
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