diff --git a/webview-ui/src/components/common/MermaidBlock.tsx b/webview-ui/src/components/common/MermaidBlock.tsx
index 4d8d9e6272..c5fc8b30bb 100644
--- a/webview-ui/src/components/common/MermaidBlock.tsx
+++ b/webview-ui/src/components/common/MermaidBlock.tsx
@@ -1,12 +1,16 @@
 import { useEffect, useRef, useState } from "react"
 import mermaid from "mermaid"
-import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import styled from "styled-components"
+import { useDebounceEffect } from "@src/utils/useDebounceEffect"
 import { vscode } from "@src/utils/vscode"
 import { useAppTranslation } from "@src/i18n/TranslationContext"
 import { useCopyToClipboard } from "@src/utils/clipboard"
 import CodeBlock from "./CodeBlock"
 
+// Removed previous attempts at static imports for individual diagram types
+// as the paths were incorrect for Mermaid v11.4.1 and caused errors.
+// The primary strategy will now rely on Vite's bundling configuration.
+
 const MERMAID_THEME = {
 	background: "#1e1e1e", // VS Code dark theme background
 	textColor: "#ffffff", // Main text color
diff --git a/webview-ui/vite.config.ts b/webview-ui/vite.config.ts
index c47a838afa..6657d1e131 100644
--- a/webview-ui/vite.config.ts
+++ b/webview-ui/vite.config.ts
@@ -98,8 +98,36 @@ export default defineConfig(({ mode }) => {
 			rollupOptions: {
 				output: {
 					entryFileNames: `assets/[name].js`,
-					chunkFileNames: `assets/[name].js`,
+					chunkFileNames: (chunkInfo) => {
+						if (chunkInfo.name === "mermaid-bundle") {
+							return `assets/mermaid-bundle.js`
+						}
+						// Default naming for other chunks, ensuring uniqueness from entry
+						return `assets/chunk-[hash].js`
+					},
 					assetFileNames: `assets/[name].[ext]`,
+					manualChunks: (id, { getModuleInfo }) => {
+						// Consolidate all mermaid code and its direct large dependencies (like dagre)
+						// into a single chunk. The 'channel.js' error often points to dagre.
+						if (
+							id.includes("node_modules/mermaid") ||
+							id.includes("node_modules/dagre") || // dagre is a common dep for graph layout
+							id.includes("node_modules/cytoscape") // another potential graph lib
+							// Add other known large mermaid dependencies if identified
+						) {
+							return "mermaid-bundle"
+						}
+
+						// Check if the module is part of any explicitly defined mermaid-related dynamic import
+						// This is a more advanced check if simple path matching isn't enough.
+						const moduleInfo = getModuleInfo(id)
+						if (moduleInfo?.importers.some((importer) => importer.includes("node_modules/mermaid"))) {
+							return "mermaid-bundle"
+						}
+						if (moduleInfo?.dynamicImporters.some((importer) => importer.includes("node_modules/mermaid"))) {
+							return "mermaid-bundle"
+						}
+					},
 				},
 			},
 		},
@@ -116,6 +144,11 @@ export default defineConfig(({ mode }) => {
 		},
 		define,
 		optimizeDeps: {
+			include: [
+				"mermaid",
+				"dagre", // Explicitly include dagre for pre-bundling
+				// Add other known large mermaid dependencies if identified
+			],
 			exclude: ["@vscode/codicons", "vscode-oniguruma", "shiki"],
 		},
 		assetsInclude: ["**/*.wasm", "**/*.wav"],