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 集成以创建树状布局。如果您正在寻找更高级的布局库，dagre 的一个不错的替代方案是 elkjs。

布局

如果您正在寻找比 dagre 更强大的替代方案，您也可以使用 elkjs 来布局您的 Svelte Flow 图。

布局

布局

您可以使用 Svelte Flow 创建嵌套的流程 - 称为子流程。在这里您可以看到如何实现它们。

交互

此示例结合了一些用于计算节点之间数据流的钩子函数和辅助函数。

交互

交互

交互

此示例展示了如何实现具有拖放功能的侧边栏。

交互

此示例解释了如何验证节点之间的新连接。

样式

Svelte Flow 带有默认样式和基础样式。 此示例展示了基础样式的外观。

样式

Svelte Flow 带有默认样式和基础样式。 此示例展示了基础样式的外观。

样式

在此示例中，我们演示了如何使用 tailwind 为流程设置样式。

样式

此示例展示了如何重新创建 turbo 文档中使用的样式。

杂项

杂项

这个示例展示了如何使用 Svelte Flow 与 Threlte 结合，创建一个控制 3D 场景的流程。

杂项

useSvelteFlow 钩子让你可以访问 Svelte Flow 存储，并提供一些用于更新视窗的函数。