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

**URL:** <https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662>\
**Category:** support\
**Tags:** diagram, chart\
**Created:** [May 2, 2021, 10:15am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662 "2021-05-02T10:15:21Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Niclas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/niclas/32/14249_2.png) [@Niclas](https://discourse.gohugo.io/u/Niclas)\
**Post date:** [May 2, 2021, 10:15am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/1 "2021-05-02T10:15:21Z")

</div>

I’m trying to figure out if I can eliminate our javascript dependency for [Mermaid](https://mermaid-js.github.io/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.

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [May 2, 2021, 10:23am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/2 "2021-05-02T10:23:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [May 2, 2021, 10:24am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/3 "2021-05-02T10:24:11Z")

</div>

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

> **[mermaid-js/mermaid-cli](https://github.com/mermaid-js/mermaid-cli)**
>
> Command line tool for the Mermaid library. Contribute to mermaid-js/mermaid-cli development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Niclas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/niclas/32/14249_2.png) [@Niclas](https://discourse.gohugo.io/u/Niclas)\
**Post date:** [May 2, 2021, 10:25am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/4 "2021-05-02T10:25:33Z")

</div>

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 )

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [May 2, 2021, 10:43am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/5 "2021-05-02T10:43:27Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Niclas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/niclas/32/14249_2.png) [@Niclas](https://discourse.gohugo.io/u/Niclas)\
**Post date:** [May 2, 2021, 10:46am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/6 "2021-05-02T10:46:54Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![navendu-pottekkat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/navendu-pottekkat/32/17604_2.png) [@navendu-pottekkat](https://discourse.gohugo.io/u/navendu-pottekkat)\
**Post date:** [December 23, 2022, 7:25am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/7 "2022-12-23T07:25:19Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Niclas](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/niclas/32/14249_2.png) [@Niclas](https://discourse.gohugo.io/u/Niclas)\
**Post date:** [December 23, 2022, 8:24am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/8 "2022-12-23T08:24:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![navendu-pottekkat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/navendu-pottekkat/32/17604_2.png) [@navendu-pottekkat](https://discourse.gohugo.io/u/navendu-pottekkat)\
**Post date:** [December 23, 2022, 8:29am UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/9 "2022-12-23T08:29:03Z")

</div>

Okay. Will try that out. Thanks!

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [December 23, 2022, 2:43pm UTC](https://discourse.gohugo.io/t/is-it-possible-to-generate-mermaid-images-in-the-hugo-build-process/32662/10 "2022-12-23T14:43:53Z")

</div>

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