init svelte flow

app/src/routes/+layout.svelte

@@ -2,14 +2,9 @@
 	import '../app.css';
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
-	import {title, family_tree} from '$lib/paraglide/messages.js';
 	let { children } = $props();
 </script>
 
-<svelte:head>
-	<title>{title({page:family_tree()})}</title>
-</svelte:head>
-
 <ParaglideJS {i18n}>
 	{@render children()}
 </ParaglideJS>

app/src/routes/+page.svelte

@@ -1,2 +1,21 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+    import {title, family_tree} from '$lib/paraglide/messages.js';
+    import { SvelteFlowProvider,Background, BackgroundVariant, SvelteFlow, Controls, MiniMap } from '@xyflow/svelte';
+    import type { Node, Edge, NodeTypes, NodeProps } from '@xyflow/svelte';
+
+    let nodes = $state.raw<Node[]>([]);
+    let edges = $state.raw<Edge[]>([]);
+</script>
+
+<svelte:head>
+	<title>{title({ page: family_tree() })}</title>
+</svelte:head>
+
+<div style="height:100vh;">
+	<SvelteFlowProvider>
+		<SvelteFlow bind:nodes bind:edges class="bg-base-100" fitView onlyRenderVisibleElements>
+			<Controls class="bg-base-300 text-base-content" />
+			<MiniMap class="bg-base-200" />
+		</SvelteFlow>
+	</SvelteFlowProvider>
+</div>