Mermaid graphs fail to render

[blonewolfs]

I'm trying to get Mermaid graphs to show up on my site by following these directions but, the rendered page just shows it as a regular code block.

If I try it per these directions it does work but, I shouldn't have to go that route since it is supposed to be built in now.

In my local dev env I'm using:

• hugo v0.104.3-58b824581360148f2d91f5cc83f69bd22c1aa331+extended windows/amd64 BuildDate=2022-10-04T14:25:23Z VendorInfo=gohugoio
• go 1.19
• github.com/google/docsy v0.5.1

Any suggestions on what I may be doing wrong would be appreciated.

[deining]

I'm trying to get Mermaid graphs to show up on my site by following these directions

The user guide refers to the latest version of docsy. However, you are using docsy v0.5.1 and auto activation of mermaid diagrams was introduced after that release. So you have two choices:

• Upgrade to the latest version of docsy or
• Enable mermaid manually. by adding the following two lines to your config.toml:

[params.mermaid]
enable = true

Does this cure your problem?

[deining]

I tried updating Docsy with hugo mod get -u github.com/google/docsy and it just re-pulled v0.5.1.

Weird. Hard to tell what's going wrong here.
Is your project publicly available? Or can you provide a (minimum) repo (on GitHub or so) showcasing your problem?

[blonewolfs]

I stripped the site down to the bare minimum that I can. I have posted it here.

[deining]

I stripped the site down to the bare minimum that I can. I have posted it here.

Thanks for providing the repo. I cloned the repo, ran hugo server, opened the mermaid example page, and the diagram rendered perfectly fine for me. No idea what's causing trouble here for you.

[blonewolfs]

When you looked at the example page, did you see two (2) of the same graph or, did you see a code block and graph? It should have been two (2) identical graphs, one (1) in each section.

[deining]

When you looked at the example page, did you see two (2) of the same graph

No. Ah, now I understand!
Busy right now, will investigate that during the weekend.

[deining]

I investigated your case. All you have to do to get your mermaid diagram displayed is to change one line inside your config.toml:

https://github.com/blonewolfs/hugo-mermaid-test/blob/4dbe2554c74c796e91a43c63a52d4b5b55b0647f/site/config/_default/config.toml#L68

Change this line to

guessSyntax = "false"

This requirement was documented in a previous version of the user guide:

docsy/userguide/content/en/docs/adding-content/diagrams-and-formulae/index.md

Line 302 in 3147661

You also need to disable the `guessSyntax` from markup highlighting in `config.toml`/`config.yaml`/`config.json` for Mermaid to work:

As of dosy version 0.6, mermaid diagrams will be displayed regardless of the value assigned to guessSyntax, therefore this line was removed in the latest, published version of the user guide.

Hope this explanation can provide clarification concerning the issue you encountered! If so, please mark this dicussion as anwered. Thanks.

[blonewolfs]

Thank you so much! That completely solved the problem for me.