Syntax error with mermaid diagram on data flow page

[MathewBiddle]

See https://ioos.github.io/mbon-docs/mbon-data-flow.html

I made a recent change to more easily incorporate mermaid diagrams into our jekyll page by using the predefined invocation block for mermaid. https://github.com/ioos/mbon-docs/commit/4898515222c199b4d2fad960fd8fd0618cbdb9ad

```mermaid

For some reason, this complex diagram doesn't jiive with the js for mermaid. But the diagram works just fine in the live editor https://mermaid.live and if I keep the previous stuff. No clue what's up with it.

[MathewBiddle]

For now, I reverted back to the previous way for embedding mermaid diagrams.

[ocefpaf]

The live editor probably uses a modern version of the JS lib. I'll check how/if we can update it in our jekyll theme too.

[ocefpaf]

Nope. Even using the same version as the live editor we get that syntax error. The {} can be confused with jinja and that we need the raw there to escape them. A diagram without curly braces would work without the escaping.

[7yl4r]

so this should work?:

---

{% raw %}
```mermaid
graph LR
A --> B(B)
```
{% endraw %}

---

GitHub rendered:

{% raw %}

graph LR
A --> B(B)

{% endraw %}

[ocefpaf]

so this should work?

You mean GH notifications, right? The only jekyll pages will require the raw to avoid conflicting with the jinja syntax.

[MathewBiddle]

Figured out the issue. Jekyll uses `{{}} as something special. Mermaid uses it to make a different shaped box. When Jekyll renders the html, it removes the {{}} and double quotes, thus breaking the Mermaid syntax:

When it should look like the markdown, when rendered in html:

https://github.com/ioos/mbon-docs/blob/bc5a55ac8dbff9133a903b0d9703957295658cd7/_docs/mbon-data-flow.md?plain=1#L39-L40

So, adjusting the shape to something different should fix this specific issue.

I'll update https://ioos.github.io/ioos-documentation-jekyll-skeleton/howto.html#adding-mermaid-diagrams-to-a-page with these details.

[ocefpaf]

Figured out the issue. Jekyll uses `{{}}

Yep. That is why we need the raw, so jekyll doesn't interpret it as a liquid tag. However, if changing the shape is an option, that is much easier to maintain then skipping syntax everywhere.

[MathewBiddle]

I didn't do a PR here, but this fixed the issue: https://github.com/ioos/mbon-docs/commit/ab00ac10f502b0208d9b45e0dc9a094e49d9b374

https://ioos.github.io/mbon-docs/mbon-data-flow.html