Problems with getting Mermaid/PlantUML to work with Hugo

[TueDissingWork]

Hey,

I am trying to configure either Mermaid or PlantUML for integrating digrams within the code base. However I can't seem to get it working. Was trying to follow this guide: https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid and updated the config.toml as per the guide. When generating the site, no errors are presented and no diagrams aer generated either :-(

Do I need to install some thirdparty dependencies, or I am missing something?

How can I try to troubleshoot this?

/Tue

[LisaFC]

Are you using a recent version of the theme, as otherwise you won't have the relevant JS?

@gwatts, any other suggestions?

[TueDissingWork]

Are you using a recent version of the theme, as otherwise you won't have the relevant JS?

We configured the following option: min_version = 0.53. Which seems to be the recommended minimum version. Should I try with a more recent version?

[joelhoisko]

The same happens to me, enabling mermaid in config.toml also doesn't work for me. From the browsers console I can see that mermaid is defined, but the markdown code blocks just display as code blocks. Adding the mermaid cdn, calling the initialize command and using <div class="mermaid"> blocks works fine.

Hugo: hugo v0.81.0-59D15C97+extended linux/amd64 Docsy: commit b2ce247 from March 19 2021

[joelhoisko]

I found the problem! TLDR: Comment out the guessSyntax = "true" line from `config.toml:

I noticed, that all of the code blocks with mermaid tags were being rendered as

<code class="language-fallback" data-lang="fallback"></code>

Then looking at the assets/js/mermaid.js, it will only add the correct class="mermaid" to elements that have the language-mermaid class:

var needMermaid = false;
    $('.language-mermaid').parent().replaceWith(function() {
        needMermaid = true;
        return $('<pre class="mermaid">').text($(this).text());
    });

    if (!needMermaid)  {
        mermaid.initialize({startOnLoad: false});
        return;
    }

What fixed this for me, was to comment out the guessSyntax = "true" line from `config.toml:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
  [markup.highlight]
      # See a complete list of available styles at https://xyproto.github.io/splash/docs/all.html
      style = "monokai"
      # Uncomment if you want your chosen highlight style used for code blocks without a specified language
      # Comment out this line
      #guessSyntax = "true"

So my guess is that the markup highlighter didn't understand the ``mermaid language choice and overwrote it as a fallback thing instead, which caused themermaid.jsnot find the element and add the needed class elements around it. I was already using Prism instead of Chroma, so I didn't think that theguessSyntax` option would be used here though.

Env: hugo v0.81.0-59D15C97+extended linux/amd64 BuildDate=2021-02-19T17:07:12Z VendorInfo=gohugoio Docsy commit c36be07 Wed Jun 23 13:39:19 2021 +0100

[dfinn-takeoff]

I was also able to get Mermaid to render, but not PlantUML. Any luck @TueDissingWork?

[sandman-battelle]

I was also able to get Mermaid to render, but not PlantUML. Any luck @TueDissingWork?

I had the same. My docsy project was setup about a year ago so I think some of the original configs had drifted enough to break things. Here is what I did to fix things but I can't exactly say which one did the trick :/

• removed all npm dev dependencies
• nuked ./node_modules and package-json.lock
  • had one called hugo-bin that is now not needed???
• added back only deps stated in README...the Getting Started docs on the Docsy site are very TL;DR for me

  
     "devDependencies": {
         "autoprefixer": "^10.3.3",
         "postcss-cli": "^8.3.1"
     }

• pulled latest form the Docsy master (should really rename that) branch
  • I git submodule ... docsy into my themes dir
  • I did not pull (update) for recursively installed modules: bootstrap and fontawesome
• upgraded to Hugo 0.87 extended
• nuked my hugo-cache in /tmp
• nuked my public/ and resources/ dirs just to make sure
• ran hugo server with --disableFastRender just to make sure

...and something in all that mess fixed it

I'm running Ubuntu 20.04.3 LTS from Window 10 via WSL (yeah, I know...but my works makes me use Windows...lol)

Hope that helps someone because this was way to hard to track down :)

[TueDissingWork]

Thanks guys, Got PlantUML working. Our theme was rather outdated - seems to be working now :-)