Can't load image in mermaid js node

Using Themes
1

Hi everyone,

I wanted to integrate mermaid js in this theme: terminal | Hugo Themes . I have created the shortcode to use it in the .md files, and everything seems to works correctly. I’ve tested with several types of graphs and I’ve also tried the “click” functionality to open links from a node. However, when I try to load an image inside a node I get the mermaid error “syntax error in graph”. I’ve tried both to load images with shortcode or in HTML form, but it simply does not work. What can I do?

For completeness, I’m reporting the mermaid shortcode I have done:

<script async type="application/javascript" src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js">
  var config = {
    startOnLoad:true,
    securityLevel:"loose",
    theme:'{{ if .Get "theme" }}{{ .Get "theme" }}{{ else }}dark{{ end }}',
    align:'{{ if .Get "align" }}{{ .Get "align" }}{{ else }}center{{ end }}'
  };
  mermaid.initialize(config);
</script>

<div class="mermaid">
  {{.Inner}}
</div>

EDIT: code that tries to load the image

---
title: "Showcase"
date: "2018-07-18"
author: "Hello Robot"
---
{{< mermaid>}}
graph TB
    id1{{ "<img src='/img/mis.png' height='50px' width='50px'/>" }}

{{< /mermaid >}}

Thank you!

2

I don’t see an image there. Also, it might be helpful to test your code in a simplified version (i.e. just an HTML file that runs the required JS code). This, you can easily debug in your favorite browser (ok, may be not “easily” with a minified mermaid version, but then just load the full version instead).

Apart from that: you might want to look up default in the Hugo documentation to make your code a bit simpler (re the setting of theme and align).

3

Dear @chrillek ,
Thanks for responding. I have edited the post by adding the code in the .md files that loads the image. The funny fact is that when I try to open the page, the image is visible for a fraction and then the error raises!

4

As I said: You might want to create an isolated case that simply loads the image in your mermaid file. No Hugo, just HTML, CSS and JavaScript. If that works, your problem might actually be related to Hugo. Otherwise, it is off-topic here.

And also: there seem to have been problems in the past with incorporating images in Mermaid files. You might want to google for that.

5

Following your suggestion, I’ve tried with simple html (no Hugo so far). Unfortunately, it acts the same so as you told it is a mermaid problem for sure.

Sorry for bothering you!