Mermaid in Joplin?

Thanks for your work, It is really a good tool. Could you please advise which old version I could have this?

You probably shouldn’t use such an old version as you won’t be able to sync it with the mobile app.

thanks laurent, it is really bad news to remove it for me. :expressionless:

It will probably be back at some point.

2 Likes

Mermaid is more stable now, so it most likely will be added as a plugin. It’s just that adding it properly takes time.
I’m also very keen on having Mermaid back.

5 Likes

Thanks to Laurent, Mermaid will be available in the next release (after 1.0.179). It’s already in git master.

2 Likes

Hello,
There somehow is something I am missing: I have the latest Joplin version (1.0.216) and I can’t make mermaid code to render: this simple one taken from https://mermaid-js.github.io/mermaid/#/README?id=special-note-regarding-version-82 displays nothing:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

can you tell me what I am missing ? (of course “Mermaid diagrams support” is enabled in Tools / Options / Plugins).

Did you put it in a Mermaid code block?

It must look like this:

```mermaid
graph LR;
A-->B;
A-->C;
B-->D;
C-->D;
``` (remove the text after the 3 backticks in this line)

I had to add the text at the end, otherwise Discourse would not have shown the last 3 backticks.

Yes I did input as the first line the three backticks followed by “mermaid” (of course without double-quotes) and as the last line the three backticks:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
``` (parentheses to show this line)

I can’t reproduce this problem. It renders fine for me. Are there any errors in the console? (Help -> Toggle Developer Tools -> Console) or in the log.txt.

for me, i needed to remove the “(parentheses to show this line)”. once i removed that, this rendered fine. it’s the ( ) that seems to cause the issue.

That’s why I wrote remove the text in parenthesis, maybe I should have written and the parenthesis

This text is only for Discourse otherwise 3 backticks end the code block.

I’ve updated it to: (remove the text after the 3 backticks)

Yea, sometimes us markdown newbies miss common stuff. LOL…

No worries. markdown is awesome, but if the forum uses markdown as well, it’s not always easy to actually escape certain elements properly.

I cannot duplicate this problem either.

Any chance of attaching a screenshot of a test note showing what it looks like for you?

Hello,
Below captures of the code which show it is correct:


Screenshot from 2020-06-08 08-56-11

The console: yes ! there are errors (please note that my installation is fresh - done yesterday):

graph in graph TD is a keyword not just a part of the title. So in your example it should be
graph un graphe simple

https://mermaid-js.github.io/mermaid/#/n00b-syntaxReference

Strange … it seems not to know this keyword:

I have to confess I have not read the link I provided. Now that I’ve done that it turns out both words in graph TD are key words. TD is for top down (more here https://mermaid-js.github.io/mermaid/#/flowchart)
So you can’t just put un graphe simple there.