From f8bd19ec52da67506efda61ff99c8cb0b9338960 Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru444@gmail.com>
Date: Sun, 1 Feb 2026 19:56:02 -0500
Subject: [PATCH] Add Mermaid diagram rendering and styles

Enable rendering of Mermaid diagrams embedded in markdown on the launchpad page. Adds CSS (.mermaid-diagram-wrapper and svg rules) to ensure responsive, centered diagrams and updates the markdown loader to find code.language-mermaid blocks, render them via mermaid.render, and replace the code block with a styled wrapper. Includes error handling that logs rendering errors and shows a user-facing error box. Changes are localized to internal/launchpad/index.html.
---
 internal/launchpad/index.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/internal/launchpad/index.html b/internal/launchpad/index.html
index 55c7fb9e..c8dbdcc2 100644
--- a/internal/launchpad/index.html
+++ b/internal/launchpad/index.html
@@ -146,6 +146,17 @@
         .markdown-content th { background-color: #f9fafb; font-weight: 600; }
         .markdown-content img { max-width: 100%; height: auto; border-radius: 0.5em; margin: 1em 0; }
         .markdown-content hr { border: none; border-top: 2px solid #e5e7eb; margin: 2em 0; }
+        
+        /* Mermaid diagram styling */
+        .mermaid-diagram-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .mermaid-diagram-wrapper svg {
+            max-width: 100%;
+            height: auto;
+        }
 
         /* Loading Overlay */
         #auth-loading {
@@ -821,6 +832,28 @@
                     const markdownText = await response.text();
                     const htmlContent = marked.parse(markdownText);
                     documentContainer.innerHTML = htmlContent;
+                    
+                    // Render Mermaid diagrams embedded in the markdown
+                    const mermaidBlocks = documentContainer.querySelectorAll('code.language-mermaid');
+                    for (let i = 0; i < mermaidBlocks.length; i++) {
+                        const block = mermaidBlocks[i];
+                        const mermaidCode = block.textContent;
+                        const pre = block.parentElement;
+                        
+                        try {
+                            const { svg } = await mermaid.render(`mermaid-doc-${Date.now()}-${i}`, mermaidCode);
+                            const wrapper = document.createElement('div');
+                            wrapper.className = 'mermaid-diagram-wrapper bg-white p-4 rounded-lg border border-gray-200 my-4 overflow-x-auto';
+                            wrapper.innerHTML = svg;
+                            pre.replaceWith(wrapper);
+                        } catch (err) {
+                            console.error('Mermaid rendering error:', err);
+                            const errorDiv = document.createElement('div');
+                            errorDiv.className = 'bg-red-50 border border-red-200 rounded-lg p-4 my-4';
+                            errorDiv.innerHTML = `<p class="text-red-700 text-sm"><strong>Mermaid Error:</strong> ${err.message}</p>`;
+                            pre.replaceWith(errorDiv);
+                        }
+                    }
                 } catch (error) {
                     console.error('Error loading document:', error);
                     documentContainer.innerHTML = `