Search code examples
rmarkdownquartomermaid

How to bold text using markdown in mermaid diagram in Quarto

I can't figure out why the below code isn't working to render bold text. I have a mermaid diagram for a Quarto website in R, and I want the word parameterChoiceUI to be in bold. This is what I have in my .qmd file:

```{mermaid}
%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
  A["`**parameterChoiceUI**
    Indicator Selection`"]
  A --> C(Modules)
  B[sliderUI] --> C(Modules)
  C --> D{Plots}
```

However, the rendered diagram looks like this:

enter image description here

Can anyone spot what I'm doing wrong?

Solution

  • Markdown support to format text in mermaid diagram was added in mermaid.js v10.1.0 and Quarto v1.4 uses mermaid v10.2.0, whereas Quarto v1.3 uses mermaid v9.2.2.

    So I think, you are using a quarto version below 1.4. Upgrade to Quarto v1.4 and your provided example should work fine (working fine in my case with Quarto v1.4).

    markdown support in mermaid diagram