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.

5 Likes

Hello,

Mermaid adds a mindmap feature in the version 9.2.0 and this is the 9.1.7 versions in Joplin.

Since, making mindmap is a feature asked for joplin, it would be interesting to upgrade mermaid.

I have read that it was easy to do but I am not a dev ...

Could you do it or tell me how to do it ?

Thank you in advance !

Joplin is using Mermaid 9.2.2.

However, for some reason, the mindmap does not work. I haven't figured out why yet. I think that the mindmap uses a different rendering algorithm.

It's tracked here: Mermaid Master Ticket (Improvements and Issues) · Issue #7629 · laurent22/joplin · GitHub

Thank you !

I have this image when I switch to view mode :
image

So I guessed it was in 9.1.7 version... I was wrong ^^

You did not mention what Joplin version you are using but if you are using the current release version (Joplin v2.9.17) then it seems that the Mermaid version is 9.1.7 and the error dialog you are seeing is correct.

According to the release notes Mermaid was updated to 9.2.2 in Joplin v2.10.2.

Joplin v2.10.2 and later are all currently classed as pre-releases.

If tessus, a dev, is having issues upgrading Mermaid it's probably not as easy as what you read suggested :slight_smile:

1 Like

Yes, I am but a beginner and after reading the doc, I can say I didn't get anything of it.

My version of joplin is 2.9.17.

Joplin v2.10.2 and later are all currently classed as pre-releases

Not sure if I understand it corectl : if it is a pre-releases, I should stay on my version because it is a more "stable" one, isn't it ?

Yes.

Pre-releases are like "beta" versions released for testing. Then at some point a new "release" version will be made. Unless a feature has been introduced that you really need now (and Mermaid Mindmap is being implemented but isn't working yet) you might as well stay with the 2.9.17 release version.

You can see a list of changes made to Joplin since the last release version here.

1 Like

I could upgrade Mermaid to 9.3.0, but it won't change the fact that mindmaps won't work. I have to find out why - I think it is because it's using a different rendering algorithm.

Also, I don't consider myself a JS dev. I'm very old school and a C programmer. My JS and TypeScript skills just suck. I was able to work on a few things in Joplin, but that doesn't make me a JS dev. :wink:

1 Like

Hi! Wondering where this is at? Having the mindmap issue in PopOs with Joplin 2.9.17. Hope I'm providing the right information...

As I have mentioned before, upgrading Mermaid will not fix the mindmap issue.