Hi. Just testing the newest build of Joplin who seems to have Mermaid support but I can’t figure out how to create a Mermaid Gantt of Flow Chart.
Please provide an example.
you can try the following txt:
```mermaid
graph LR;
A–>B;
A–>C;
B–>D;
C–>D;
```
Thanks developers’ effort!
1 Like
I tried your solution but I have nothing but a blank screen in preview mode.
I suspect the – was being converted erroneously to an en dash. Try this:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
4 Likes
Thank you. Now it is working. But because I do use the dark theme I can’t see the arrows. Maybe a little correction into the next version?
Thanks for the correction!
In addition, there are other mermaid chart types (from https://mermaidjs.github.io/)
Sequence Diagrams:
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```
Gantt Charts:
```mermaid
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
```
3 Likes
Can you please open a github issue for that?
Yes, I just opened an issue on Github, #1281
I'm sorry. I didn't see that @laurent already fixed this in All: Resolves #163: Added Mermaid support to desktop and mobile · laurent22/joplin@a0e5947 · GitHub when I asked you to open the gh issue.
This change will force the background of mermaid to be white.
I’ve noticed a slight issue with sequence diagrams (the feature, I’d use most with mermaid): they are way too small.
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->John: Hello John, how are you?
loop Healthcheck
John->John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->Alice: Great!
John->Bob: How about you?
Bob-->John: Jolly good!
```
looks like this:
As you can see (or better not see), it’s hardly even readable. Something similar happens with gantt charts. They are also very small and the title is cut off on the left and right. The time axis is also a mess:
I also tried to change the layout to only show the preview, but no luck. Still the same small size.
Dear Developers,
I follow the above instruction, but I get nothing for chart. it will show letters I put. could you advise how can i use chart ?
@nicqchen Mermaid has been removed shortly after it was added.
I wanted to add it back, but the rendering code changed, so it got more complicated.
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. 
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).