chrishrb · chrishrb · Mar 14, 2026 · Mar 14, 2026 · Mar 14, 2026 · Mar 14, 2026
diff --git a/defaults/static/css/github-mermaid.css b/defaults/static/css/github-mermaid.css
@@ -23,4 +23,14 @@
   background: #2a1616;
   color: #ff7b72;
   border-color: #da3633;
-}
+}
+
+.mermaid {
+  background: transparent !important;
+  opacity: 0;
+  transition: opacity 0.15s ease-in;
+}
+
+.mermaid.rendered {
+  opacity: 1;
+}
diff --git a/defaults/static/js/mermaid-init.js b/defaults/static/js/mermaid-init.js
@@ -0,0 +1,73 @@
+(function(){
+  var lightThemeVariables = {
+    primaryColor: '#ECECFF',
+    primaryTextColor: 'black',
+    primaryBorderColor: 'hsl(259.6261682243, 59.7765363128%, 87.9019607843%)',
+    lineColor: 'hsl(259.6261682243, 59.7765363128%, 87.9019607843%)'
+  };
+
+  var darkThemeVariables = {
+    primaryColor: '#1f2020',
+    primaryTextColor: 'lightgrey',
+    primaryBorderColor: '#ccc',
+    lineColor: '#ccc'
+  };
+
+  function isDark() {
+    var theme = document.body.getAttribute('data-theme');
+    if (theme === 'dark') return true;
+    if (theme === 'light') return false;
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function escapeHTML(str) {
+    return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  }
+
+  function getCode(node) {
+    return node.dataset.code || node.textContent || '';
+  }
+
+  async function renderAll() {
+    if (!window.mermaid) return;
+
+    var themeVars = isDark() ? darkThemeVariables : lightThemeVariables;
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: 'base',
+      themeVariables: themeVars,
+      securityLevel: 'loose',
+      logLevel: 'error'
+    });
+
+    var nodes = document.querySelectorAll('.mermaid');
+    for (var i = 0; i < nodes.length; i++) {
+      var node = nodes[i];
+      var code = getCode(node).trim();
+      // Preserve source code for re-renders
+      if (!node.dataset.code) node.dataset.code = code;
+
+      try {
+        var id = 'mermaid-svg-' + i + '-' + Date.now();
+        node.classList.remove('rendered');
+        var result = await mermaid.render(id, code);
+        node.innerHTML = result.svg;
+        node.classList.remove('mermaid-error');
+        node.classList.add('rendered');
+      } catch(err) {
+        console.error('Mermaid render error:', err);
+        node.classList.add('mermaid-error');
+        node.innerHTML = '<pre class="mermaid-error">Mermaid error:\n' + escapeHTML(err.message || String(err)) + '</pre>';
+      }
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function() {
+    renderAll();
+
+    if (window.matchMedia) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', renderAll);
+    }
+    document.body.addEventListener('themechange', renderAll);
+  });
+})();
diff --git a/defaults/static/js/mermaid.min.js b/defaults/static/js/mermaid.min.js
diff --git a/defaults/templates/layout.html b/defaults/templates/layout.html
@@ -28,6 +28,8 @@
     <script src="/static/js/clipboard-copy.js"></script>
     <script src="/static/js/mathjax-options.js"></script>
     <script src="/static/js/tex-mml-chtml.js"></script>
+    <script src="/static/js/mermaid.min.js"></script>
+    <script src="/static/js/mermaid-init.js"></script>
   </head>
 
   <body class="markdown-body">

diff --git a/go.sum b/go.sum
@@ -8,12 +8,6 @@ github.com/alecthomas/repr v0.4.0 h1:GhI2A8MACjfegCPVq9f1FLvIBS+DrQ2KQBFZP1iFzXc
 github.com/alecthomas/repr v0.4.0/go.mod h1:Fr0507jx4eOXV7AlPV6AVZLYrLIuIeSOWtW57eE/O/4=
 github.com/bep/debounce v1.2.1 h1:v67fRdBA9UQu2NhLFXrSg0Brw7CexQekrBwDMM8bzeY=
 github.com/bep/debounce v1.2.1/go.mod h1:H8yggRPQKLUhUoqrJC1bO2xNya7vanpDl7xR3ISbCJ0=
-github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d h1:ZtA1sedVbEW7EW80Iz2GR3Ye6PwbJAJXjv7D74xG6HU=
-github.com/chromedp/cdproto v0.0.0-20250803210736-d308e07a266d/go.mod h1:NItd7aLkcfOA/dcMXvl8p1u+lQqioRMq/SqDp71Pb/k=
-github.com/chromedp/chromedp v0.14.0 h1:/xE5m6wEBwivhalHwlCOyYfBcAJNwg4nLw96QiCfYr0=
-github.com/chromedp/chromedp v0.14.0/go.mod h1:rHzAv60xDE7VNy/MYtTUrYreSc0ujt2O1/C3bzctYBo=
-github.com/chromedp/sysutil v1.1.0 h1:PUFNv5EcprjqXZD9nJb9b/c9ibAbxiYo4exNWZyipwM=
-github.com/chromedp/sysutil v1.1.0/go.mod h1:WiThHUdltqCNKGc4gaU50XgYjwjYIhKWoHGPTUfWTJ8=
 github.com/cpuguy83/go-md2man/v2 v2.0.4/go.mod h1:tgQtvFlXSQOSOSIRvRPT7W67SCa46tRHOmNcaadrF8o=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
@@ -23,14 +17,6 @@ github.com/forPelevin/gomoji v1.3.0 h1:WPIOLWB1bvRYlKZnSSEevLt3IfKlLs+tK+YA9fFYl
 github.com/forPelevin/gomoji v1.3.0/go.mod h1:mM6GtmCgpoQP2usDArc6GjbXrti5+FffolyQfGgPboQ=
 github.com/fsnotify/fsnotify v1.8.0 h1:dAwr6QBTBZIkG8roQaJjGof0pp0EeF+tNV7YBP3F/8M=
 github.com/fsnotify/fsnotify v1.8.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0=
-github.com/go-json-experiment/json v0.0.0-20250725192818-e39067aee2d2 h1:iizUGZ9pEquQS5jTGkh4AqeeHCMbfbjeb0zMt0aEFzs=
-github.com/go-json-experiment/json v0.0.0-20250725192818-e39067aee2d2/go.mod h1:TiCD2a1pcmjd7YnhGH0f/zKNcCD06B029pHhzV23c2M=
-github.com/gobwas/httphead v0.1.0 h1:exrUm0f4YX0L7EBwZHuCF4GDp8aJfVeBrlLQrs6NqWU=
-github.com/gobwas/httphead v0.1.0/go.mod h1:O/RXo79gxV8G+RqlR/otEwx4Q36zl9rqC5u12GKvMCM=
-github.com/gobwas/pool v0.2.1 h1:xfeeEhW7pwmX8nuLVlqbzVc7udMDrwetjEv+TZIz1og=
-github.com/gobwas/pool v0.2.1/go.mod h1:q8bcK0KcYlCgd9e7WYLm9LpyS+YeLd8JVDW6WezmKEw=
-github.com/gobwas/ws v1.4.0 h1:CTaoG1tojrh4ucGPcoJFiAQUAsEWekEWvLy7GsVNqGs=
-github.com/gobwas/ws v1.4.0/go.mod h1:G3gNqMNtPppf5XUz7O4shetPpcZ1VJ7zt18dlUeakrc=
 github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
 github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/hexops/gotextdiff v1.0.3 h1:gitA9+qJrrTCsiCl7+kh75nPqQt1cx4ZkudSTLoUqJM=

diff --git a/internal/parser.go b/internal/parser.go
@@ -37,7 +37,7 @@ func (m Parser) MdToHTML(input []byte) ([]byte, error) {
 			&hashtag.Extender{},
 			alert.New(),
 			highlighting.Highlighting,
-			&mermaid.Extender{RenderMode: mermaid.RenderModeClient},
+			&mermaid.Extender{RenderMode: mermaid.RenderModeClient, NoScript: true},
 			mathjax.MathJax,
 			ghissue.New(),
 			details.New(),