rails_accessibility_testing 1.5.5 → 1.5.6

data/docs_site/_layouts/default.html

@@ -6,6 +6,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
   <meta name="description" content="{{ site.description }}">
+  
+  <!-- Favicon -->
+  <link rel="icon" type="image/svg+xml" href="{{ '/favicon.svg' | relative_url }}">
+  <link rel="alternate icon" href="{{ '/favicon.svg' | relative_url }}">
+  
   <style>
     * {
       margin: 0;
@@ -169,195 +174,12 @@
       font-weight: 600;
     }
 
-    /* Mermaid diagram container styles */
-    .mermaid-container {
-      position: relative;
+    /* Mermaid diagram styles */
+    .mermaid {
       margin: 2rem 0;
-      border: 1px solid #ddd;
-      border-radius: 8px;
-      padding: 1.5rem;
-      background: #fafafa;
-    }
-
-    .mermaid-container .mermaid {
-      margin: 0;
       text-align: center;
     }
 
-    /* Fullscreen button */
-    .fullscreen-btn {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      background: #3498db;
-      color: white;
-      border: none;
-      padding: 8px 12px;
-      border-radius: 5px;
-      cursor: pointer;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      transition: background 0.3s, transform 0.2s;
-      z-index: 10;
-    }
-
-    .fullscreen-btn:hover {
-      background: #2980b9;
-      transform: scale(1.05);
-    }
-
-    .fullscreen-btn:focus {
-      outline: 2px solid #2c3e50;
-      outline-offset: 2px;
-    }
-
-    .fullscreen-btn svg {
-      width: 16px;
-      height: 16px;
-    }
-
-    /* Fullscreen overlay */
-    .diagram-fullscreen-overlay {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.95);
-      z-index: 9999;
-      overflow: auto;
-      animation: fadeIn 0.3s ease;
-    }
-
-    .diagram-fullscreen-overlay.active {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
-    }
-
-    .diagram-fullscreen-content {
-      background: white;
-      border-radius: 8px;
-      padding: 2rem;
-      width: 98vw;
-      height: 98vh;
-      overflow: auto;
-      position: relative;
-      animation: slideIn 0.3s ease;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    #diagram-zoom-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-width: 100%;
-      min-height: 100%;
-    }
-
-    .diagram-fullscreen-content .mermaid {
-      margin: 0;
-      display: block;
-      width: auto;
-      height: auto;
-    }
-
-    .diagram-fullscreen-content .mermaid svg {
-      max-width: none !important;
-      max-height: none !important;
-      width: auto !important;
-      height: auto !important;
-      display: block;
-      margin: 0 auto;
-    }
-
-    /* Close button */
-    .close-fullscreen-btn {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      background: #e74c3c;
-      color: white;
-      border: none;
-      padding: 10px 20px;
-      border-radius: 5px;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: bold;
-      z-index: 10000;
-      transition: background 0.3s, transform 0.2s;
-    }
-
-    .close-fullscreen-btn:hover {
-      background: #c0392b;
-      transform: scale(1.05);
-    }
-
-    .close-fullscreen-btn:focus {
-      outline: 2px solid white;
-      outline-offset: 2px;
-    }
-
-    /* Zoom controls */
-    .zoom-controls {
-      position: fixed;
-      top: 20px;
-      left: 20px;
-      display: flex;
-      gap: 10px;
-      z-index: 10000;
-    }
-
-    .zoom-btn {
-      background: #3498db;
-      color: white;
-      border: none;
-      padding: 10px 15px;
-      border-radius: 5px;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: bold;
-      transition: background 0.3s, transform 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-
-    .zoom-btn:hover {
-      background: #2980b9;
-      transform: scale(1.05);
-    }
-
-    .zoom-btn:focus {
-      outline: 2px solid white;
-      outline-offset: 2px;
-    }
-
-    .zoom-btn:disabled {
-      background: #95a5a6;
-      cursor: not-allowed;
-      transform: none;
-    }
-
-    .zoom-level {
-      background: rgba(255, 255, 255, 0.9);
-      color: #2c3e50;
-      padding: 10px 15px;
-      border-radius: 5px;
-      font-size: 14px;
-      font-weight: bold;
-      display: flex;
-      align-items: center;
-      min-width: 80px;
-      justify-content: center;
-    }
-
     /* Animations */
     @keyframes fadeIn {
       from {
@@ -381,17 +203,12 @@
       }
     }
 
-    /* Responsive adjustments */
-    @media (max-width: 768px) {
-      .diagram-fullscreen-content {
-        padding: 1rem;
-      }
-
-      .fullscreen-btn {
-        font-size: 12px;
-        padding: 6px 10px;
-      }
-    }
+            /* Responsive adjustments */
+            @media (max-width: 768px) {
+              .mermaid {
+                margin: 1rem 0;
+              }
+            }
   </style>
 </head>
 
@@ -407,403 +224,71 @@
     <p><a href="https://github.com/rayraycodes/rails-accessibility-testing" style="color: white;">GitHub</a></p>
   </footer>
 
-  <!-- Mermaid.js for diagram rendering - Load at end of body for better reliability -->
-  <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-
-    // Initialize Mermaid
-    mermaid.initialize({
-      startOnLoad: true,
-      theme: 'default',
-      securityLevel: 'loose',
-      flowchart: { useMaxWidth: true },
-      sequence: { useMaxWidth: true },
-      gantt: { useMaxWidth: true }
-    });
-
-    // Function to create fullscreen overlay
-    function createFullscreenOverlay() {
-      if (document.getElementById('diagram-fullscreen-overlay')) {
-        return; // Already exists
+  <!-- Mermaid.js for diagram rendering - Use regular script for GitHub Pages compatibility -->
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <script>
+    // Initialize Mermaid when loaded
+    (function() {
+      function initMermaidLib() {
+        if (typeof mermaid !== 'undefined') {
+          mermaid.initialize({
+            startOnLoad: false, // We'll call run() manually
+            theme: 'default',
+            securityLevel: 'loose',
+            flowchart: { useMaxWidth: true },
+            sequence: { useMaxWidth: true },
+            gantt: { useMaxWidth: true }
+          });
+          window.mermaid = mermaid;
+          return true;
+        }
+        return false;
       }
-
-      const overlay = document.createElement('div');
-      overlay.id = 'diagram-fullscreen-overlay';
-      overlay.className = 'diagram-fullscreen-overlay';
-      overlay.setAttribute('role', 'dialog');
-      overlay.setAttribute('aria-modal', 'true');
-      overlay.setAttribute('aria-label', 'Fullscreen diagram viewer');
-
-      // Zoom controls
-      const zoomControls = document.createElement('div');
-      zoomControls.className = 'zoom-controls';
-      
-      const zoomOutBtn = document.createElement('button');
-      zoomOutBtn.className = 'zoom-btn';
-      zoomOutBtn.textContent = '−';
-      zoomOutBtn.setAttribute('aria-label', 'Zoom out');
-      zoomOutBtn.onclick = zoomOut;
-      
-      const zoomLevel = document.createElement('div');
-      zoomLevel.className = 'zoom-level';
-      zoomLevel.id = 'zoom-level-display';
-      zoomLevel.textContent = '100%';
-      
-      const zoomInBtn = document.createElement('button');
-      zoomInBtn.className = 'zoom-btn';
-      zoomInBtn.textContent = '+';
-      zoomInBtn.setAttribute('aria-label', 'Zoom in');
-      zoomInBtn.onclick = zoomIn;
       
-      const resetBtn = document.createElement('button');
-      resetBtn.className = 'zoom-btn';
-      resetBtn.textContent = 'Reset';
-      resetBtn.setAttribute('aria-label', 'Reset zoom to 100%');
-      resetBtn.onclick = resetZoom;
-      
-      zoomControls.appendChild(zoomOutBtn);
-      zoomControls.appendChild(zoomLevel);
-      zoomControls.appendChild(zoomInBtn);
-      zoomControls.appendChild(resetBtn);
-
-      const closeBtn = document.createElement('button');
-      closeBtn.className = 'close-fullscreen-btn';
-      closeBtn.textContent = '✕ Close';
-      closeBtn.setAttribute('aria-label', 'Close fullscreen diagram');
-      closeBtn.onclick = closeFullscreen;
-
-      const content = document.createElement('div');
-      content.className = 'diagram-fullscreen-content';
-
-      overlay.appendChild(zoomControls);
-      overlay.appendChild(closeBtn);
-      overlay.appendChild(content);
-      document.body.appendChild(overlay);
-
-      // Close on overlay click (but not content click)
-      overlay.addEventListener('click', (e) => {
-        if (e.target === overlay) {
-          closeFullscreen();
-        }
-      });
-
-      // Close on Escape key
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape' && overlay.classList.contains('active')) {
-          closeFullscreen();
-        }
-      });
-
-      // Keyboard shortcuts for zoom
-      document.addEventListener('keydown', (e) => {
-        if (overlay.classList.contains('active')) {
-          if (e.key === '+' || e.key === '=') {
-            e.preventDefault();
-            zoomIn();
-          } else if (e.key === '-') {
-            e.preventDefault();
-            zoomOut();
-          } else if (e.key === '0') {
-            e.preventDefault();
-            resetZoom();
+      // Try to initialize immediately
+      if (!initMermaidLib()) {
+        // If not loaded yet, wait for it
+        const checkInterval = setInterval(() => {
+          if (initMermaidLib()) {
+            clearInterval(checkInterval);
           }
-        }
-      });
-    }
-
-    // Drag/pan functionality
-    let isDragging = false;
-    let startX = 0;
-    let startY = 0;
-    let currentX = 0;
-    let currentY = 0;
-
-    function initDrag(wrapper) {
-      wrapper.style.cursor = 'grab';
-      wrapper.style.userSelect = 'none';
-
-      wrapper.addEventListener('mousedown', (e) => {
-        if (e.button === 0) { // Left mouse button only
-          isDragging = true;
-          startX = e.clientX - currentX;
-          startY = e.clientY - currentY;
-          wrapper.style.cursor = 'grabbing';
-        }
-      });
-
-      document.addEventListener('mousemove', (e) => {
-        if (isDragging) {
-          e.preventDefault();
-          currentX = e.clientX - startX;
-          currentY = e.clientY - startY;
-          wrapper.style.transform = `scale(${currentZoom / 100}) translate(${currentX}px, ${currentY}px)`;
-        }
-      });
-
-      document.addEventListener('mouseup', () => {
-        if (isDragging) {
-          isDragging = false;
-          wrapper.style.cursor = 'grab';
-        }
-      });
-
-      // Touch support for mobile
-      let touchStartX = 0;
-      let touchStartY = 0;
-
-      wrapper.addEventListener('touchstart', (e) => {
-        if (e.touches.length === 1) {
-          isDragging = true;
-          touchStartX = e.touches[0].clientX - currentX;
-          touchStartY = e.touches[0].clientY - currentY;
-        }
-      });
-
-      document.addEventListener('touchmove', (e) => {
-        if (isDragging && e.touches.length === 1) {
-          e.preventDefault();
-          currentX = e.touches[0].clientX - touchStartX;
-          currentY = e.touches[0].clientY - touchStartY;
-          wrapper.style.transform = `scale(${currentZoom / 100}) translate(${currentX}px, ${currentY}px)`;
-        }
-      });
-
-      document.addEventListener('touchend', () => {
-        isDragging = false;
-      });
-    }
+        }, 50);
+        
+        // Stop checking after 5 seconds
+        setTimeout(() => clearInterval(checkInterval), 5000);
+      }
+    })();
 
-    // Function to open diagram in fullscreen
-    function openFullscreen(diagramElement) {
-      const overlay = document.getElementById('diagram-fullscreen-overlay');
-      const content = overlay.querySelector('.diagram-fullscreen-content');
 
-      // Get the original Mermaid code from the source
-      let mermaidCode = null;
-      const originalPre = diagramElement.closest('pre');
-      if (originalPre) {
-        const codeBlock = originalPre.querySelector('code.language-mermaid');
-        if (codeBlock) {
-          mermaidCode = codeBlock.textContent || codeBlock.innerText;
-        }
-      }
+    // Make processMermaidDiagrams available globally
+    window.processMermaidDiagrams = function() {
+      console.log('Processing Mermaid diagrams...');
       
-      // If we can't find the code, try to find it from all code blocks
-      if (!mermaidCode) {
-        const allCodeBlocks = document.querySelectorAll('code.language-mermaid');
-        for (const codeBlock of allCodeBlocks) {
-          const parentPre = codeBlock.closest('pre');
-          if (parentPre && parentPre.querySelector('.mermaid') === diagramElement) {
-            mermaidCode = codeBlock.textContent || codeBlock.innerText;
-            break;
-          }
-        }
+      if (typeof mermaid === 'undefined') {
+        console.error('Mermaid not loaded yet');
+        return;
       }
       
-      content.innerHTML = '';
-      
-      // Create wrapper for zoom and drag functionality
-      const wrapper = document.createElement('div');
-      wrapper.id = 'diagram-zoom-wrapper';
-      wrapper.style.display = 'flex';
-      wrapper.style.alignItems = 'center';
-      wrapper.style.justifyContent = 'center';
-      wrapper.style.position = 'relative';
-      wrapper.style.width = 'fit-content';
-      wrapper.style.height = 'fit-content';
-      wrapper.style.minWidth = '100%';
-      wrapper.style.minHeight = '100%';
+      // Find all code blocks with mermaid language - try multiple selectors
+      let mermaidBlocks = document.querySelectorAll('code.language-mermaid, pre code.language-mermaid, code[class*="mermaid"], pre code[class*="language-mermaid"]');
       
-      // If we have the Mermaid code, create a new div and let Mermaid render it
-      if (mermaidCode) {
-        const mermaidDiv = document.createElement('div');
-        mermaidDiv.className = 'mermaid';
-        mermaidDiv.textContent = mermaidCode;
-        mermaidDiv.style.display = 'block';
-        mermaidDiv.style.visibility = 'visible';
-        mermaidDiv.style.opacity = '1';
-        wrapper.appendChild(mermaidDiv);
-        
-        // Re-render with Mermaid
-        mermaid.run({ nodes: [mermaidDiv] }).then(() => {
-          const svg = mermaidDiv.querySelector('svg');
-          if (svg) {
-            svg.style.display = 'block';
-            svg.style.visibility = 'visible';
+      // If none found, check all code blocks for mermaid syntax
+      if (mermaidBlocks.length === 0) {
+        console.log('No mermaid language blocks found, checking all code blocks for mermaid syntax...');
+        const allCodeBlocks = document.querySelectorAll('pre code');
+        const foundBlocks = [];
+        allCodeBlocks.forEach(block => {
+          const code = block.textContent || block.innerText;
+          if (code.trim().match(/^(graph|sequenceDiagram|flowchart|classDiagram|stateDiagram|erDiagram|gantt|pie|gitgraph|journey)/)) {
+            foundBlocks.push(block);
           }
         });
-      } else {
-        // Fallback: clone the existing diagram
-        const clone = diagramElement.cloneNode(true);
-        clone.style.display = 'block';
-        clone.style.visibility = 'visible';
-        clone.style.opacity = '1';
-        wrapper.appendChild(clone);
+        mermaidBlocks = foundBlocks;
       }
       
-      content.appendChild(wrapper);
-      
-      // Ensure content can scroll to show entire diagram
-      content.style.overflow = 'auto';
-      content.style.display = 'flex';
-      content.style.alignItems = 'center';
-      content.style.justifyContent = 'center';
-
-      // Reset zoom and position
-      currentZoom = 100;
-      currentX = 0;
-      currentY = 0;
-      wrapper.style.transform = 'scale(1) translate(0px, 0px)';
-      wrapper.style.transformOrigin = 'center center';
-      updateZoomLevel(100);
-      
-      // Initialize drag functionality
-      initDrag(wrapper);
-
-      // Show overlay
-      overlay.classList.add('active');
-      document.body.style.overflow = 'hidden';
-
-      // Ensure visibility and center after rendering
-      setTimeout(() => {
-        wrapper.style.display = 'flex';
-        wrapper.style.visibility = 'visible';
-        wrapper.style.opacity = '1';
-        
-        const mermaidEl = wrapper.querySelector('.mermaid');
-        if (mermaidEl) {
-          mermaidEl.style.display = 'block';
-          mermaidEl.style.visibility = 'visible';
-          mermaidEl.style.opacity = '1';
-        }
-        
-        const svg = wrapper.querySelector('svg');
-        if (svg) {
-          svg.style.display = 'block';
-          svg.style.visibility = 'visible';
-          svg.style.opacity = '1';
-        }
-        
-        // Center scroll position
-        setTimeout(() => {
-          if (content.scrollHeight > content.clientHeight) {
-            content.scrollTop = (content.scrollHeight - content.clientHeight) / 2;
-          }
-          if (content.scrollWidth > content.clientWidth) {
-            content.scrollLeft = (content.scrollWidth - content.clientWidth) / 2;
-          }
-        }, 200);
-      }, 300);
-
-      // Focus on close button for accessibility
-      const closeBtn = overlay.querySelector('.close-fullscreen-btn');
-      closeBtn.focus();
-    }
-
-    // Zoom functionality
-    let currentZoom = 100;
-    const minZoom = 25;
-    const maxZoom = 500;
-    const zoomStep = 25;
-
-    function zoomIn() {
-      if (currentZoom < maxZoom) {
-        currentZoom = Math.min(currentZoom + zoomStep, maxZoom);
-        applyZoom();
-      }
-    }
-
-    function zoomOut() {
-      if (currentZoom > minZoom) {
-        currentZoom = Math.max(currentZoom - zoomStep, minZoom);
-        applyZoom();
-      }
-    }
-
-    function resetZoom() {
-      currentZoom = 100;
-      currentX = 0;
-      currentY = 0;
-      const wrapper = document.getElementById('diagram-zoom-wrapper');
-      if (wrapper) {
-        wrapper.style.transform = 'scale(1) translate(0px, 0px)';
-        updateZoomLevel(100);
-      }
-    }
-
-    function applyZoom() {
-      const wrapper = document.getElementById('diagram-zoom-wrapper');
-      if (wrapper) {
-        // Preserve current position when zooming
-        wrapper.style.transform = `scale(${currentZoom / 100}) translate(${currentX}px, ${currentY}px)`;
-        updateZoomLevel(currentZoom);
-      }
-    }
-
-    function updateZoomLevel(level) {
-      const zoomLevelEl = document.getElementById('zoom-level-display');
-      if (zoomLevelEl) {
-        zoomLevelEl.textContent = `${level}%`;
-      }
-    }
-
-    // Function to close fullscreen
-    function closeFullscreen() {
-      const overlay = document.getElementById('diagram-fullscreen-overlay');
-      overlay.classList.remove('active');
-      document.body.style.overflow = '';
-      // Reset zoom for next time
-      currentZoom = 100;
-    }
-
-    // Make functions global for button onclick
-    window.closeFullscreen = closeFullscreen;
-    window.zoomIn = zoomIn;
-    window.zoomOut = zoomOut;
-    window.resetZoom = resetZoom;
-
-    // Function to wrap diagrams in containers with fullscreen buttons
-    function wrapDiagramsWithButtons() {
-      const diagrams = document.querySelectorAll('.mermaid');
-
-      diagrams.forEach((diagram, index) => {
-        // Skip if already wrapped
-        if (diagram.parentElement.classList.contains('mermaid-container')) {
-          return;
-        }
-
-        // Create container
-        const container = document.createElement('div');
-        container.className = 'mermaid-container';
-
-        // Create fullscreen button
-        const btn = document.createElement('button');
-        btn.className = 'fullscreen-btn';
-        btn.setAttribute('aria-label', `View diagram ${index + 1} in fullscreen`);
-        btn.innerHTML = `
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-            <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
-          </svg>
-          <span>Fullscreen</span>
-        `;
-
-        btn.onclick = () => openFullscreen(diagram);
-
-        // Wrap diagram
-        diagram.parentNode.insertBefore(container, diagram);
-        container.appendChild(diagram);
-        container.appendChild(btn);
-      });
-    }
-
-    // Function to process Mermaid diagrams
-    function processMermaidDiagrams() {
-      // Find all code blocks with mermaid language
-      const mermaidBlocks = document.querySelectorAll('code.language-mermaid, pre code.language-mermaid');
+      console.log('Found', mermaidBlocks.length, 'Mermaid code blocks');
 
       if (mermaidBlocks.length > 0) {
-        console.log('Found', mermaidBlocks.length, 'Mermaid diagram blocks');
-
         // Process each block
         mermaidBlocks.forEach((block, index) => {
           // Get the parent pre element if it exists
@@ -811,6 +296,7 @@
           if (preElement && preElement.tagName === 'PRE') {
             // Get the mermaid code
             const mermaidCode = block.textContent || block.innerText;
+            console.log('Processing Mermaid block', index + 1, ':', mermaidCode.substring(0, 50) + '...');
 
             // Create a div for Mermaid to render into
             const mermaidDiv = document.createElement('div');
@@ -823,18 +309,23 @@
         });
 
         // Run Mermaid to render all diagrams
+        console.log('Running Mermaid render...');
         mermaid.run().then(() => {
-          // After rendering, wrap diagrams with fullscreen buttons
-          createFullscreenOverlay();
-          wrapDiagramsWithButtons();
+          console.log('Mermaid rendering complete');
+        }).catch((err) => {
+          console.error('Mermaid rendering error:', err);
         });
       } else {
         // Fallback: look for pre > code blocks and check if they contain mermaid syntax
+        console.log('No mermaid language blocks found, checking all code blocks...');
         const allCodeBlocks = document.querySelectorAll('pre code');
+        let foundMermaid = false;
+        
         allCodeBlocks.forEach((codeBlock) => {
           const code = codeBlock.textContent || codeBlock.innerText;
           // Check if it looks like mermaid code (starts with graph, sequenceDiagram, etc.)
           if (code.trim().match(/^(graph|sequenceDiagram|flowchart|classDiagram|stateDiagram|erDiagram|gantt|pie|gitgraph|journey)/)) {
+            foundMermaid = true;
             const preElement = codeBlock.parentElement;
             if (preElement && preElement.tagName === 'PRE') {
               const mermaidDiv = document.createElement('div');
@@ -846,22 +337,38 @@
         });
 
         // Run Mermaid after processing
-        if (document.querySelectorAll('.mermaid').length > 0) {
+        if (foundMermaid && document.querySelectorAll('.mermaid').length > 0) {
+          console.log('Running Mermaid render (fallback)...');
           mermaid.run().then(() => {
-            // After rendering, wrap diagrams with fullscreen buttons
-            createFullscreenOverlay();
-            wrapDiagramsWithButtons();
+            console.log('Mermaid rendering complete (fallback)');
+          }).catch((err) => {
+            console.error('Mermaid rendering error (fallback):', err);
           });
+        } else {
+          console.log('No Mermaid diagrams found to render');
         }
       }
+    };
+
+    // Wait for Mermaid to load, then process diagrams
+    function waitForMermaidAndProcess() {
+      if (typeof mermaid !== 'undefined' && typeof window.processMermaidDiagrams === 'function') {
+        // Wait a bit for Jekyll/Kramdown to finish processing
+        setTimeout(() => {
+          window.processMermaidDiagrams();
+        }, 300);
+      } else {
+        // Mermaid not loaded yet, wait and try again
+        setTimeout(waitForMermaidAndProcess, 100);
+      }
     }
 
     // Process diagrams when DOM is ready
     if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', processMermaidDiagrams);
+      document.addEventListener('DOMContentLoaded', waitForMermaidAndProcess);
     } else {
-      // DOM already loaded, process immediately
-      processMermaidDiagrams();
+      // DOM already loaded, wait for Mermaid
+      waitForMermaidAndProcess();
     }
   </script>
 </body>