Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Mermaid diagram rendering and styles

Browse Source 
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.
This commit is contained in:
Achintha Isuru
2026-02-01 19:56:02 -05:00
parent 3ea7d4352f
commit f8bd19ec52
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
internal/launchpad/index.html
View File

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