How to use mermaid chunks in quarto?

Question

I am trying to embed mermaid chunks in my Quarto html document, but I am unable to run the chunks. I keep getting the error /bin/sh mermaid: command not found. The screenshot attached shows the problem:

I am able to draw the flowcharts using DiagrammeR package, but I do not want to do that. I want to use mermaid chunks.

The versions of the software I am currently using:

1. RStudio: 2023.09.1+494 "Desert Sunflower"
2. R: 4.3.1 "Eye Holes"
3. Qaurto: 1.3.450
4. MacOS: 14.1.1 Sonoma (23B81)

I have tried using mermaid chunks on the RStudio thats on my Ubuntu server. I get the same error: /bin/sh: 1: mermaid: not found

I have installed the mermaid-cli on my device, and added the package.json to my path on the terminal, as per ChatGPT's suggestion (I used the latest command for npm install given on the mermaid GitHub page).

It will be great if anyone could help me solve this issue. Thank you!

Answer 1

Beginner Alert: I am not a computer guy, so you might find non-technical/technically inaccurate usage of terms in my answer

Little did I know, I was not supposed to download mermaid-cli separately for Mermaid to work.

I get the error: /bin/sh: mermaid: command not found no matter what I add to the terminal* path.

Simply render your quarto document, and the mermaid charts should be seen in the html output. It's sad that you cant execute mermaid chunks. 🥲

*As a Mac user, I was on the zsh terminal. RStudio uses /bin/sh shell. Hence running echo $PATH in your zsh terminal will not show you what is present in the path for /bin/sh. You should add the paths you want in the /bin/sh's path to ~/.profile. Adding them to ~/.zshrc or ~/.bashrc won't help.