Build interactive, node-based diagrams and workflow editors using Svelte Flow and Svelte 5 reactivity patterns.
This skill provides specialized guidance for building complex node-based UIs with Svelte Flow (@xyflow/svelte). It offers implementation patterns for Svelte 5 state management, custom node and edge creation, and advanced interaction features like proximity connecting and floating edges. Whether you're developing a visual workflow builder, a DAG editor, or a dynamic organizational chart, this skill ensures you use optimized state handling and industry-standard layout algorithms like Dagre to create high-performance, interactive graph visualizations.
主な機能
01Expert implementation of custom nodes and edges using Svelte 5 snippets and state
02Advanced interaction patterns including proximity connect and edge reconnection
031 GitHub stars
04Hierarchical layout management with Dagre integration for structured diagrams
05Performance-optimized state handling for large-scale node graphs
06Seamless integration of MiniMap, Controls, and Background utility components
ユースケース
01Developing interactive organizational charts, mind maps, and process visualizations
02Building a visual automation or workflow editor for SaaS applications
03Creating dynamic data-flow visualizations and DAG editors for developer tools
