How do I access per-node data for styling?

Use node.tag with optional chaining and a default value, e.g. node.tag?.color ?? this.fillColor.

What about text rendering in the style?

Use TextRenderSupport to ensure correct font, alignment, and wrapping when rendering node text.

How should I mix constructor defaults with node.tag data?

Follow the combination pattern: node.tag takes precedence over constructor defaults, with defaults provided as fallbacks for stability.

Yfiles Nodestyle Configure

Scanned

npx machina-cli add skill yWorks/yfiles-for-html-claude-plugin/yfiles-nodestyle-configure --openclaw

Files (1)

SKILL.md

2.6 KB

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

Source

git clone https://github.com/yWorks/yfiles-for-html-claude-plugin/blob/main/skills/yfiles-nodestyle-configure/SKILL.mdView on GitHub

Overview

Configurable Custom Node Styles lets you drive node visuals from per-node data (node.tag) while maintaining shared defaults via constructor parameters. This approach supports data binding and text rendering with TextRenderSupport, enabling flexible, data-driven visuals across diagrams. The combination pattern lets node.tag override constructor defaults for per-node customization.

How This Skill Works

You create a NodeStyleBase subclass with constructor defaults. During rendering, the style reads per-node data from node.tag and uses it to override properties (e.g., color) with a safe fallback to the constructor value. Text rendering is handled via TextRenderSupport to ensure proper font, alignment, and wrapping, while the node.tag data drives per-node customization.

When to Use It

Need a shared default style across nodes but allow per-node overrides via node.tag
Render node labels with proper font, alignment, and wrapping using TextRenderSupport
Bind node data to visuals so colors, sizes, or labels react to node.tag properties
Choose between constructor-only, node.tag-only, or a mix where node.tag takes precedence
Build scalable diagrams with data-driven visuals while maintaining a simple default configuration

Quick Start

Step 1: Create a class ConfigurableNodeStyle extends NodeStyleBase with a constructor default like fillColor: string = '#0b7189'
Step 2: In createVisual, apply style from node.tag with a fallback, e.g., rect.setAttribute('fill', node.tag?.color ?? this.fillColor) and use node.layout for x/y/width/height
Step 3: Return the SvgVisual and leverage TextRenderSupport for any text rendering you add

Best Practices

Define clear defaults in the constructor to establish a baseline appearance
Document which node.tag properties affect visuals (e.g., color, label, size)
Use node.tag with safe fallbacks like node.tag?.color ?? this.fillColor
Incorporate TextRenderSupport to ensure readable and properly formatted text
Keep style logic decoupled from business data structures to improve maintainability

Example Use Cases

Network diagram where node.tag.color controls fill color and node.tag.title provides the label
Organizational chart with per-node titles and department tags driving text and color
Process flow where node.tag.priority influences stroke or fill to highlight important steps
Geographic map where node.tag.region selects region-specific styling for nodes
Project roadmap where node.tag.progress determines label size or color to reflect status

Frequently Asked Questions

Add this skill to your agents