skills.rest
yWorks
yWorksOFFICIAL
Explore all skills by this author →
Website𝕏@yworksGitHub

yfiles-interactivity

Implement tooltips, context menus, graph search, and overview navigation in yFiles diagrams.

Updated Feb 10, 2026
Search Tags:#interactive#overview#tooltips#selection#context-menu#graph-search#yfiles
One-click install
npx skills add https://github.com/yWorks/yfiles-for-html-claude-plugin --skill yfiles-interactivity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: yfiles-interactivity
Source: https://github.com/yWorks/yfiles-for-html-claude-plugin/tree/main/skills/yfiles-interactivity
Command: npx skills add https://github.com/yWorks/yfiles-for-html-claude-plugin --skill yfiles-interactivity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

yFiles applications often lack built-in interactivity features like tooltips, context menus, graph search, and overview navigation. This Skill provides ready-to-use patterns and code examples to implement rich interactive behaviors and responsive interfaces.

Core Features & Use Cases

  • Tooltips for nodes/edges with HTML or text content.
  • Context menus and click handlers for item manipulation and quick actions.
  • Graph search with highlighting and overview navigation for large graphs.
  • Selection synchronization and detail panels based on current item focus.
  • Hover effects and selection events to improve UX in data visualization tasks.

Quick Start

Integrate the interactivity patterns into your GraphEditorInputMode and GraphOverviewComponent to enable tooltips, context menus, search, and hover interactions.

Frequently Asked Questions about yfiles-interactivity

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add tooltips to nodes and edges in yFiles diagrams?▼

To add tooltips to yFiles diagrams, configure GraphEditorInputMode event handlers to display text or HTML content on hover. This enables interactive node and edge information display for improved data visualization.

What is the best way to implement a context menu for graph items in yFiles?▼

Implementing a context menu in yFiles involves binding click handlers to GraphEditorInputMode for item manipulation. This approach enables quick actions and responsive interfaces directly within your interactive diagram application.

How does graph search with highlighting work in large yFiles diagrams?▼

Graph search in yFiles highlights matching nodes and edges within large diagrams by querying graph elements. Combining this with overview navigation allows users to quickly locate and focus on specific data points.

Can I synchronize a detail panel with the current selection in a yFiles application?▼

Yes, yFiles supports selection synchronization to drive detail panels based on current item focus. By handling selection events, you can update UI components to reflect the properties of the selected node or edge.

Do I need an overview component to enable navigation in large yFiles graphs?▼

Integrating a GraphOverviewComponent is the standard way to enable overview navigation in large yFiles graphs. It provides a bird's-eye view, allowing users to pan and zoom across complex interactive diagrams efficiently.

Why are my hover effects not triggering in the yFiles GraphEditorInputMode?▼

Hover effects not triggering in yFiles often indicate missing event handling configuration within GraphEditorInputMode. You must explicitly bind hover events to apply visual changes and improve UX in data visualization tasks.

Related Skills

Explore More Software Engineering Skills→
yWorksyWorks

yfiles-layout

Apply yFiles layout algorithms to arrange graph structures automatically.

Official
Advanced
chaingraphlabschaingraphlabs
15

xyflow-patterns

Integrate XYFlow patterns into the ChainGraph visual flow editor.

Official
Advanced
SARAMALI15792SARAMALI15792
7

project-overview

Map monorepo layout, tech stack, and core modules for codebase navigation.

Community
Intermediate
atomeamatomeam
2

dynamic-ui-automation-javascript

Execute JavaScript and hover events for dynamic UI elements in Playwright.

Community
Intermediate