Skip to content

fix(html): flatten diagrams to inline SVG, stop diagram overflow scrollbars - #58

Merged
rapatao merged 1 commit into
mainfrom
fix/flatten-svg-and-diagram-overflow
Aug 13, 2026
Merged

fix(html): flatten diagrams to inline SVG, stop diagram overflow scrollbars#58
rapatao merged 1 commit into
mainfrom
fix/flatten-svg-and-diagram-overflow

Conversation

@rapatao

@rapatao rapatao commented Aug 13, 2026

Copy link
Copy Markdown
Owner

Follow-up to #56 and #57, which chased the same symptom twice: a diagram snapshot cut at the right and bottom, then cut at the top and bottom. Both were the same underlying bet — measure a region of a live page and clip a screenshot to it — losing to scroll position, page reflow and browsers that ignore CaptureBeyondViewport.

Changes

HTML -flatten stops rasterizing. chrome.FlattenDiagrams (was Rasterize) now does what the PDF path does: the browser draws each diagram, the rendered inline SVG stays in the document, the mermaid library is stripped. Nothing is measured, clipped or snapshotted, so no diagram can come out cut; the result is resolution-independent and much smaller (a test doc went from 3.7 MB of PNG to 81 KB).

Consequence, documented in the README: Google Docs does not render inline SVG on import, so -f docx (PNG diagrams) is the route for that.

Diagram blocks no longer produce a scrollbar in PDF. pre.mermaid inherited pre{overflow:auto}, so a diagram wider than its box got a scroll region — painted into the printed PDF and clipping the diagram. Now:

pre.mermaid{...;overflow:visible}
pre.mermaid svg,div.d2 svg,div.plantuml svg{max-width:100%;height:auto}

The svg rule also stops a wide d2/plantuml diagram running off the page. Verified with a 3000px-wide SVG in a 900px viewport: clipped at the box edge before, scaled to fit after.

DOCX keeps a raster (Word needs one), but snapshotDiagram now pins the diagram position:fixed at the viewport origin, alone, scaled to fit a viewport sized to it. The clip is (0,0,w,h) — the same rectangle under every screenshot coordinate convention, wherever the page is scrolled, honoured flag or not.

Checks

case result
text + 6x11 grid → docx top row = node 0, bottom row = node 10
200-node flowchart → docx 94x16378, ends at Node 200
40-node wide flowchart → docx 16384x86, ends at Node 40
-flatten html inline <svg>, no <script>, no data:image/png
testdata/complex.md → docx/epub/pdf unchanged

New TestFlattenDiagramsKeepsRenderedSVG; go test ./... green. README, -flatten flag help and package docs updated to match.

…llbars

Rasterizing a diagram to a PNG meant measuring a region of a live page and
clipping it, and that clip kept landing wrong: cut at the right and bottom,
then cut at the top and bottom, depending on scroll position, page reflow and
whether the browser honoured CaptureBeyondViewport.

For HTML, drop the snapshot entirely and use the mechanism the PDF path
already uses: let the browser draw the diagram, keep the rendered inline SVG,
strip the mermaid library. Nothing is measured or clipped, so no diagram can
come out cut, the result is resolution-independent, and the output is far
smaller. Note that Google Docs does not render inline SVG on import; -f docx
is the route for that, and the README now says so.

Diagram blocks inherited pre{overflow:auto}, so a diagram wider than its box
got a scroll region, which the browser paints into the printed PDF (and which
clips the diagram). Give pre.mermaid overflow:visible and cap diagram SVGs at
the container width, which also stops wide d2/plantuml diagrams running off
the page.

DOCX still needs a raster, so snapshotDiagram stays, but the diagram is now
pinned at the viewport origin, alone and scaled to fit, making the clip
(0,0,w,h) — the same rectangle under every screenshot coordinate convention,
wherever the page is scrolled.
@rapatao
rapatao merged commit fe56f2d into main Aug 13, 2026
4 checks passed
@rapatao
rapatao deleted the fix/flatten-svg-and-diagram-overflow branch August 13, 2026 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant