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]
```

On 1.5.7 i couldn't reproduce the non full background.

If i set .mermaid{ width:fit-content !important;} i get
mer 2
with `.mermaid{ width:fit-content;}' i get
mer1

100% instead of fit-content does stretch to full pane in both cases.

I set css from note content (with style tag).

I was setting it in the Joplin code, so I'm not sure, if there are any differences in that regard, but I doubt it.

I will look into it again when I have a bit more time.

1 Like

Looks like we're about 6 months behind with the mermaid version. Are the upgrades difficult?

Normally it's easy and even documented but I guess no-one took the time to do it. Often we only update when there's a bug or significant improvement in the library.

Actually I asked a while back, if I could upgrade Mermaid....

Ok I see no reason not to, feel free to create a PR when you have a moment.

Thanks, will do in a bit.

4 Likes