Mermaid flowchart labels outside nodes in reveal.js presentations

[prosoitos]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

Mermaid flowcharts that I have in a reveal.js document and which looked fine 2 years ago now have their labels outside the nodes.

I tried to reproduce and the problem is not nearly as bad as in my slides (where the labels are fully out of the circles), but the code below still shows how the labels are not centred properly.

Steps to reproduce

---
format: revealjs
---

## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

Actual behavior

No response

Expected behavior

No response

Your environment

• OS: Arch Linux 6.17.4

Quarto check output

Quarto 1.8.25
[✓] Checking environment information...
      Quarto cache location: /home/marie/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.25
      Path: /opt/quarto/bin

[✓] Checking tools....................OK
      TinyTeX: (not installed)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/bin
      Version: undefined

[✓] Checking Chrome Headless....................OK
      Chrome:  (not detected)

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
      Version: 3.13.7
      Path: /usr/bin/python3
      Jupyter: 5.9.1
      Kernels: julia-1.11, julia-1.12, python3

[✓] Checking Jupyter engine render....OK

(|) Checking R installation...........Loading required package: sysfonts
Loading required package: showtextdb
[✓] Checking R installation...........OK
      Version: 4.5.1
      Path: /usr/lib64/R
      LibPaths:
        - /home/marie/R/lib
        - /usr/lib/R/library
      knitr: 1.49
      rmarkdown: 2.29

[✓] Checking Knitr engine render......OK

[prosoitos]

In addition, to try to help with this issue, I tried to decrease the font-size of the Mermaid labels following @Steinthal's suggestion in #11801:

---
format: revealjs
---

## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
---
config:
  theme: neutral
  themeVariables:
    fontSize: 10
---
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

This made the font bigger, not smaller than the default of 16 px. Trying any other value for fontSize had no effect (same big size).

[mcanouil]

I believe this to be heavily related or a duplicate of:

• Mermaid fig-width no longer works #3973

The issue comes from the default mermaid-format: js, see the last comment.

This is likely a JavaScript conflict between reveal and mermaid, which leads to width computation issues.

[prosoitos]

Thank you for pointing that out. It does indeed appear to be very related to or a duplicate of the same problem.

I will experiment with the suggestions there.

Feel free to close the issue if you consider it a duplicate.

Of note: older versions of Mermaid were not causing this conflict. I suspect (but haven't tested to confirm) that it might have arisen with version 10.5.0 when they deprecated directives and forced the usage of a frontmatter format for config.

[prosoitos]

I am unable to set the Mermaid format. What is the correct syntax please?

I first tried to mimic what you have in #3973 with:

---
format: revealjs
mermaid-format: svg
---

in my frontmatter and it lead to:

ERROR: TypeError: Cannot read properties of undefined (reading 'value')

Then I tried to follow the syntax given in the documentation:

---
format:
  revealjs
  gfm:
    mermaid-format: svg
---

## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
---
config:
  theme: neutral
  themeVariables:
    fontSize: 10
---
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

And it lead to:

ERROR: YAMLException: bad indentation of a mapping entry (4:6)

 1 |
 2 | format:
 3 |   revealjs
 4 |   gfm:
----------^
 5 |     mermaid-format: svg

Stack trace:
    at generateError2 (file:///opt/quarto/bin/quarto.js:19994:10)
    at throwError2 (file:///opt/quarto/bin/quarto.js:19997:9)
    at readBlockMapping2 (file:///opt/quarto/bin/quarto.js:20667:7)
    at composeNode2 (file:///opt/quarto/bin/quarto.js:20845:80)
    at readDocument2 (file:///opt/quarto/bin/quarto.js:20977:3)
    at loadDocuments2 (file:///opt/quarto/bin/quarto.js:21019:5)
    at load$12 (file:///opt/quarto/bin/quarto.js:21037:19)
    at parseWithNiceErrors (file:///opt/quarto/bin/quarto.js:21809:12)
    at readYamlFromMarkdown (file:///opt/quarto/bin/quarto.js:21744:9)
    at markdownExecutionEngine (file:///opt/quarto/bin/quarto.js:78684:16)

[mcanouil]

Double check your document. The syntax is correct and works.
For instance, you don't have the required colon after the format in your second example.

[prosoitos]

Which colon? I am running the code exactly as pasted above and I am getting the error mentioned above...

I agree that the syntax looks correct. But I spent an hour double-checking everything and not understanding why it is not running.

[cderv]

---
format:
  revealjs
  gfm:
    mermaid-format: svg
---

This does not look like correct.

---
format:
-  revealjs
+  revealjs: default
  gfm:
    mermaid-format: svg
---

There is two formats, but no colon after revealjs, so parsing problem

[prosoitos]

Thank you @cderv.

I fixed that and it still doesn't render (although it is a different error message and the rendering process at least gets started this time):

pandoc
  to: revealjs
  output-file: test.html
  standalone: true
  wrap: none
  default-image-extension: png
  html-math-method:
    method: mathjax
    url: >-
      https://cdn.jsdelivr.net/npm/mathjax@2.7.9/MathJax.js?config=TeX-AMS_HTML-full
  slide-level: 2
  variables: {}

metadata
  link-citations: true
  width: 1050
  height: 700
  margin: 0.1
  center: false
  navigationMode: linear
  controlsLayout: edges
  controlsTutorial: false
  hash: true
  history: true
  hashOneBasedIndex: false
  fragmentInURL: false
  transition: none
  backgroundTransition: none
  pdfSeparateFragments: false
  lang: en
  auto-stretch: true

ERROR: TypeError: Cannot read properties of undefined (reading 'value')

Stack trace:
    at setSvgSize (file:///opt/quarto/bin/quarto.js:119809:38)
    at makeSvg (file:///opt/quarto/bin/quarto.js:120050:21)
    at eventLoopTick (ext:core/01_core.js:178:7)
    at async Object.cell (file:///opt/quarto/bin/quarto.js:120180:14)
    at async Promise.all (index 0)
    at async Object.document (file:///opt/quarto/bin/quarto.js:69698:21)
    at async handleLanguageCells (file:///opt/quarto/bin/quarto.js:69663:34)
    at async file:///opt/quarto/bin/quarto.js:123919:41
    at async withTimingAsync (file:///opt/quarto/bin/quarto.js:18986:21)
    at async renderFileInternal (file:///opt/quarto/bin/quarto.js:123918:9)

[cderv]

You shared several example so I don't know which one fails like that.

Original one leads shows the problem

---
format: revealjs
---

## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

I will be looking into this one. It seems JS mermaid and Revealjs can conflict. Also I see in our code some warning about us JS in revealjs

quarto-cli/src/core/handlers/mermaid.ts

Lines 460 to 471 in 938afa1

	if (isRevealjsOutput(handlerContext.options.context.format.pandoc)) {
	const error = new LocalizedError(
	"NotRecommended",
	`\`mermaid-format: js\` not recommended in format ${
	handlerContext.options.format.pandoc.to ?? ""
	}`,
	cell.sourceVerbatim,
	0,
	);
	warning(error.message);
	console.log("");
	}

This is added since a long time (5a889b6) but mermaid-format: js is still the default for Revealjs 🤔

@cscheid, do you remember this mermaid-format: js not a good idea for Revealjs ? If so, it seems we should default to svg maybe for reveal ?

Using mermaid-format: svg leads to better looking (not perfect though - but revealjs as scaling that can impact... 🤔 )

---
format: revealjs
mermaid-format: svg
---

## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

Now, I can't reproduce your issue

---
format:
  revealjs: default
  gfm:
    mermaid-format: svg
---
## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

Leads to no issue. Is this the document that creates the issue for you ? Can you share the .qmd that leads to TypeError: Cannot read properties of undefined (reading 'value') ?

[prosoitos]

Thank you Christophe for trying to reproduce all my snippets. I really appreciate 🙂.

There are indeed lots of topics in this issue, so I'll try to clarify:

Problem 1

That's the reason why I opened this issue.

I get the same thing as what you are displaying, including the labels being blue instead of black (and it's actually worse than that in my actual slides in my website. For some reasons, there the numbers are totally outside of the circles, but I couldn't reproduce it in a minimal example).

In November 2023, with whatever version of Mermaid Quarto was using then, things were working. I don't know when things broke between then and now.

Problem 2

I tried to follow @Steinthal's suggestion in #11801 to reduce the size of the labels, but doing so makes the labels bigger than the default of 16 px no matter what value I give to fontSize.

This problem might have the same cause as problem 1 (conflict between the JS code of Mermaid and revel.js).

Problem 3

I am unable to render when I use a format for Mermaid in the front matter of my reveal.js document.

I tried both versions above (with revealjs and revealjs: default—which I believe to actually both be correct syntax) and both fail on my machine with different error messages.

I know that it is not a typo because I have tried many times (including copy-pasting from the snippet above that runs for you) and it does not work so there must be something in my system that makes this problematic.

Removing the lines having to do with Mermaid format and I can render again.

Trouble-shooting this one will of course be impossible for you because you can't reproduce it and it is something going on locally.

But it means that setting a Mermaid format in the front matter is not an option for me (I doubt that I will be able to figure out why it makes rendering fail on my system).

I guess, one of two things will happen eventually:

• Either the Quarto team will fix the problems with the Mermaid JS format and I won't have to do it anyway or
• If JS remains problematic, the Quarto team will probably change the default Mermaid format to something that works (like svg) and then I won't have to do it either.

So whatever idiosyncratic problem on my system makes setting the Mermaid format impossible on my end (which is annoying because I don't have access to the workaround), in the long run it shouldn't matter.

For now, I'll have to stop using Mermaid though since I can't use the workaround. I'll wait until one of these 2 things happen.

[prosoitos]

To answer your question:

Can you share the .qmd that leads to TypeError: Cannot read properties of undefined (reading 'value') ?

It is the syntax suggested by @mcanouil in #3973 (last comment). But this syntax does not match the one given in the Quarto documentation and is probably wrong.

Here is the qmd and the full error:

---
format: revealjs
mermaid-format: svg
---

## Test slide

```{mermaid}
%%| echo: false
%%| fig-align: center
---
config:
  theme: neutral
  themeVariables:
    fontSize: 10
---
flowchart TD
   id1((1))---id2((2))---id3((3)):::current
   classDef current stroke: #f96, stroke-width: 2px, color: #f96
```

ERROR: TypeError: Cannot read properties of undefined (reading 'value')

Stack trace:
    at setSvgSize (file:///opt/quarto/bin/quarto.js:119809:38)
    at makeSvg (file:///opt/quarto/bin/quarto.js:120050:21)
    at eventLoopTick (ext:core/01_core.js:178:7)
    at async Object.cell (file:///opt/quarto/bin/quarto.js:120180:14)
    at async Promise.all (index 0)
    at async Object.document (file:///opt/quarto/bin/quarto.js:69698:21)
    at async handleLanguageCells (file:///opt/quarto/bin/quarto.js:69663:34)
    at async file:///opt/quarto/bin/quarto.js:123919:41
    at async withTimingAsync (file:///opt/quarto/bin/quarto.js:18986:21)
    at async renderFileInternal (file:///opt/quarto/bin/quarto.js:123918:9)

The correct syntax according to the doc should be:

---
format:
  revealjs
  gfm:
    mermaid-format: svg
---

or as you suggest above:

---
format:
  revealjs: default
  gfm:
    mermaid-format: svg
---

Of course I can't test on my machine (where nothing works lol), but I believe that on your machine both should work.

Note: maybe @mcanouil's syntax in #3973 also works, even if it doesn't match the documentation. Since I can't test on my machine where nothing works, I can't know.

[cscheid]

@cderv Honestly, I don't recall. It might make sense to do what you're suggesting, but the trade-off is that mermaid-format: svg or png uses chromium via puppeteer...