fix: clean up Mermaid temporary DOM nodes after render failures (#23727)

* fix: clean up Mermaid temporary DOM nodes after render failures

* fix: prevent Mermaid temp DOM artifacts from accumulating

src/app.css

@@ -260,6 +260,12 @@ select {
 	display: none;
 }
 
+/* Hide leaked Mermaid temp containers if render cleanup misses */
+body > div[id^='dmermaid-'],
+body > iframe[id^='imermaid-'] {
+	display: none !important;
+}
+
 .scrollbar-hidden:active::-webkit-scrollbar-thumb,
 .scrollbar-hidden:focus::-webkit-scrollbar-thumb,
 .scrollbar-hidden:hover::-webkit-scrollbar-thumb {

src/lib/utils/index.ts

@@ -1713,13 +1713,29 @@ export const initMermaid = async () => {
 	return mermaid;
 };
 
-export const renderMermaidDiagram = async (mermaid, code: string) => {
+const cleanupMermaidTempElements = (id: string) => {
-	const parseResult = await mermaid.parse(code, { suppressErrors: false });
+	if (typeof document === 'undefined') {
-	if (parseResult) {
+		return;
-		const { svg } = await mermaid.render(`mermaid-${uuidv4()}`, code);
+	}
-		return svg;
+
+	document.getElementById(id)?.remove();
+	document.getElementById(`d${id}`)?.remove();
+	document.getElementById(`i${id}`)?.remove();
+};
+
+export const renderMermaidDiagram = async (mermaid: typeof import('mermaid').default, code: string, renderId?: string) => {
+	const id = renderId ?? `mermaid-${uuidv4()}`;
+	try {
+		const parseResult = await mermaid.parse(code, { suppressErrors: false });
+		if (parseResult) {
+			const { svg } = await mermaid.render(id, code);
+			return svg;
+		}
+		return '';
+	} finally {
+		// Mermaid can leave temporary d*/i* wrappers on error paths.
+		cleanupMermaidTempElements(id);
 	}
-	return '';
 };
 
 export const renderVegaVisualization = async (spec: string, i18n?: any) => {