svelte-flow_skill

This skill helps you build and customize node-based UIs with Svelte Flow, enabling custom nodes, edges, layouts, and interactive diagrams.

Go

3

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill linehaul-ai/linehaulai-claude-marketplace --skill svelte-flow

SKILL.md14.7 KB

Overview

This skill teaches how to build interactive node-based editors and flow visualizations using Svelte Flow. It focuses on practical patterns: nodes, edges, custom components, layouts, event handling, and advanced behaviors like floating edges and proximity connect. The guide shows how to manage immutable state, register custom node/edge types, and optimize for large graphs.

How this skill works

Svelte Flow renders nodes and edges as immutable data arrays bound to the component. You register node and edge component types, wire event handlers for user interactions (drag, connect, delete), and apply layout algorithms (e.g., dagre) to compute positions. Advanced helpers compute paths, anchors, and connectivity, while utility functions let you query and update the graph safely.

When to use it

Building workflow editors, DAG editors, or visual programming interfaces.
Creating interactive organizational charts, mind maps, or process diagrams.
When you need custom nodes, custom edge rendering, or advanced connection logic.
When you require layout algorithms (hierarchical/dagre) or automatic reconnection.
When you want export-to-image, minimap, controls, or custom panels for UX.

Best practices

Keep nodes and edges immutable—create new arrays/objects to trigger updates.
Use $state.raw for nodes/edges to avoid deep reactivity overhead on large graphs.
Register only the custom node/edge types you need to reduce bundle size.
Use dagre for hierarchical layouts and compute source/target positions after layout.
Throttle expensive handlers (drag/ proximity checks) for graphs with many nodes.

Example use cases

A workflow builder where users drag steps, auto-connect nearby nodes, and export the diagram as an image.
A dataflow or ETL visualizer with custom node UIs, animated edges, and reconnectable edges for editing pipelines.
An org chart editor using dagre layout and custom node components for profiles and actions.
A mindmap app with floating edges and contextual zoom + minimap for navigation.

FAQ

Create a new nodes array with the updated node object, or use useSvelteFlow().updateNode to apply changes immutably.

Can I create custom edge shapes and labels?

Yes. Implement a custom edge component using BaseEdge and path helpers (getBezierPath, getStraightPath, getSmoothStepPath) and register it in edgeTypes.