Home / GitHub Page

Upgrading Mermaid

We are using Mermaid 8.4.6 at the moment. The last version has a few nice additions (like ERD diagrams, but also bug fixes.)
I ran these tests on git master 62bc296a

Mermaid test code

# Flow Chart

```mermaid
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
```

# Sequence Diagram 

```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
    John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```

End

Mermaid 8.4.6

Mermaid 8.6.0

Solution / Issue

There’s a difference in how the HTML is created. For Mermaid >= 8.5.0 the width is set as width: fit-content; which leads to the problem that you can see in the images above.

Any idea how we can fix this?

Mermaid 8.4.6

<div class="mermaid" data-processed="true" style="width: 100%;">
<svg id="mermaid-1595187978801" width="199.4375" xmlns="http://www.w3.org/2000/svg" height="146" viewBox="0 0 199.4375 146">

<div class="mermaid" data-processed="true" style="width: 100%;">
<svg id="mermaid-1595187978829" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:750px;" viewBox="-50 -10 750 463">

Mermaid 8.6.0 (>= 8.5.0)

<div class="mermaid" data-processed="true" style="width: fit-content;">
<svg id="mermaid-1595187548975" width="199.4375" xmlns="http://www.w3.org/2000/svg" height="146" viewBox="0 0 199.4375 146">

<div class="mermaid" data-processed="true" style="width: fit-content;">
<svg id="mermaid-1595187549002" width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" style="max-width:750px;" viewBox="-50 -10 750 578">

Maybe just the container width to 100%?

Yes, that could work. But isn’t this coming from Memaid? (Joplin was the same version in my tests, only Mermaid changed.) This means Joplin would have to change the generated code, right?

Hmm, I tried that, but if I change it from fit-content to 100%, the following happens:

mermaid

```mermaid
graph LR
	A[Christmas] -->|Get money| B(Go shopping)
	B --> C{Let me think}
	C -->|One| D[Laptop]
	C -->|Two| E[iPhone]
	C -->|Three| F[fa:fa-car Car]
```