Closed MathewBiddle closed 23 hours ago
For now, I reverted back to the previous way for embedding mermaid diagrams.
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.
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.
so this should work?:
{% raw %}
```mermaid
graph LR
A --> B(B)
```
{% endraw %}
{% raw %}
graph LR
A --> B(B)
{% endraw %}
so this should work?
You mean GH notifications, right? The only jekyll pages will require the raw
to avoid conflicting with the jinja syntax.
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:
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.
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.
I didn't do a PR here, but this fixed the issue: https://github.com/ioos/mbon-docs/commit/ab00ac10f502b0208d9b45e0dc9a094e49d9b374
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
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.