A comprehensive Claude Code plugin providing skills for developing yFiles for HTML applications.
This plugin includes 8 specialized skills covering all aspects of yFiles for HTML development:
- yfiles-init - Initialize yFiles applications with GraphComponent and license registration
- yfiles-graphbuilder - Build graphs from business data using GraphBuilder
- yfiles-layout - Apply automatic layout algorithms (hierarchical, organic, tree, etc.)
- yfiles-nodestyle-basic - Create custom node styles with SVG rendering
- yfiles-nodestyle-configure - Make styles configurable with constructor params and node.tag
- yfiles-nodestyle-interaction - Implement hit testing and edge cropping
- yfiles-nodestyle-advanced - Viewport culling, custom bounds, and group nodes
- yfiles-interactivity - Add tooltips, context menus, search, overview, and click handlers
✅ Comprehensive Coverage - From initialization to advanced interactions ✅ Best Practices - Follows official yFiles patterns and conventions ✅ Code Examples - Real examples extracted from yFiles demos ✅ API References - Complete documentation for each feature ✅ MCP Integration - Works with yFiles MCP server for up-to-date API info ✅ Progressive Disclosure - Main skill files with detailed reference docs ✅ ESLint Integration - Includes guidance for the official @yfiles/eslint-plugin to catch common mistakes
Add the yWorks marketplace and install the plugin in two steps:
/plugin marketplace add yworks/yfiles-claude-marketplace
/plugin install yfiles-for-html@yfiles/plugin install yworks/yfiles-for-html-claude-plugin# Clone the repository
git clone https://github.com/yworks/yfiles-for-html-claude-plugin.git
# Use with Claude Code
claude --plugin-dir ./yfiles-for-html-claude-pluginSkills can be invoked explicitly or will be automatically activated by Claude based on context.
Use the / command to invoke a specific skill:
/yfiles:init # Initialize a new yFiles application
/yfiles:graphbuilder # Build graph from data
/yfiles:layout # Apply layout algorithms
/yfiles:nodestyle-basic # Create custom node styles
/yfiles:interactivity # Add interactive featuresClaude will automatically use these skills when you:
- Mention yFiles-related tasks: "create a yFiles app", "add tooltips", "apply hierarchical layout"
- Ask about specific features: "how to customize node styles", "add graph search"
- Work with yFiles code that needs modification or explanation
Create a new yFiles application with a hierarchical layout
Claude will use the yfiles-init and yfiles-layout skills automatically.
Load this JSON data into a yFiles graph:
[
{ id: 1, name: "Node 1" },
{ id: 2, name: "Node 2" }
]
Claude will use the yfiles-graphbuilder skill.
Add tooltips showing node details and a context menu with delete action
Claude will use the yfiles-interactivity skill.
Initializes yFiles applications with proper setup:
- License registration
- GraphComponent creation
- Input mode configuration
- Default styles setup
Triggers: "initialize", "create app", "new demo", "setup yfiles"
Builds graphs from business data:
- GraphBuilder for node/edge data
- TreeBuilder for hierarchical data
- AdjacencyGraphBuilder for adjacency structures
- Data binding and ID mapping
Triggers: "load data", "import JSON", "build graph", "GraphBuilder"
Applies automatic layout algorithms:
- HierarchicalLayout for layered structures
- OrganicLayout for force-directed layouts
- TreeLayout for tree structures
- CircularLayout, OrthogonalLayout, RadialLayout
Triggers: "layout", "arrange nodes", "hierarchical", "organic", "tree"
Creates custom node visualizations:
- Extend NodeStyleBase
- Implement createVisual/updateVisual
- SVG rendering
- Visual caching for performance
Triggers: "custom node style", "NodeStyleBase", "createVisual", "custom rendering"
Makes styles configurable:
- Constructor parameters
- node.tag data binding
- TextRenderSupport for text
- Dynamic styling based on data
Triggers: "configurable style", "node.tag", "data binding", "TextRenderSupport"
Handles user interaction with custom styles:
- isHit() for accurate click detection
- getOutline() for edge cropping
- GeneralPath API
- Custom shape hit testing
Triggers: "isHit", "hit testing", "getOutline", "edge cropping"
Advanced rendering features:
- isVisible() for viewport culling
- getBounds() for custom rendering bounds
- Group node styles
- Performance optimization
Triggers: "isVisible", "getBounds", "group node", "viewport culling"
Adds interactive features:
- Tooltips with query-item-tool-tip
- Context menus with populate-item-context-menu
- Graph search with highlighting
- GraphOverviewComponent
- Click and selection events
Triggers: "tooltip", "context menu", "search", "overview", "click handler"
The yFiles MCP server is automatically used by this plugin! When you install the plugin, the yFiles MCP server will be configured and used.
These skills are designed to work seamlessly with the yFiles MCP server, which provides:
- Real-time access to yFiles API documentation
- Symbol details and member lists
- Implementation examples from official demos
- Best practices and patterns
Note: The MCP server will be used automatically when Claude Code loads the plugin. However, you must be logged into the yFiles dev suite for the MCP server to access the documentation. Run
npx --yes yfiles-dev-suite@latestif you haven't already.
The skills will automatically query the MCP server for:
- Current API documentation
- Symbol details and member lists
- Implementation examples
- Best practices
- yFiles for HTML - Version 3.0 or later
- Claude Code - Latest version with plugin support
- Node.js - Version 22+ (for yFiles demos and build tools)
Each skill includes:
- SKILL.md - Main skill file with overview and quick start
- examples.md - Complete code examples with explanations
- reference.md - Detailed API documentation and patterns
Supporting documentation:
- patterns.md - Common implementation patterns (some skills)
- algorithms.md - Algorithm-specific guides (layout skill)
- advanced.md - Advanced topics (some skills)
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-skill - Follow the existing skill structure and style
- Test your changes with real yFiles projects
- Submit a pull request
See CHANGELOG.md for version history and changes.
MIT License - see LICENSE file for details.
- Issues: Report bugs or request features via GitHub Issues
- yFiles Support: For yFiles-specific questions, contact yWorks support
- Claude Code: For Claude Code questions, see official documentation
Skills based on official yFiles for HTML demos and documentation. Examples extracted from:
- yFiles for HTML 3.0.0.4 Complete Evaluation package
- Official yFiles tutorials and demos
- yFiles MCP server documentation
Note: This plugin requires a valid yFiles for HTML license for production use. The evaluation version is suitable for development and testing.