Upgrade your apps with Svelte Flow Pro Examples

Automatic layouting for nodes after adding new items with three algorithm implementations: dagre, elkjs, and d3-force. Perfect for complex workflows that need automatic positioning.

Copy and paste functionality for selected of nodes. This implementation demonstrates how to enable users to duplicate selected parts of a flow.

Hierarchical flow with collapsible node trees. This example implements expandable and collapsible nodes.

An example about how to freehand drawing functionality to a React Flow app. Click 'Drawing Mode' to enter drawing mode, then click and drag to create freehand drawings that become selectable and resizable nodes.

This example shows how to implement a hook that animates between the previous and new node positions.

This example shows how to group nodes by dragging them into a container and detach them with a custom node toolbar button.

A grouping feature based on the selection box. This example shows how to group nodes together and ungroup them with a custom node toolbar button.

A tiny app that shows how to generate an image of a flow. Including a server for the image creation and a frontend to adjust and display the image.

Custom nodes in various shapes commonly used in flowcharts including diamonds, circles and cylinders. Demonstrates how to create node types with SVG shapes to represent different operations in technical diagrams, process flows, and business workflows.

This example shows how to implement undo and redo for adding, deleting, connecting, and positioning nodes and edges.