1 files changed, 24 insertions, 15 deletions
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
index 7c7ee26c3c..773c46e791 100644
--- a/web_src/js/markup/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@@ -1,5 +1,11 @@
+import {isDarkTheme} from '../utils.js';
 const {mermaidMaxSourceCharacters} = window.config;
 
+const iframeCss = `
+  body {margin: 0; padding: 0}
+  #mermaid {display: block; margin: 0 auto}
+`;
+
 function displayError(el, err) {
   el.closest('pre').classList.remove('is-loading');
   const errorNode = document.createElement('div');
@@ -15,26 +21,22 @@ export async function renderMermaid() {
   const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
 
   mermaid.initialize({
-    mermaid: {
-      startOnLoad: false,
-    },
-    flowchart: {
-      useMaxWidth: true,
-      htmlLabels: false,
-    },
-    theme: 'neutral',
+    startOnLoad: false,
+    theme: isDarkTheme() ? 'dark' : 'neutral',
     securityLevel: 'strict',
   });
 
   for (const el of els) {
-    if (mermaidMaxSourceCharacters >= 0 && el.textContent.length > mermaidMaxSourceCharacters) {
-      displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
+    const source = el.textContent;
+
+    if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
+      displayError(el, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
       continue;
     }
 
     let valid;
     try {
-      valid = mermaid.parse(el.textContent);
+      valid = mermaid.parse(source);
     } catch (err) {
       displayError(el, err);
     }
@@ -45,10 +47,17 @@ export async function renderMermaid() {
     }
 
     try {
-      mermaid.init(undefined, el, (id) => {
-        const svg = document.getElementById(id);
-        svg.classList.add('mermaid-chart');
-        svg.closest('pre').replaceWith(svg);
+      // can't use bindFunctions here because we can't cross the iframe boundary. This
+      // means js-based interactions won't work but they aren't intended to work either
+      mermaid.mermaidAPI.render('mermaid', source, (svgStr) => {
+        const heightStr = (svgStr.match(/height="(.+?)"/) || [])[1];
+        if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
+        const iframe = document.createElement('iframe');
+        iframe.classList.add('markup-render');
+        iframe.sandbox = 'allow-scripts';
+        iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
+        iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`;
+        el.closest('pre').replaceWith(iframe);
       });
     } catch (err) {
       displayError(el, err);