Hugo

Mermaid shortcode not working

I’m using the Learn theme that adds a Mermaid shortcode. I tried adding a graph using it, but all I see is the source code between the shortcode begin/end pair.

I’ve tried both the Safari and Chrome browsers. When I generate the site, the mermaid subdirectory with the mermaid.js file is there.

How can I get this to work?

We would need to see your site code in order to troubleshoot this. Please see the Requesting Help wiki.

Actually, I figured it out. I can’t share my git repo, so I started to create a “debug” repo that I can share and tried to repro the issue in the “debug” repo. It turns out that the labels for graph nodes must be put in double quotes if they contain certain characters. I had labels like Namespace::Function().

Now I want to have the labels be monospaced, but putting labels within backticks doesn’t work, but I expect that’s more to do with Mermaid itself than Hugo.