From 284298f2a9170c87b6bf31f0173dfacd9db8b838 Mon Sep 17 00:00:00 2001
From: Nicolas <bircni@icloud.com>
Date: Sun, 19 Apr 2026 17:39:40 +0200
Subject: [PATCH] Fix Mermaid diagrams failing when node labels contain line
 breaks (#37296)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 web_src/js/features/repo-issue-pull.ts | 2 +-
 web_src/js/markup/mermaid.ts           | 7 +++----
 web_src/js/utils/dom.ts                | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web_src/js/features/repo-issue-pull.ts b/web_src/js/features/repo-issue-pull.ts
index 378f8c6d7fa..4e148b3ec0f 100644
--- a/web_src/js/features/repo-issue-pull.ts
+++ b/web_src/js/features/repo-issue-pull.ts
@@ -68,7 +68,7 @@ async function initRepoPullRequestMergeForm(box: HTMLElement) {
   view.mount(el);
 }
 
-function executeScripts(elem: HTMLElement) {
+function executeScripts(elem: Element) {
   // find any existing nonce value from the current page and apply it to the new script
   const scriptNonce = document.querySelector('script[nonce]')!.getAttribute('nonce')!;
   for (const oldScript of elem.querySelectorAll('script')) {
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index aaf6da6805d..59a10a1b9ec 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -1,4 +1,4 @@
-import {isDarkTheme, parseDom} from '../utils.ts';
+import {isDarkTheme} from '../utils.ts';
 import {displayError} from './common.ts';
 import {createElementFromAttrs, createElementFromHTML, queryElems} from '../utils/dom.ts';
 import {html, htmlRaw} from '../utils/html.ts';
@@ -81,7 +81,7 @@ async function loadMermaid(needElkRender: boolean) {
   };
 }
 
-function initMermaidViewController(viewController: HTMLElement, dragElement: SVGSVGElement) {
+function initMermaidViewController(viewController: Element, dragElement: SVGSVGElement) {
   let inited = false, isDragging = false;
   let currentScale = 1, initLeft = 0, lastLeft = 0, lastTop = 0, lastPageX = 0, lastPageY = 0;
 
@@ -201,8 +201,7 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
     try {
       // render the mermaid diagram to svg text, and parse it to a DOM node
       const {svg: svgText, bindFunctions} = await mermaid.render('mermaid', source, parentContainer);
-      const svgDoc = parseDom(svgText, 'image/svg+xml');
-      const svgNode = (svgDoc.documentElement as unknown) as SVGSVGElement;
+      const svgNode = createElementFromHTML<SVGSVGElement>(svgText);
 
       const viewControllerHtml = html`
         <div class="view-controller auto-hide-control flex-text-block">
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index e0c6f351939..d6823fc8950 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -265,7 +265,7 @@ export function isElemVisible(el: HTMLElement): boolean {
   return Boolean(!el.classList.contains('tw-hidden') && (el.offsetWidth || el.offsetHeight || el.getClientRects().length) && el.style.display !== 'none');
 }
 
-export function createElementFromHTML<T extends HTMLElement>(htmlString: string): T {
+export function createElementFromHTML<T extends Element>(htmlString: string): T {
   htmlString = htmlString.trim();
   // There is no way to create some elements without a proper parent, jQuery's approach: https://github.com/jquery/jquery/blob/main/src/manipulation/wrapMap.js
   // eslint-disable-next-line github/unescaped-html-literal