Broken diagrams (due to broken HTML)

[FuadEfendi]

Hi @razonyang,

Please see this discussion: https://discourse.gohugo.io/t/problem-with-two-mermaid-diagrams/52506/10

We need something like this:

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

Otherwise diagrams like this one will be broken:

classDiagram
    AbstractFactory <|.. ConcreteFactory1
    AbstractFactory <|.. ConcreteFactory2

    AbstractProductA <|-- ProductA1
    AbstractProductA <|-- ProductA2
    AbstractProductB <|-- ProductB1
    AbstractProductB <|-- ProductB2

    Client --> AbstractFactory
    Client --> AbstractProductA
    Client --> AbstractProductB

    class AbstractFactory {
        +CreateProductA() : AbstractProductA
        +CreateProductB() : AbstractProductB
    }

    class ConcreteFactory1 {
        +CreateProductA() : ProductA1
        +CreateProductB() : ProductB1
    }

    class ConcreteFactory2 {
        +CreateProductA() : ProductA2
        +CreateProductB() : ProductB2
    }

    class AbstractProductA {
        <<interface>>
    }

    class AbstractProductB {
        <<interface>>
    }

    class ProductA1
    class ProductA2
    class ProductB1
    class ProductB2

Loading

[FuadEfendi]

wrong issue; sorry.

[razonyang]

{{- .Inner | htmlEscape | safeHTML }}

According to my local testing, the diagram above displayed correctly and the diagram text was escaped by default.

With this, it seems that the input was escaped twice unnecessarily, not sure if there is an unexpected case.

As to the flowchart example on forum, you just need to quote the node's text by double quotes ".

Btw, the flowchart example can not be parsed by the official live editor without quoting the node texts.

[FuadEfendi]

Thanks for checking,

Yes, official live editor will fail too, however: it doesn't fail if I use A[hello #40;world#41;] - as you can see, I don't use double-quotes, and it won't fail. So, there is bug somewhere... double-quotes are just workaround.

[FuadEfendi]

I have many other use cases when it fails with () or {}, I don't remember all; using numerical code substitution always works but finally I feel tired ;)
I hope they will improve this, mermaid-js/mermaid#6075 (comment)
I was worried that GitHub shows the diagram correctly, but Hugo has issues. fortunately, this is not true; your module works correctly, and I don't see any issues.