yfiles-nodestyle-basic

Development

Creates basic custom node styles by extending NodeStyleBase and implementing createVisual/updateVisual methods. Handles SVG rendering, visual caching, and performance optimization. Use when creating custom node visualizations, implementing custom shapes, or when user mentions "custom node style", "NodeStyleBase", "createVisual", "updateVisual", or "custom rendering".

View on GitHub ↗

QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

Open your project in Codex.
Copy and paste the prompt below.
Review files and risks before approving any action.

Prompt to paste

Inspect the Agent Skill at https://github.com/majiayu000/claude-skill-registry/blob/HEAD/skills/design/yfiles-nodestyle-basic/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/yfiles-nodestyle-basic, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

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

Extend NodeStyleBase
Implement createVisual() to create SVG
Implement updateVisual() for performance
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