diff --git a/frontend/src/lib/components/DiffDrawer.svelte b/frontend/src/lib/components/DiffDrawer.svelte
index 085fba9a35..e0b64da923 100644
--- a/frontend/src/lib/components/DiffDrawer.svelte
+++ b/frontend/src/lib/components/DiffDrawer.svelte
@@ -20,7 +20,6 @@
 	}
 
 	let diffType: 'draft' | 'deployed' | 'custom' | undefined = $state(undefined)
-	let flowdiffMode: 'yaml' | 'graph' = $state('yaml')
 
 	let contentType = $derived.by(() => {
 		if (!data || !diffType) return undefined
@@ -232,34 +231,14 @@
 									{/await}
 								{:else if contentType === 'metadata'}
 									{#if isFlow}
-										<Tabs bind:selected={flowdiffMode}>
-											<Tab value="yaml" label={`YAML`} />
-											<Tab value="graph" label={`Graph`} />
-										</Tabs>
-										{#if flowdiffMode === 'yaml'}
-											{#await import('$lib/components/DiffEditor.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													open={true}
-													automaticLayout
-													className="h-full"
-													defaultLang="yaml"
-													defaultOriginal={metadata}
-													defaultModified={data.current.metadata}
-													readOnly
-												/>
-											{/await}
-										{:else if flowdiffMode === 'graph'}
-											{#await import('$lib/components/FlowGraphDiffViewer.svelte')}
-												<Loader2 class="animate-spin" />
-											{:then Module}
-												<Module.default
-													beforeYaml={metadata ?? ''}
-													afterYaml={data.current.metadata}
-												/>
-											{/await}
-										{/if}
+										{#await import('$lib/components/FlowYamlGraphDiff.svelte')}
+											<Loader2 class="animate-spin" />
+										{:then Module}
+											<Module.default
+												beforeYaml={metadata ?? ''}
+												afterYaml={data.current.metadata}
+											/>
+										{/await}
 									{:else}
 										{#await import('$lib/components/DiffEditor.svelte')}
 											<Loader2 class="animate-spin" />
diff --git a/frontend/src/lib/components/FlowViewer.svelte b/frontend/src/lib/components/FlowViewer.svelte
index b3a372182f..7f4f66a216 100644
--- a/frontend/src/lib/components/FlowViewer.svelte
+++ b/frontend/src/lib/components/FlowViewer.svelte
@@ -44,8 +44,6 @@
 		noGraphDownload = false
 	}: Props = $props()
 
-	let diffMode: 'yaml' | 'graph' = $state('yaml')
-
 	function flowToYaml(flowData: FlowType): string {
 		const cleaned = structuredClone(
 			cleanValueProperties(replaceFalseWithUndefined(flowData))
@@ -104,32 +102,12 @@
 		{#if compareFlow}
 			<TabContent value="diff">
 				<div class="flex flex-col gap-4 h-full mt-4">
-					<Tabs bind:selected={diffMode}>
-						<Tab value="yaml" label="YAML" />
-						<Tab value="graph" label="Graph" />
-					</Tabs>
 					<div class="flex-1 min-h-[400px]">
-						{#if diffMode === 'yaml'}
-							{#await import('$lib/components/DiffEditor.svelte')}
-								<Loader2 class="animate-spin" />
-							{:then Module}
-								<Module.default
-									open={true}
-									automaticLayout
-									className="h-full"
-									defaultLang="yaml"
-									defaultOriginal={beforeYaml}
-									defaultModified={afterYaml}
-									readOnly
-								/>
-							{/await}
-						{:else if diffMode === 'graph'}
-							{#await import('$lib/components/FlowGraphDiffViewer.svelte')}
-								<Loader2 class="animate-spin" />
-							{:then Module}
-								<Module.default beforeYaml={beforeYaml} afterYaml={afterYaml} />
-							{/await}
-						{/if}
+						{#await import('$lib/components/FlowYamlGraphDiff.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default {beforeYaml} {afterYaml} />
+						{/await}
 					</div>
 				</div>
 			</TabContent>
diff --git a/frontend/src/lib/components/FlowYamlGraphDiff.svelte b/frontend/src/lib/components/FlowYamlGraphDiff.svelte
new file mode 100644
index 0000000000..15ef6af1c8
--- /dev/null
+++ b/frontend/src/lib/components/FlowYamlGraphDiff.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Loader2 } from 'lucide-svelte'
+	import Tabs from './common/tabs/Tabs.svelte'
+	import Tab from './common/tabs/Tab.svelte'
+
+	interface Props {
+		beforeYaml: string
+		afterYaml: string
+	}
+
+	let { beforeYaml, afterYaml }: Props = $props()
+
+	let diffMode: 'yaml' | 'graph' = $state('yaml')
+</script>
+
+<Tabs bind:selected={diffMode}>
+	<Tab value="yaml" label="YAML" />
+	<Tab value="graph" label="Graph" />
+</Tabs>
+{#if diffMode === 'yaml'}
+	{#await import('$lib/components/DiffEditor.svelte')}
+		<Loader2 class="animate-spin" />
+	{:then Module}
+		<Module.default
+			open={true}
+			automaticLayout
+			className="h-full"
+			defaultLang="yaml"
+			defaultOriginal={beforeYaml}
+			defaultModified={afterYaml}
+			readOnly
+		/>
+	{/await}
+{:else if diffMode === 'graph'}
+	{#await import('$lib/components/FlowGraphDiffViewer.svelte')}
+		<Loader2 class="animate-spin" />
+	{:then Module}
+		<Module.default {beforeYaml} {afterYaml} />
+	{/await}
+{/if}