Style support in Mermaid flowcharts

The Mermaid team recently added support for styles in flowcharts but it doesn't yet appear to be supported in Joplin 1.2.6 on Windows. See mermaid issue.

Can we please add support for this feature?

Hi @mike-lloyd03, the mermaid version was bumped in Joplin v1.3.1 which is currently in pre-release. You can download it now if you want to get access to this functionality early. Otherwise, stay tuned for the next release!

You guys are on it! Thanks!

Hmmm... something isn't right. 1.3.2 seems to no longer have support for subgraphs.

Is that the same as this bug. It looks like mermaid version 8.8.1 introduced a bug related to subgraphs, but I don't use mermaid so I'm not sure if this is what you're experiencing. Please let me know. If this is the same bug we can fix it by bumping to 8.8.2. Although it might be worth waiting for 8.8.3, it seems like mermaid has been introducing a lot of changes lately...
edit: Actually it looks like subgraphs might still be broken in 8.8.2
If you can test you chart in the live editor first to show that bumping the version actually works, that would be great.

It looks like subgraphs do indeed work in 8.8.2 on the web app. Here's a link to what I'm working with.

Styling of the subgraph backgrounds isn't implemented yet but the Mermaid team recently committed a change to implement it so it should be live on the next release. If it's not done before the next Joplin release, can we at least bump to 8.8.2 to get subgraph support in flowcharts? It would be very helpful for a document I'm working on this week. Thanks!

I'm not confident it will be possible to get the version bumped in the next week, but if you're able I would suggest that you build your own local development copy of Joplin. This way you can track the new mermaid versions exactly. It should only take you 30 minutes to get set up, so you could reasonably be using 8.8.2 by this evening!

To get set up locally Just download the Joplin source from github. Press on the green "code" button and select "Download Zip"

Next read the build document and install the required libraries, then run the listed commands for your system.

After that you can easily change the mermaid version to 8.8.2 and start using it right away.
Just don't forget to run npm run buildAssets from the joplin renderer which will make sure that joplin actually uses the new version.

Nice! I'll give it a try! Thanks.

Hello Caleb,

I am unable to make this snippet work in Joplin. Can you help?

The console says Mermaid error TypeError: Cannot read property 'themeVariables' of undefined


Hi @shubhamjain0594

If I had to guess, it might be because the live preview is on v8.9.2 but Joplin uses 8.8.4. But I don't have the time to troubleshoot this currently.