Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

Subflows

This example shows how to implement subflows in Svelte Flow. Subflows allow you to create nested or grouped flows within your main flow, which is useful for organizing complex diagrams into logical sections or implementing hierarchical structures.

<script lang="ts"> import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap, type Node, type Edge, } from '@xyflow/svelte'; import { initialNodes, initialEdges } from './nodes-and-edges'; import '@xyflow/svelte/dist/style.css'; let nodes = $state.raw<Node[]>(initialNodes); let edges = $state.raw<Edge[]>(initialEdges); </script> <main> <SvelteFlow bind:nodes bind:edges fitView minZoom={0.1} maxZoom={2.5} defaultEdgeOptions={{ zIndex: 1 }} > <Controls /> <Background variant={BackgroundVariant.Dots} /> <MiniMap /> </SvelteFlow> </main> <style> main { height: 100vh; } :global(.svelte-flow .svelte-flow__node.parent) { background-color: rgba(220, 220, 255, 0.4); } </style>
Last updated on