Skills
.Work. You
Rest

xyflow-patterns

Official

XYFlow integration patterns for ChainGraph UI.

Software Engineering#drag-and-drop#UI-performance#xyflow#React Flow#flow-editor#node-rendering#edge-rendering
Authorchaingraphlabs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

XYFlow integration patterns for the ChainGraph visual flow editor resolve the complexity of building scalable, interactive graph editors by providing battle-tested UI patterns and architected integration points.

Core Features & Use Cases

  • Custom node/edge integration with XYFlow to extend the flow editor for domain-specific visuals.
  • Efficient, pre-computed render data and delta update patterns to minimize re-renders during drag.
  • Anchor and handle systems implemented as XYFlow nodes, enabling dynamic path calculation and native drag behavior.
  • Ghost anchors to preview insertion points and simplify edge augmentation.
  • Comprehensive interaction hooks and store patterns that support selection, keyboard shortcuts, drag-and-drop, and real-time updates.

Quick Start

  • Install the XYFlow and React Flow packages compatible with your project.
  • Import and render the Flow.tsx component, and extend nodeTypes with your own chaingraphNode and anchorNode.
  • Wire edgeTypes and configure anchors, selection, and ghost-anchors flow as described in the architecture.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: xyflow-patterns
Download link: https://github.com/chaingraphlabs/chaingraph/archive/main.zip#xyflow-patterns

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.