From db05e3473616205e29df20f443348c28bdbf644b Mon Sep 17 00:00:00 2001
From: Shirasawa <764798966@qq.com>
Date: Tue, 16 Sep 2025 09:43:03 +0000
Subject: [PATCH] feat: dynamically load mermaid.js

---
 src/lib/components/chat/Chat.svelte           |  1 -
 .../components/chat/Messages/CodeBlock.svelte | 42 ++-----------------
 src/lib/utils/index.ts                        | 18 ++++++++
 src/routes/(app)/+layout.svelte               |  1 -
 4 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index ea9ef1fd09..0ebb5dfb4e 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-sonner';
-	import mermaid from 'mermaid';
 	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
 
 	import { getContext, onDestroy, onMount, tick } from 'svelte';
diff --git a/src/lib/components/chat/Messages/CodeBlock.svelte b/src/lib/components/chat/Messages/CodeBlock.svelte
index 08ce93ecea..c9ff9458ad 100644
--- a/src/lib/components/chat/Messages/CodeBlock.svelte
+++ b/src/lib/components/chat/Messages/CodeBlock.svelte
@@ -1,12 +1,8 @@
 <script lang="ts">
 	import hljs from 'highlight.js';
 
-	import mermaid from 'mermaid';
-
-	import { v4 as uuidv4 } from 'uuid';
-
 	import { getContext, onMount, tick, onDestroy } from 'svelte';
-	import { copyToClipboard } from '$lib/utils';
+	import { copyToClipboard, renderMermaidDiagram } from '$lib/utils';
 
 	import 'highlight.js/styles/github-dark.min.css';
 
@@ -325,27 +321,11 @@
 		};
 	};
 
-	let debounceTimeout;
-
-	const drawMermaidDiagram = async () => {
-		try {
-			if (await mermaid.parse(code)) {
-				const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
-				mermaidHtml = svg;
-			}
-		} catch (error) {
-			console.log('Error:', error);
-		}
-	};
-
 	const render = async () => {
-		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
-			(async () => {
-				await drawMermaidDiagram();
-			})();
-		}
-
 		onUpdate(token);
+		if (lang === 'mermaid' && (token?.raw ?? '').slice(-4).includes('```')) {
+			mermaidHtml = await renderMermaidDiagram(code);
+		}
 	};
 
 	$: if (token) {
@@ -392,20 +372,6 @@
 		if (token) {
 			onUpdate(token);
 		}
-
-		if (document.documentElement.classList.contains('dark')) {
-			mermaid.initialize({
-				startOnLoad: true,
-				theme: 'dark',
-				securityLevel: 'loose'
-			});
-		} else {
-			mermaid.initialize({
-				startOnLoad: true,
-				theme: 'default',
-				securityLevel: 'loose'
-			});
-		}
 	});
 
 	onDestroy(() => {
diff --git a/src/lib/utils/index.ts b/src/lib/utils/index.ts
index 09bab3cf56..fe56581761 100644
--- a/src/lib/utils/index.ts
+++ b/src/lib/utils/index.ts
@@ -1569,3 +1569,21 @@ export const decodeString = (str: string) => {
 		return str;
 	}
 };
+
+export const renderMermaidDiagram = async (code: string) => {
+	try {
+		const { default: mermaid } = await import('mermaid');
+		mermaid.initialize({
+			startOnLoad: true,
+			theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
+			securityLevel: 'loose'
+		});
+		if (await mermaid.parse(code)) {
+			const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
+			return svg;
+		}
+	} catch (error) {
+		console.log('Failed to render mermaid diagram:', error);
+		return '';
+	}
+};
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 7ae71b8663..2207898228 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -4,7 +4,6 @@
 	import { openDB, deleteDB } from 'idb';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
-	import mermaid from 'mermaid';
 
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';