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 ou…

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. [image] mermaid-js/mermaid-cli Command line tool for the Mermaid library. Contribute to mermaid-js/mermaid-cli development by creating an account on GitHub. …

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.

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.

Okay. Will try that out. Thanks!

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

support

jmooring December 23, 2022, 2:43pm 10

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

Topic		Replies	Views
Introduce Mermaid diagram support feature	4	2853	December 28, 2020
Correct way to embed Mermaid.JS support diagram , chart	18	7967	April 3, 2023
How to insert mermaid diagram with the render hooks way? support diagram , chart	4	808	January 4, 2024
Run a JS file or Java executable and embed output support	7	689	August 2, 2023
The long-overdue need for converting/outputting other formats feature	3	2461	February 9, 2025

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

Related topics