Joplin: ERD diagram of mermaid is not rendered

[tim-hub]

Play round the mermaid diagram, found the ERD is not rendered.

Environment

Joplin version: 1.0.201
Platform: Mac OS
OS specifics: (prod, darwin) Mac OS Catalina

Steps to reproduce

1. follow the screen shot, create a ERD diagram

Describe what you expected to happen

the ERD should be rendered in preview windows.

Logfile

please see the screenshot above.

[laurent22]

Why not provide the Markdown you used so that we can replicate the issue?

[coderrsid]

Markdown to recreate the issue

# erd
```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{  LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

[coderrsid]

Although @tim-hub , these are experimental features of Mermaid-js-erd

[tessus]

It's possible that our Mermaid version does not even have that feature yet.

[tessus]

Yep, this was added in 8.5.0. We use 8.4.6.

[coderrsid]

It's possible that our Mermaid version does not even have that feature yet.

You're perfectly right, tessus. This feature is added to v8.5.0 and we're using v8.4.6 . Everyone can see below in the changelog of mermaid-js Features section.

[tim-hub]

Why not provide the Markdown you used so that we can replicate the issue?

just forgot

[tim-hub]

Markdown to recreate the issue

# erd
```mermaid
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{  LINE-ITEM : contains
  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

thanks

[tim-hub]

@laurent22 @coderrsid @tessus

thanks for the finding out

[tessus]

No worries, at one point we'll update Mermaid. No ETA though.

[tessus]

@laurent22 I actually tried to update mermaid, but none of the scripts updates the mermaid.js in rnInjectedJs. What am I missing?

I tried npm i in the root folder, npm run build in ElectronClient and ReactNativeClient.

Update: Never mind, I figured it out, but it actually resulted in more questions:
Why is the mermaid package in the package.json of ElectronClient and ReactNativeClient, while all where it is needed is in ReactNativeClient/lib/joplin-renderer/package.json.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[tessus]

Mermaid has to be updated. Upstream already fixed the issue I encountered after upgrading to 8.5.0.
So we should be good to go.

I'll submit a PR tomorrow. I'm currently not home.

[tessus]

I've updated Mermaid to 8.5.2, but the squence diagram and the gantt chart are too small. I suspect that we have previously added additional css to Joplin to fix upstream issues, but I don't know.

@laurent22 do you remember adding fixes for Mermaid upstream bugs that had something to do with the size of the mermaid images?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[tessus]

@laurent22 do you remember adding fixes for Mermaid upstream bugs that had something to do with the size of the mermaid images?

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[tim-hub]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

i think it still not fixed

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[tessus]

The problem is that new versions of Mermaid require a change from fit-content to 100% for the width. But this also results in another issue described here: https://discourse.joplinapp.org/t/upgrading-mermaid/10140/4?u=tessus
However, since Laurent changed it to 100%, we can also upgrade Mermaid....

[laurent22]

Isn't it the same issue as this one? #3097 I think the fix would be to make the graph scrollable rather than 100% width, so that we can handle graphs of any size.

[tessus]

Well, the fit-content did that, but then some of the graphs are too small. I explained this in the topic referenced.
So I think at one point you added the fit-content but now after mermaid 8.5.0 some images are too small. Going back to 100% fixes the size problem, but then the scroll issue resurfaces....

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may comment on the issue and I will leave it open. Thank you for your contributions.

[MHoeller]

The issue is fixed, with version 1.2.x since this was a release I considered this as tested.
In case it is needed: from my perspective this issue can be closed

[tessus]

Yep, Caleb added this with the bump to Mermaid 8.x.y