Adding mermaid to Joplin

[sradevski]

Hi there, I just installed Joplin and it is amazing, great job! I see you are trying to keep the dependencies as low as possible, but I was wondering if you would be interested in adding Mermaid support to it? If you are not familiar with it, it is a markdown extension that supports generating flowcharts, sequence diagrams, and I see few more diagrams in development now.

I am not sure if I will have the time to do a PR, so I just wanted to see if there is any interest about it. Cheers!

[ghost]

• 1

[laurent22]

Assuming the Mermaid plugin works it might be possible - https://github.com/tylingsoft/markdown-it-mermaid

[thche]

anyway to support this ehancement?

[zohozer]

Seems that this feature it is added to the recent build, but no example how to use-it.

I created a new note like this:

============

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

===============

But when pressing the preview button, no nice graphics displayed.

I used the example from here: https://mermaidjs.github.io

[laurent22]

You'd need to wrap it in a codeblock with "mermaid" at the start:

But note that it's still an experimental feature and not yet supported in mobile, so that's why it's not documented.

[laurent22]

This will be officially supported from the next version of Joplin on both mobile and desktop. The doc is already there: https://github.com/laurent22/joplin#charts

[laurent22]

Sorry but for now I will disable Mermaid support as I need to evaluate whether it makes sense to actually support it. As I'm using it I see all kind of issues so it's possible that instead of Mermaid, other diagram libs will be used.

[stefan2904]

Since it was last mentioned in the changelog of v1.0.135, is this feature still present in v1.0.140?

[MAnECiaC]

Mermaid isn't working in Version 1.0.140 anymore. Are there any infos when it will be back?

[tessus]

I hope I can add it back within the next 2 weeks. Although the PR might me WIP at first, because it's likely I need some help with this. But at least I can get the ball rolling. Using mermaid properly is a bit of a PAIN, because react-native does not allow to run external js, which means it has to be injected.

/ref Discourse: Mermaid stopped working in lastest version 1.0.140

[d-ariza]

I first want to say hello and thank you for the work of this wonderful project that I benefit. I use this project on my mobile device, and in my home and work computers, and really recommend it to my friends or partners. Yesterday I was documenting a project and I had to make some diagrams. I know that some versions of markdown support it.but my surprise was to know that so does Joplin.
I really tried to make them as I saw them in some threads, I even built it with react, but I can not get it to work. I use Joplin 1.0.161 in ubuntu linux, in arch, in artix ( a arch without systemD), in mxlinux18; i Use the black theme, but i try in the light theme... but the "mermaid" feature do not work for me. I would greatly appreciate to tell me how I can activate or implement the feature to build it. and I apologize again for bothering you with the subject., and again I apologize for bothering with it. Thanks. I attached some pictures...

[tessus]

@d-ariza

but the "mermaid" feature do not work for me.

Of course not. Mermaid support haasn't been added back yet.

[d-ariza]

@tessus , thank you for your quick response. I want to ask, Can I added this feature somehow, Can I help us with this or some similar feature ???

[tessus]

Sure, do you know how to code react native and electron applications? The problem is that we can't load 3rd party js. This is why it has to be injected.

I wanted to work on it for a while now, but there's always something else popping up.

[d-ariza]

ok I try inject the code in the react native... I ask if something, I will start looking for a code injection in electron and from there I'm moving forward ... thanks

[tessus]

@d-ariza you will also have to create a file in the rules directory of MdToHtml to actually integrate the mermaid code. don't use the markdown-it-mermaid module. It is dated and shouldn't be used for Joplin.

[tessus]

see #2001 for tracking progress