Is it possible to generate Mermaid images in the Hugo build process

I’m trying to figure out if I can eliminate our javascript dependency for Mermaid by generating the images from within Hugo.
Would it be possible to use Hugo Pipelines (maybe using ESBuild) in some way to execute the Mermaid (js) code?

I still want to be able to allow for the Mermaid syntax in our markdown files and rather not have to wrap everything with additional build logic.

No. Hugo creates HTML. Javascript is executed in the user’s browser. If Mermaid would be able to create static images it’s documentation would state so somewhere.

Have a look at mermaid-cli. That seems to be able to create SVG images that you can embed like any other image.

Yes, I’m aware of the mermaid-cli and have working code for that. I was wondering about being able to kick off that code from within Hugo…
(I.e. generate SVG from Mermaid and use that output )

AFAIK, there’s no possibility to kick of arbitrary code execution from within Hugo. It had been discussed in the past (cf. Github), but abandoned for security reasons, IIRC.

1 Like

Yes, I was kind of expecting this answer. But thought I’d give it a try so I hadn’t missed something obvious. Well, guess I’ll have to do a manual pre-process step that generates the images using mermaid-cli etc if I want to get rid of that 800kb JS then. :slight_smile:

@Niclas Were you able to build a custom pre-processing step that does this? I’m also looking to do something similar and this would help.

We ended up using mermaid-cli to generate SVGs manually when adding new flowcharts …Which we do so seldom so I haven’t looked into this since I posted though.

1 Like

Okay. Will try that out. Thanks!

https://discourse.gohugo.io/t/is-there-some-pre-packaged-way-to-use-kroki-from-markdown/36924/5