Problem with two Mermaid diagrams

support
,
10

If you run your large diagram (include the encapsulating pre tags) through an HTML validator it throws errors such as:

Bad character | after < . Probable cause: Unescaped < . Try escaping it as &lt; .
<|..

Bad character < after < . Probable cause: Unescaped < . Try escaping it as &lt; .
<<interface>>

So I don’t see this as a Mermaid problem.

Instead, I think we need to escape special characters, then tell Go’s html/template package that the result is safe.

<pre class="mermaid">
  {{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

This test site seem to work fine using the template code above. It contains the two examples from this topic, as well as some examples from https://mermaid.js.org/syntax/examples.html.

git clone --single-branch -b hugo-forum-topic-52506 https://github.com/jmooring/hugo-testing hugo-forum-topic-52506
cd hugo-forum-topic-52506
hugo server

I’ve updated our documentation accordingly:
https://gohugo.io/content-management/diagrams/#mermaid-diagrams

2 Likes