Mermaid in Joplin?

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.

Ho sorry!!
Understood now :slight_smile: yes graph TD are the keywords:

Thank you for your fast anwsers ! :slight_smile:

Possible “flow” directions
TB top bottom
BT bottom top
RL right left
LR left right
TD top down (same as TB)

Hi,

I try 2 mermaid codes (Joplin 1.3.18 debian10): Pie and Gantt from example above or from https://mermaid-js.github.io/mermaid/#/

pie
    title Key elements in Product X
    "Calcium" : 40
    "Potassium" : 50
    "Magnesium" : 10

I get :
image

and for Gantt chart :

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

I get :

image

just a red line.

As I copy theses example and following one is working, I asked me what is wrong ? Do you haveany idea ?

graph LR;
    A[Square Rect] -- Link text --> B((Circle));
    A --> C(Round Rect);
    B --> D{Rhombus};
    C --- D;

EDIT : when I use image to change the editor, I have the good result, but when I use theses buttons image it does not work. Seems strange ?

Thank you for your help