HUGO

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: