From 3bf7373a67f86db0c080cef2d6e233d03cde614d Mon Sep 17 00:00:00 2001
From: Stephen Chu <stephen_d_chu@yahoo.com>
Date: Sat, 13 Jun 2026 17:38:33 -0500
Subject: [PATCH] docs: render mermaid diagrams on the Pages site

The "gated pipeline" flowchart is already in the README as a ```mermaid
block, but Jekyll/kramdown emits it as a language-mermaid code block that
Mermaid does not pick up, so it rendered as raw text on the GitHub Pages
site. Wire Mermaid.js into the custom layout: rewrite those code blocks
to <pre class="mermaid"> and run Mermaid on load.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 _layouts/default.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/_layouts/default.html b/_layouts/default.html
index 8f69104..bf5b474 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -39,5 +39,21 @@ <h2 class="project-tagline">{{ page.description | default: site.description | de
         <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
       </footer>
     </main>
+
+    <!-- Mermaid: Jekyll/kramdown does not render ```mermaid blocks on its own.
+         kramdown + Rouge wraps them as <div class="language-mermaid ...">...<code>.
+         Rewrite each to the <pre class="mermaid"> Mermaid expects, then render. -->
+    <script type="module">
+      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+      document.querySelectorAll('.language-mermaid, code.language-mermaid').forEach((el) => {
+        const src = el.querySelector('code') || el;
+        const pre = document.createElement('pre');
+        pre.className = 'mermaid';
+        pre.textContent = src.textContent;
+        el.replaceWith(pre);
+      });
+      mermaid.initialize({ startOnLoad: false, theme: 'default' });
+      await mermaid.run({ querySelector: 'pre.mermaid' });
+    </script>
   </body>
 </html>