EXPLORATION 04 / 06

Layout, on purpose

What this showsA deterministic graph layout keeps the same pipeline readable in either direction. Change the direction or the breathing room, then compare the resulting positions.

inputCollect

transformClean

transformEnrich

transformBring it together

branchReady to ship?

yesno

sinkPublish

sinkReview

Svelte Flow

Left → right · Balanced spacing

One graph, two directions

The same nodes and edges are passed to the shared layout helper. Horizontal is left to right; vertical is top to bottom.

Spacing is structural

Layer gap separates stages. Node gap separates siblings in a layer. Each preset changes both so the effect is visible.

Deterministic output

7 nodes · 8 edges · horizontal · balanced

Under the hood SVELTE 5View source

src/routes/demo/layout/+page.svelte

<script lang="ts">
	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
	import DemoShell from '$lib/components/DemoShell.svelte';
	import StudioNode from '$lib/components/StudioNode.svelte';
	import { createDemoGraph } from '$lib/flow/graph';
	import { layout } from '$lib/flow/layout';
	import type { FlowEdge, FlowNode } from '$lib/flow/graph';
	import source from './+page.svelte?raw';

	type Direction = 'LR' | 'TB';
	type Spacing = 'compact' | 'balanced' | 'airy';

	const nodeTypes = {
		input: StudioNode,
		transform: StudioNode,
		branch: StudioNode,
		sink: StudioNode,
		note: StudioNode
	};

	const spacingOptions: Record<Spacing, { layerGap: number; nodeGap: number }> = {
		compact: { layerGap: 150, nodeGap: 42 },
		balanced: { layerGap: 220, nodeGap: 76 },
		airy: { layerGap: 300, nodeGap: 118 }
	};

	const starter = createDemoGraph('layout');
	let direction = $state<Direction>('LR');
	let spacing = $state<Spacing>('balanced');

	function runLayout(nextNodes: FlowNode[], nextEdges: FlowEdge[]): FlowNode[] {
		return layout(nextNodes, nextEdges, {
			direction,
			...spacingOptions[spacing],
			nodeWidth: 208,
			nodeHeight: 100
		});
	}

	let nodes = $state.raw<FlowNode[]>(runLayout(starter.nodes, starter.edges));
	let edges = $state.raw<FlowEdge[]>(starter.edges);

	const spacingLabel = (value: Spacing) =>
		value === 'compact' ? 'Compact' : value === 'airy' ? 'Airy' : 'Balanced';

	function applyLayout() {
		nodes = runLayout(nodes, edges);
	}

	function setDirection(value: Direction) {
		direction = value;
		applyLayout();
	}
</script>

<DemoShell
	slug="layout"
	title="Layout, on purpose"
	description="A deterministic graph layout keeps the same pipeline readable in either direction. Change the direction or the breathing room, then compare the resulting positions."
	{source}
>
	{#snippet toolbar()}
		<div class="flex flex-wrap items-center gap-2" aria-label="Layout controls">
			<div class="join" role="group" aria-label="Layout direction">
				<button
					class:btn-primary={direction === 'LR'}
					class:btn-ghost={direction !== 'LR'}
					class="btn btn-sm join-item"
					aria-pressed={direction === 'LR'}
					onclick={() => setDirection('LR')}
				>
					Horizontal
				</button>
				<button
					class:btn-primary={direction === 'TB'}
					class:btn-ghost={direction !== 'TB'}
					class="btn btn-sm join-item"
					aria-pressed={direction === 'TB'}
					onclick={() => setDirection('TB')}
				>
					Vertical
				</button>
			</div>
			<label class="flex items-center gap-2 text-sm">
				<span class="sr-only">Node spacing</span>
				<select
					class="select select-bordered select-sm"
					bind:value={spacing}
					aria-label="Node spacing"
					onchange={() => applyLayout()}
				>
					<option value="compact">Compact spacing</option>
					<option value="balanced">Balanced spacing</option>
					<option value="airy">Airy spacing</option>
				</select>
			</label>
			<button class="btn btn-sm btn-outline" onclick={applyLayout}>Re-apply layout</button>
		</div>
	{/snippet}

	{#snippet info()}
		<div class="grid gap-4 md:grid-cols-3">
			<div>
				<h2 class="font-semibold">One graph, two directions</h2>
				<p class="mt-1 text-sm text-base-content/70">
					The same nodes and edges are passed to the shared layout helper. Horizontal is <strong>left to right</strong>;
					vertical is <strong>top to bottom</strong>.
				</p>
			</div>
			<div>
				<h2 class="font-semibold">Spacing is structural</h2>
				<p class="mt-1 text-sm text-base-content/70">
					Layer gap separates stages. Node gap separates siblings in a layer. Each preset changes both so the effect is visible.
				</p>
			</div>
			<div>
				<h2 class="font-semibold">Deterministic output</h2>
				<p class="mt-1 text-sm text-base-content/70">
					{nodes.length} nodes · {edges.length} edges · {direction === 'LR' ? 'horizontal' : 'vertical'} · {spacingLabel(spacing).toLowerCase()}
				</p>
			</div>
		</div>
	{/snippet}

	<SvelteFlow id="demo-layout" bind:nodes bind:edges {nodeTypes} fitView fitViewOptions={{ padding: 0.2 }} aria-label="Deterministic layout workflow canvas">
		<Background />
		<Controls />
		<MiniMap pannable zoomable />
		<Panel position="top-right">
			<div class="rounded-box border border-base-300 bg-base-100/95 px-3 py-2 text-xs shadow-sm">
				<span class="font-semibold">{direction === 'LR' ? 'Left → right' : 'Top → bottom'}</span>
				<span class="text-base-content/60"> · {spacingLabel(spacing)} spacing</span>
			</div>
		</Panel>
	</SvelteFlow>
</DemoShell>

The actual route source, imported with ?raw. Shared components and graph utilities live in src/lib.