NODES

This is an example of a custom node implementation. Svelte Flow nodes are Svelte components, and you can display any content that you want.

NODES

This example shows how to update the data field of a specific node.

NODES

A stress test with a lot of nodes and edges.

NODES

NODES

NODES

Example showing how to automatically create edges when nodes get close to each other

NODES

NODES

NODES

This is an example of a custom node limiting the amount of connections a handle can have using the `isConnectalbe` prop.

NODES

EDGES

EDGES

Svelte Flow has four edge types- bezier, straight, step and smoothstep. It’s also possible to create a custom edge, if you need a special edge routing or controls at the edge.

EDGES

The EdgeLabelRenderer component can be used to render labels

EDGES

Example for demonstrating edge markers in Svelte Flow.

EDGES

example showing different kinds of edge types in svelte flow

EDGES

佈局

您可以將 dagre.js 與 Svelte Flow 整合，以建立樹狀佈局。如果您正在尋找更進階的佈局函式庫，elkjs 是一個不錯的替代方案。

佈局

如果您正在尋找比 dagre 更強大的替代方案，您也可以使用 elkjs 來佈局您的 Svelte Flow 圖形。

佈局

佈局

您可以使用 Svelte Flow 建立巢狀流程，稱為子流程。在這裡，您可以看到如何實作它們。

互動

這個範例結合了一些 Hook 和輔助函式，用於計算節點之間資料的流動。

互動

互動

互動

這個範例展示如何實作具有拖放功能的側邊欄。

互動

這個範例說明如何驗證節點之間的新連線。

樣式

Svelte Flow 帶有預設樣式和基礎樣式。此範例展示基礎樣式的外觀。

樣式

Svelte Flow 帶有預設樣式和基礎樣式。此範例展示基礎樣式的外觀。

樣式

在此範例中，我們示範如何使用 tailwind 設定流程樣式。

樣式

此範例展示如何重新建立 Turbo 文件中使用的樣式。

雜項

雜項

此範例展示如何將 Svelte Flow 與 Threlte 結合使用，建立一個控制 3D 場景的流程。

雜項

useSvelteFlow hook 可讓您存取 Svelte Flow 儲存區，並提供一些用於更新視口的功能。