fix: render Mermaid diagrams in PDF export#56
Merged
Conversation
The PDF export was failing to render Mermaid diagrams because the headless Chromium in the devcontainer cannot fetch external CDN resources. Mermaid code blocks were showing as raw text instead of rendered SVG flowcharts. Solution: Serve mermaid.min.js from a local HTTP server alongside the HTML document. The bundle is located at runtime from webui/node_modules/mermaid/dist/mermaid.min.js. When not found, degrades gracefully (shows code blocks as-is). Changes: - Replace CDN ES module import with local /mermaid.min.js script tag - Add findMermaidJS() to locate the bundle from common paths - Add pagesHaveMermaid() to skip mermaid loading when not needed - Serve mermaid.min.js from the same local HTTP server as the HTML - Rewrite tests to verify SVG rendering via chromedp assertions - Add test for no-mermaid path (data-mermaid-done still set)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
PDF exports were showing Mermaid diagrams as raw code blocks instead of rendered SVG flowcharts. The headless Chromium (Playwright-bundled) in the devcontainer cannot fetch external CDN resources, so the previous approach of loading Mermaid via a CDN
<script type="module">silently failed.Solution
Serve
mermaid.min.jsfrom the same local HTTP server that serves the HTML document to chromedp. The bundle is located at runtime fromwebui/node_modules/mermaid/dist/mermaid.min.js. When not found, the export degrades gracefully (shows code blocks as plain text).Changes
internal/share/pdf.go/mermaid.min.jsscript tagfindMermaidJS()to locate the Mermaid bundle from common paths (project root, relative to package dir, relative to executable)pagesHaveMermaid()to detect mermaid blocks and skip loading when unnecessarymermaid.min.jsfrom the local HTTP server alongside the HTMLdata-mermaid-donesignal: set immediately when no mermaid, or after rendering completesinternal/share/pdf_test.goTestPDFMermaidRenderingto verify actual SVG rendering via chromedp (checks for<svg>elements, flowchart class, and removal of original code block)TestPDFRenderHTMLNoMermaidto verify no mermaid script is included for plain pagesTestPDFRenderHTMLContainsMermaidScriptfor new local-server approachHow it works
pagesHaveMermaid()scans page bodies for```mermaidblocksfindMermaidJS()reads the ~3MB UMD bundle from diskhtmlToPDF()starts a local HTTP server with two routes:/(the HTML) and/mermaid.min.js(the bundle)<script>that initializes Mermaid, replaces<code class="language-mermaid">blocks with<div class="mermaid">, callsmermaid.run(), then signals completiondata-mermaid-done="true"before printing to PDFTesting
All tests pass including the new mermaid rendering verification: