Rendering LaTeX in mermaid flowchart

[ellafm]

Description

---
title: "Some title"
format: html
---

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

Results in:

The latex is not rendered, but this issue is not present when the flowchart is rendered in mermaid live editor, as shown

I'm using quarto version 1.5.56, using VS Code on Windows 10

[ellafm]

I think I figured this out. According to the release notes, quarto has been upgraded to natively work with mermaid 10.2.0, but this version does not seem to support latex in flow diagrams. I have managed to get this working as intended by including the following script:

        include-in-header:
            text: |
                <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>

[ellafm]

Incidentally, I think there may also be a bug in mermaid 11.2.1 with how it interprets escape characters. See:
https://github.com/orgs/mermaid-js/discussions/5885

[felixvuo]

I'm also struggling to get LaTeX rendered from quarto+mermaid - I am using the pdf output. Here's my source:
---
title: "Important Concepts"
format:
pdf:
documentclass: scrartcl
---

# An Example

```{mermaid}
%%| label: fig-tree
%%| fig-cap: An important graph
graph TD
    A("$$x+y+z \leq 5$$")
    A -- "$$x=1$$" --> A1
    A -- "$$x=2$$" --> A2
    A -- "$$x=3$$" --> A3
```

In @fig-tree we can see a beautiful thing.

I am using quarto 1.5.57, the latest .deb I found for Ubuntu. The rendered output looks like this:

I have tried with or without the double quotes, same output. Any further suggestions? E.g. can I point quarto to the latest mermaid version somehow?

[cderv]

@felixvuo from answers just above I think you need pre-release 1.6.12 to get latest mermaid.js

Please do try it: quarto.org/docs/download/prerelease.html

[felixvuo]

@cderv thank you, it does seem to work fine with 1.6.12.

[mcanouil]

Cannot reproduce your issue.

[tony-an-phd]

I am using quarto 1.6.33 to create a flowchat with math inside a box using mermaid with the following code in a file called n.qmd:

---
format:
  html:
    theme: default
  pdf:
    documentclass: article
keep-tex: true
---

```{mermaid}
graph LR
    A("$$x+y+z \leq 5$$")
    A -- "$$x=1$$" --> A1
    A -- "$$x=2$$" --> A2
    A -- "$$x=3$$" --> A3
```

Once I issued the command quarto render n.qmd I see that n.pdf shows correctly, and the n.tex shows it's showing that png file with math inside the box A:
\includegraphics[width=3.05in,height=2.9in]{n_files/figure-latex/mermaid-figure-1.png}

However, the n.html file generated using mermaid.js shows an empty box for A:

<div class="cell" data-layout-align="default">
<div class="cell-output-display">
<div>
<p></p><figure class="figure"><p></p>
<div>
<pre class="mermaid mermaid-js">graph LR
    A("$$x+y+z \leq 5$$")
    A -- "$$x=1$$" --&gt; A1
    A -- "$$x=2$$" --&gt; A2
    A -- "$$x=3$$" --&gt; A3
</pre>
</div>
<p></p></figure><p></p>
</div>
</div>
</div>

This the screen shot of n.html in Firefox 132.01:

How do I make the n.html display the math properly?

> quarto check
Quarto 1.6.33
[>] Checking environment information...
      Quarto cache location: C:\Users\ynots\AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.6.33
      Path: C:\Users\ynots\AppData\Local\Programs\Quarto\bin
      CodePage: 1252

[>] Checking tools....................OK
      TinyTeX: v2024.11
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: C:\Users\ynots\AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

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

[>] Checking Python 3 installation....(None)

      Unable to locate an installed version of Python 3.
      Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........(None)

      Unable to locate an installed version of R.
      Install R from https://cloud.r-project.org/
      

[mcanouil]

Thanks!

How do you preview the HTML?

[tony-an-phd]

I use Firefox 132.01. - added it to the post.

[cscheid]

I suspect that you need to run a local server instead of (eg) double-clicking your file on Explorer. That's not a Quarto bug; that's a requirement of javascript libraries that use ES6 modules.

[tony-an-phd]

Thank you for the tip @cscheid ! It looks like that it's not working in Firefox! I opened a Chrome and it did displayed correctly.