Basic Custom Node Styles

Create custom node visualizations using NodeStyleBase.

Quick Start

import { NodeStyleBase, SvgVisual, type IRenderContext, type INode } from '@yfiles/yfiles'

export class CustomNodeStyle extends NodeStyleBase {
  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('x', String(x))
    rect.setAttribute('y', String(y))
    rect.setAttribute('width', String(width))
    rect.setAttribute('height', String(height))
    rect.setAttribute('fill', '#0b7189')
    return new SvgVisual(rect)
  }
}

Before Creating

Always query yFiles MCP for current API:

yfiles:yfiles_get_symbol_details(name="NodeStyleBase")
yfiles:yfiles_list_members(name="NodeStyleBase")
yfiles:yfiles_search_documentation(query="custom node style")

Core Concepts

• createVisual(): Creates SVG visual (required)
• updateVisual(): Optimizes rerendering (highly recommended)
• Caching: Store render state in visual.tag for efficient updates
• SvgVisual: Wrapper for SVG elements

Implementation Steps

1. Extend NodeStyleBase
2. Implement createVisual() to create SVG
3. Implement updateVisual() for performance
4. Use visual caching to avoid unnecessary DOM updates

Note: When implementing yFiles interfaces, always use BaseClass() wrapper instead of TypeScript implements. The @yfiles/eslint-plugin rule @yfiles/fix-implements-using-baseclass enforces this pattern.

Code Examples

See examples.md for:

• Basic rectangle style
• Custom shape with path
• Optimized style with updateVisual
• Caching patterns

Reference

See reference.md for:

• NodeStyleBase API details
• SVG manipulation patterns
• Performance best practices
• Visual caching strategies

Related Skills

After mastering basics, explore:

• /yfiles-nodestyle-configure - Make styles configurable and data-driven
• /yfiles-nodestyle-interaction - Add hit testing and edge cropping
• /yfiles-nodestyle-advanced - Viewport culling and group nodes

MCP Tools

• yfiles:yfiles_get_symbol_details(name="NodeStyleBase") - Base class API
• yfiles:yfiles_get_symbol_details(name="SvgVisual") - Visual wrapper
• yfiles:yfiles_search_documentation(query="custom node style") - Tutorials