How to embed mermaid graphs in quarto documents used to generate gitlab wiki pages

Question

The workflow I'm aiming for is to generate gitlab wiki pages from Quarto including mermaid diagrams.

Issue : Somehow, when quarto produces the .md file, it replaces > symbols with >, which breaks the mermaid rendering in Gitlab.

Reproducible code:

• The quarto file :

  ---
  title: "test gfm mermaid"
  format:
     gfm
  ---
  
  Text
  
  ```{mermaid}
  flowchart LR
     A-->B
  ```
  

• The resulting markdown file (obtained with quarto render test-gfm-mermaid.qmd) :

  # test gfm mermaid
  
  Text
  
  ``` mermaid
  flowchart LR
     A-->B
  ```
  

Expected outcome: I guess maintaining the integrity of mermaid snippets.

Versions :

[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.1.1: OK
      Dart Sass version 1.55.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.3.450
      Path: /opt/quarto/bin

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

Answer 1

The problem you are facing is an issue with quarto version 1.3, which is resolved in quarto version 1.4. So I think you are using a Quarto version below 1.4. Upgrade to version 1.4 and try again.

With quarto v1.4.547, quarto render test-gfm-mermaid.qmd generates,

# test gfm mermaid


Text

``` mermaid
flowchart LR
   A-->B
```

---

Also if you are an mermaid user, I would recommend to keep an eye on this Github issue thread.