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 = `