Problem with two Mermaid diagrams

support
,
1

For example, this doesn’t work:

### 7. Diagrams and Visualizations

To further illustrate these concepts, let's use a diagram to compare the growth rates of different complexity notations:

```mermaid
graph TD
    A[O(1)] --> B[O(log n)]
    B --> C[O(n)]
    C --> D[O(n log n)]
    D --> E[O(n^2)]
    E --> F[O(2^n)]
```

But this works:


```mermaid
graph TD
    A[O#40;1#41;] --> B[O#40;log n#41;]
    B --> C[O#40;n#41;]
    C --> D[O#40;n log n#41;]
    D --> E[O#40;n^2#41;]
    E --> F[O#40;2^n#41;]
```

And few other characters, such as HashMap~String, Integer~ instead of HashMap<String, Integer>

Maybe I can create custom shortcode?

I am not really sure we need it as a feature: indeed it is issue at Mermaid side; GitHub also shows such diagrams incorrectly unless I explicitly use #40;#41 etc

2

Then either the Mermaid team should fix this, or you should modify layouts/_default/_markup/render-codeblock-mermaid.html to do some sort of search/replace. For example:

<pre class="mermaid">
  {{- .Inner  | replaceRE `\(` "#40;" | replaceRE `\)` "#41;" | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

But I have no idea if that breaks any other diagrams.

1 Like
3

Thank you for the snippet!
Yes it may break some other diagrams; I just thought, after initial post, best if Mermaid team fixes that. Diagrams either break or not break at Hugo and in the GitHub (which integrates Mermaid same way as Hugo does, without “workarounds”), better if Repo shows same issues as Hugo

2 Likes
4

hint:

according to this rather old issue: Brackets in a node with text? · Issue #213 · mermaid-js/mermaid · GitHub you may use quotes around the text

works fine for your parentheses issue () using the standard mermaid integration from hugo docs

graph TD
    A["O(1)"] --> B["O(log n)"]
    B --> C["O(n)"]
    C --> D["O(n log n)"]
    D --> E["O(n^2)"]
    E --> F["O(2^n)"]
2 Likes
5

Tested, it works!!! Thank you @irkode

7

Here is exact scenario when it doesn’t work.

Check this page: hugo-mermaid-test/content/firstpost.md at main · FuadEfendi/hugo-mermaid-test · GitHub

    class ConcreteFactory1 {
        +CreateProductA() : ProductA1
        +CreateProductB() : ProductB1
    }
  • GitHub shows it properly.

I found that Hugo does not natively supports Mermaid diagrams. I followed this example:

And this example to create absolute minimalistic site: Really getting started with Hugo: four simple steps | BryceWray.com

Here is my test repo:

If you run hugo server and navigate to http://localhost:1313/firstpost/ you will see error icon.

In production, I use different theme, GitHub - hbstack/mermaid: HB Mermaid Module (and it has same issue; I believe all existing Hugo-Mermaid implementations have same issue)

Here, I created absolute minimalistic setup to isolate the issue. I am wondering how to fix it:

<pre class="mermaid">
  {{- .Inner | safeHTML }}
</pre>

NOTE: If you open test page directly at GitHub in the browser, you will see properly rendered diagram.

8

I even created plain minimalistic HTML file which you can open in the browser, followint Mermaid instructions, and it shows error. Somehow GitHub found a way to fix this issue.

So I am reporting it to Mermaid team.

9

Reported to Mermaid team; I am very sure GitHub team found the way to fix the issue.

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
11

Thank you!

1 Like