2

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?

Greenfly77
  • 165
  • 2
  • 8

2 Answers2

0

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]
ScottWelker
  • 1,701
  • 17
  • 30
  • While I can follow your thought, this did not solve my problem. I try to use it from a page served by jekyll and found the above solution (which basically promises to work with css and js). I found a similar problem [here](https://stackoverflow.com/questions/68561397/mermaid-syntax-error-on-trying-render-a-diagram-on-github-md-file/69962504#69962504) and identified that I can render diagrams (with and without the line breaks you suggested) correctly if I use the spaceship plug-in. However, I would be interested in a fix to my setup from above. – Greenfly77 Nov 19 '21 at 17:33
  • Also tried your line breaks with the setup from above - additionally, tried with tabs. Won't fix. – Greenfly77 Nov 19 '21 at 17:40
  • Bummer. I thought I was on to it. Perhaps someone else can assist. I have no other ideas. Best of luck. – ScottWelker Nov 22 '21 at 17:27
0

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>
csviri
  • 1,159
  • 3
  • 16
  • 31