Is it possible to use mermaid-js inside a quarto file?

[aborruso]

Hi,
it could be very useful to have mermaid markdown flow-chart inside quarto.

Is it possible to do it?

Thank you

[jjallaire]

Not yet, but we are working on this feature right now!

[aborruso]

Great thing, thank you

[radovan-miletic]

Hi, here goes my workaround (with R-4.1.3).
I have installed the development version of {DiagrammeR} from GitHub using the {devtools} package:

devtools::install_github("rich-iannone/DiagrammeR")

Then, deployed

mermaid without a bundler, one can insert a script tag with an absolute address and a mermaidAPI call into the HTML like so:

and placed script tags before diagrammer chunk:

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>

```{r}
#| label: fig-diagram
#| fig-cap: Diagram
#| echo: false  
DiagrammeR::mermaid(diagram = 'scripts/diagram.mmd', height = '100%', width = '100%')
```

Doing so will command the mermaid parser to look for the <div> tags with class="mermaid". From these tags mermaid will try to read the diagram/chart definitons and render them into svg charts.

Hope this would be of some help.

[aborruso]

Wow, I will wait for it.

Thank you again

[cscheid]

Preliminary support for this is now on main. This file:

---
title: foo
format: html
---

# This is a test

```{mermaid}
%%| echo: false
%%| fig-cap: "Caption"

flowchart TD
    A-->B & C
```

Did it work?

produces this:

There are definitely limitations with the current support. Right now, it only supports producing html formats, and it doesn't produce the correct output in self-contained mode. If those limitations are not a concern for you, then please go ahead, try it out, and let me know if something isn't supported appropriately. If you need output in docx or pdf format, then we're looking at about three to four weeks before landing that.

[aborruso]

Yeaaa!

Does it works also in reveal.js presentation?

[cscheid]

Yes, it should work.

For the record, the current constraint is that we depend on the mermaid runtime and, as a result, on the existence of a javascript runtime.