Any idea why my mermaid figures have small white boxes bottom left?

[jameshowison]

I'm loving using mermaid inside quarto (run from Rstudio on a Mac).

I'm teaching git stuff and making some collaboration diagrams, you can see them at:

https://howisonlab.github.io/open_source_software_course/skills/git_cherrypick_split_pr.html#split-before-submit

I'm seeing a small rounded corner square box in the bottom left of my images. Same thing with sequence diagrams, e.g.,:

https://howisonlab.github.io/open_source_software_course/skills/github_collaboration.html

Screen Shot 2023-03-02 at 11 13 17 AM

I cross-posted this at Mermaid: mermaid-js/mermaid#4176

The little squares don't show up using mermaid.live so it's possible/likely it's something in the rendering pipeline that quarto is using (maybe Chrome as render?). I don't see the squares in other quarto mermaid output: e.g.,: https://quarto.org/docs/authoring/diagrams.html. So probably it's something to do with my install (obtained quarto via homebrew)?

[cscheid]

Oh, thanks for catching that one! I think that's a div we used to have for mermaid tooltips, but they're no longer supported on 9.2.2, and the div appears to be left over now. I'm going to make this an issue and fix.

(This is 100% not a mermaid-js bug; this is on us.)

[cscheid]

Hm, actually, I can't repro this on my render of your repository.

Can you try the 1.3 prerelease build? https://quarto.org/docs/prerelease/1.3.html

[jameshowison]

Indeed, does seem that they don't appear with 1.3 prerelease. Good news :)

Using 1.3 I see some changes in the background of the images, but I bet that's to do with the mermaid themes stuff. Yup, added the mermaid theme into the _quarto.yml file and all is well.

Thanks!