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:
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
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.
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 :
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 :
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 to change the editor, I have the good result, but when I use theses buttons it does not work. Seems strange ?
Thank you for your help