Mermaid charts not showing on published notes

[mptpro]

Operating system

Linux

Joplin version

2.13.6

Sync target

Joplin Server

Editor

Markdown Editor

What issue do you have?

I am using Mermaid charts which render fine within Joplin on Linux and Android, but when I publish them to my Joplin Server they do not render - I only see the Mermaid code.

Is this expected behanvior?

[dpoulton]

I have found that Mermaid charts, even styled ones, generally do render in published notes. However any I have that have %%{init: lines do not...

With %%{init:...

This does render in the Joplin client but not when in a published note.

Without

[mptpro]

Thanks for your reply @dpoulton . However, I am not use the "%%{init", and it still doesn't work. Take a look at my screenshots...

[dpoulton]

That's odd because I typed out your first example and copied the second from the mermaid site.

In Joplin I get this:

And on the Joplin server (v2.13.5) it publishes like this:

I am wondering if there is a minor formatting error in one of the charts that the client renderer "forgives" but the server renderer does not and so does not render anything.

Here is my mermaid text to test if you wish.

mermaid_code.txt (1.7 KB)

EDIT:
It seems that mermaid was last updated in the server on 15NOV23. Are you using that version or above?

Not saying that is the cause but if you are not using v2.13.4 or above it may be worth pulling an updated version?

[mptpro]

Thanks again.

1. I coped your text example (thanks!) but that didn't work either, so it must not be a typo.

2. My server version is v2.13.3, so maybe that is the problem. I'm not sure how to upgrade to the newest. I went into my docker container and had it re-pull the image, but it still is on 2.13.3. I have the image set to joplin/server:latest

[dpoulton]

x86 (not ARM) server? If so the latest version is set at 2.13.3 with version 2.13.5 technically a beta.

joplin/server:2.13.5-beta

[mptpro]

Again, thanks for all your very prompt help!

I upgraded my Joplin server to 2.13.5-beta and it still doesn't work. The mermaid charts render fine in my Joplin clients, but the public version still doesn't. I even tried various browsers.

Here is my published test note: mermaid test - Joplin Server

Below is my markdown:

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!

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison          :crit, done, after des1, 2d
Create tests for parser             :crit, active, 3d
Future task in critical line        :crit, 5d
Create tests for renderer           :2d
Add to mermaid                      :1d

pie 
    title At Age 65
    "Deceased" : 30
    "Alive" : 70

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

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!

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :1d
    Functionality added                 :milestone, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

https://joplin.mptpro.com/shares/FFdAYMhXJOHq94ydLqt6l1

[dpoulton]

I've just visited your share using Firefox 115.5 ESR on Linux (Debian 12) and all the charts display apart from the XY Chart and that is probably to be expected as it appears to be a chart available in mermaid 10.6.0 and above.

[dpoulton]

OK, this is just getting weird!!

I have just visited the shared note using a random mix of Linux Mint, Manjaro, Debian, Windows 10, and Windows 11 virtual machines, with Firefox, Firefox ESR, Edge and Waterfox. I have also used Windows 11 on real hardware with Edge and Firefox as well as Debian 12 KDE with Firefox ESR. The tests were not "scientific"; just open the browser, visit the shared note, see what happens.

The ONLY browser / OS combination I have found so far that renders the charts is Firefox ESR on Debian 12 KDE and ONLY on actual hardware!! Two physical Debian / Firefox ESR computers rendered the charts but a similarly configured Debian 12 KDE VM with Firefox ESR did not.

I guess that this can only be some graphics / browser rendering issue but where the problem is and if it can be resolved is far, far beyond me...

Can anyone else see these charts???

[mptpro]

Thanks again. Yes, it's weird. I tried Brave, Chromium on Android, Safari, Google Chrome and none of them work. Strange...

[personalizedrefriger]

For me (Firefox 120 on Ubuntu 23.10), the diagrams don't render.

I'm getting

Blocked loading mixed active content “http://joplin.mptpro.com/js/pluginAssets/mermaid/mermaid.min.js” [Learn more]

in the browser console.

Clicking "Learn more" brings me to

Mixed content - Security on the web | MDN

Edit: This seems related to the appBaseUrl variable, which seems to be determined by the JOPLINAPP_BASE_URL environment variable.

If you set JOPLINAPP_BASE_URL, make sure it's https!

[tc68]

I am using joplin On Pop!_OS 22.04 LTS

Joplin 2.12.19 (prod, linux)

Sync Version: 3
Profile Version: 43

When I first start joplin, mermaid charts with the %%init heading will not render. If I remove the %%init line, the chart renders, and I can replace the line with no ill effect. Rendering continues in other notes successfully until Joplin is restarted.

[mptpro]

Mine don't have the %%init heading at all, and still don't render.

https://joplin.mptpro.com/shares/FFdAYMhXJOHq94ydLqt6l1

[personalizedrefriger]

It might work with an http:// URL:

http://joplin.mptpro.com/shares/FFdAYMhXJOHq94ydLqt6l1

[mptpro]

Thank you. My browser auto-converts to https. Even if it worked, since I will be sharing this note with others I need to make sure it works.