Mermaid flowchart text overflows nodes when format is revealjs (but works when format is html)

[schwa021]

Bug description

When I create a flowchart with mermaid in revealjs, the text overflows the nodes
When I render the same qmd file as html, the flowchart looks fine
Changing the fig-width does not alter the behavior - it simply scales everytihng up/down

Steps to reproduce

---
title: "Test"
format: revealjs

---

## Mermaid Flowchart

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

Expected behavior

a pretty chart with text contained in nodes

Actual behavior

an ugly chart with text overflowing nodes

Note that if I change format: revealjs to format:html (no other changes), then I get the pretty chart I want

Your environment

RStudio 2023.12.0+369 "Ocean Storm" Release (33206f75bd14d07d84753f965eaa24756eda97b7, 2023-12-17) for windows
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) RStudio/2023.12.0+369 Chrome/116.0.5845.190 Electron/26.2.4 Safari/537.36

Edition Windows 10 Pro
Version 22H2
Installed on ‎8/‎7/‎2021
OS build 19045.3930
Experience Windows Feature Experience Pack 1000.19053.1000.0

Quarto check output

[mcanouil]

Could you properly format your code? You need to enclose it with four backticks ````qmd.

Could you also update to latest stable version and retry?

[schwa021]

I have updated the code - hopefully you can now see what I was trying to do.

Regarding "updat[ing] to the latest stable version"

I guess you meant "update to the latest stable version [of quarto]"? Sort of unclear, like my reproducible code ;)

I did that - now running 1.4.549

Chart still ugly!

[schwa021]

It looks similar to what you produced in response to issue #7156 (#7156)

#7156 (comment)

[cscheid]

I think what's happening here is that mermaid tries to resolve font metrics and compute its layout before some dynamic styles are resolved in revealjs.

[schwa021]

I think what's happening here is that mermaid tries to resolve font metrics and compute its layout before some dynamic styles are resolved in revealjs.

Forgive me for my ignorance. I'm just a poor research who struggles to understand all the programming aspects of how these amazing magical things - html, css, Rstudio, quarto, etc... - all work together.

Am I supposed to read your comment as a solution? Is there something I can implement or circumvent? Are you suggesting some action I can take to solve this?

[cscheid]

Am I supposed to read your comment as a solution? Is there something I can implement or circumvent? Are you suggesting some action I can take to solve this?

Nothing of the sort - I'm simply trying to diagnose the issue out loud so we can determine whether it's something we can solve on our end or not.

In terms of an immediate workaround, you might be able to use mermaid-format: png so that Quarto attempts to render it ahead of time as a PNG file. This is not ideal, because we can't then use all the theming options that would otherwise be available. But you might find that acceptable:

---
title: "Test"
format: revealjs
---

## Mermaid Flowchart

```{mermaid}
%%| mermaid-format: png
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

[schwa021]

Got it. Thank you for the explanation.

As I alluded to - I hack my way through and generally get really useful results from quarto, but I don't always understand the lingo here, and periodically get scolded for using the wrong terms, formatting incorrectly, etc.. I couldn't tell if you were giving a solution or "diagnos[ing] out loud".

At the same time - I want to be clear that I am constantly amazed at and appreciative of how useful these FREE products and support are for me. I fully understand that it is not always practical to explain things down to an "idiot proof" level.

For example - the mermaid-format: png works beautifully. But I don't actually know what theming options I'm missing out on. Ignorance is bliss, I suppose, and I'll use that for now, and watch this space for a "real" solution.

[mcanouil]

This feature: https://quarto.org/docs/authoring/diagrams.html#mermaid-theming

[cscheid]

The issue, simply, is that the width of the screen needs to be big enough. If I maximize my browser window, I get this:

In a narrower window, I get this:

I still don't understand why this only happens in the revealjs format.

[cscheid]

I suspect the issue is that MermaidJS has some minimum font setting, and that it chooses to spill the font when the diagram is too small for the font size, and that only happens in the revealjs format because of its narrower pixel size. I think the fix here is for mermaidJS to be more flexible in how to specify font sizes, etc.