markdownquartomermaid

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


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:

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

Solution

  • 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.