mermaid not rendered in Jekyll page

user_16469845 0
Viewed 290

I try to setup mermaid in a Jekyll page. In Jekyll I am using the theme Just the Docs.

Basically I followed this post to add mermaid in my page template. And it results in: enter image description here

Diagram I used is:

<div class="mermaid">
    graph TD 
    A[Client] -->|tcp_123| B(Load Balancer) 
    B -->|tcp_456| C[Server1] 
    B -->|tcp_456| D[Server2]
</div>

I also tried with ```mermaid but that simply does not render a diagram at all. Additionally, I tried other versions of Mermaid and other examples from mermaid webpage without success.

What is wrong with my setup here?

mermaid jekyll
2 Answers

I believe you require properly placed line breaks for Mermaid to correctly interpret and render the diagram. Using the Mermaid Live Editor I was only able to render your diagram with the following use of link breaks. However, it's not clear to me exactly how you accomplish that in what seems to be your HTML (div tag). Perhaps you simply break the lines, as the tutorial to which you've linked seems to show.

graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1] 
B -->|tcp_456| D[Server2]
user_4189500

You have to add

markdown="0"

attribute to div, if you check the rendered code it adds additional paragraphs, that results in the mentioned problem. This helped in my case.

<div class="mermaid" markdown="0" >
    graph TD 
    A[Client] -->|tcp_123| B(Load Balancer) 
    B -->|tcp_456| C[Server1] 
    B -->|tcp_456| D[Server2]
</div>
user_7375910
Related