From 358640733709e0a82847eea62242ba026510309e Mon Sep 17 00:00:00 2001
From: koyo922 <koyo922@users.noreply.github.com>
Date: Thu, 2 Apr 2026 16:58:21 +0800
Subject: [PATCH] fix: allow <br> line breaks in Mermaid node labels

The GitHub theme CSS sets 'code br { display: none }' which hides <br>
elements inside Mermaid <code> blocks, preventing multi-line node labels.

This fix:
1. Adds a CSS override for code.mermaid br to restore display
2. Recalculates SVG viewBox after rendering to prevent clipping
3. Sets securityLevel to 'loose' so Mermaid preserves <br> tags

Fixes #263
---
 content/index.css  |  9 +++++++++
 content/mermaid.js | 15 ++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/content/index.css b/content/index.css
index 63b8dd9..5bc3473 100644
--- a/content/index.css
+++ b/content/index.css
@@ -335,6 +335,15 @@ pre:has(> code.mermaid) {
   height: 100%;
 }
 
+/*fix: allow <br> line breaks inside mermaid node labels
+  The github theme sets `code br { display: none }` which hides <br> inside
+  mermaid `<code>` elements, preventing multi-line node labels from rendering.
+  See: https://github.com/simov/markdown-viewer/issues/263 */
+.markdown-body code.mermaid br,
+.markdown-theme code.mermaid br {
+  display: inline !important;
+}
+
 /*mermaid text bold effect*/
 svg[id^=mermaid] text {
   stroke: none !important;
diff --git a/content/mermaid.js b/content/mermaid.js
index 0e3e2c0..6a1c02c 100644
--- a/content/mermaid.js
+++ b/content/mermaid.js
@@ -5,6 +5,18 @@ var mmd = (() => {
   var walk = (regex, string, result = [], match = regex.exec(string)) =>
     !match ? result : walk(regex, string, result.concat(match[1]))
 
+  var fixMermaidViewBox = () => {
+    document.querySelectorAll('pre code.mermaid svg').forEach((svg) => {
+      var bbox = svg.getBBox()
+      if (bbox.height > 0) {
+        var pad = 16
+        svg.setAttribute('viewBox',
+          (bbox.x - pad) + ' ' + (bbox.y - pad) + ' ' +
+          (bbox.width + pad * 2) + ' ' + (bbox.height + pad * 2))
+      }
+    })
+  }
+
   return {
     render: () => {
       if (loaded) {
@@ -19,7 +31,7 @@ var mmd = (() => {
         state._themes[state.theme] === 'dark' ||
         (state._themes[state.theme] === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
         ? 'dark' : 'default'
-      mermaid.initialize({theme})
+      mermaid.initialize({theme, securityLevel: 'loose'})
       mermaid.init({theme}, 'code.mermaid')
       loaded = true
 
@@ -28,6 +40,7 @@ var mmd = (() => {
         var svg = Array.from(document.querySelectorAll('pre code.mermaid svg'))
         if (diagrams.length === svg.length) {
           clearInterval(timeout)
+          setTimeout(fixMermaidViewBox, 100)
           svg.forEach((diagram) => {
             var panzoom = Panzoom(diagram, {canvas: true})
             diagram.parentElement.parentElement.addEventListener('wheel', (e) => {