Text overlaps with border on Mermaid.js diagrams in a Reveal.js presentation

[NiccoMlt]

Problem

I have a Quarto project that produces a Reveal.js presentation.

I'm using some simple class diagrams written with Mermaid.js, and they render correctly when opened in the browser.

When I use Decktape to export the presentation to a PDF file, the boxes have a wrong size, and the text overlaps with the border.

References

See https://github.com/NiccoMlt/quarto-mermaid-decktape-issue-demo/actions/runs/8591850884

quarto --version
1.4.553

node --version
v20.12.0

npx decktape version
3.12.0

https://niccomlt.github.io/quarto-mermaid-decktape-issue-demo/ https://github.com/NiccoMlt/quarto-mermaid-decktape-issue-demo/releases/download/v1.0.0/index.pdf

I also discovered quarto-dev/quarto-cli#4677, but it doesn't seem to be a problem directly related to Quarto CLI itself.

[NiccoMlt]

Digging deeper on the problem, it seems like that using mermaid-format: png or mermaid-format: svg to generate the mermaid graphics at rendering time works as a workaround.

Please note that SVG format may require to force the width (even using the 100% of the available width with %%| fig-width: 100%) to avoid cropped, scrollable images on multi-column layouts.

Asking on quarto-dev/quarto-cli#5416, they suggest that decktape is confusing mermaid's window size determination code: https://github.com/quarto-dev/quarto-cli/issues/5416#issuecomment-2056974639