# Mermaid syntax wanted

**URL:** <https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538>\
**Category:** Support\
**Created:** [21 December 2021 14:07 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538 "2021-12-21T14:07:06Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kai](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kai/32/16967_2.png) [@Kai](https://discourse.joplinapp.org/u/Kai)\
**Post date:** [21 December 2021 14:07 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/1 "2021-12-21T14:07:06Z")

</div>

Can someone point me to a comprehensive syntax of mermaid? Currently I am juggling around with it to see what happens when I write something, and the syntax on [mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.](https://mermaid-js.github.io/mermaid/#/) is helpful but hardly comprehensive. Something in BNF would be nice ...

Cheers,  
kai.

Joplin 2.6.10 (prod, linux)

Client-ID: 3708fbfebb3646c787c57619e7200257  
Sync-Version: 3  
Profil-Version: 41  
Unterstützter Schlüsselbund: Nein

Revision: 98fba37

---

<div class="post-metadata">

**Author:** ![graphit0](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/graphit0/32/3435_2.png) [@graphit0](https://discourse.joplinapp.org/u/graphit0)\
**Post date:** [22 December 2021 13:16 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/2 "2021-12-22T13:16:15Z")

</div>

Hi there, even though Joplin supports it, our forum does not specialise in it. So, I feel like it would be more appropriate to ask for such guide at their [support Slack chat](https://mermaid-talk.slack.com/join/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE#/shared-invite/email)

Cheers!

---

<div class="post-metadata">

**Author:** ![Kai](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kai/32/16967_2.png) [@Kai](https://discourse.joplinapp.org/u/Kai)\
**Post date:** [22 December 2021 17:59 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/3 "2021-12-22T17:59:16Z")

</div>

Thanks for the tip; I'll try that.

Cheers,  
kai.

---

<div class="post-metadata">

**Author:** ![Kai](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kai/32/16967_2.png) [@Kai](https://discourse.joplinapp.org/u/Kai)\
**Post date:** [23 December 2021 11:03 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/4 "2021-12-23T11:03:44Z")

</div>

Apparently that Workspace isn't very talkative 🤐 ...  
And on second thought, shouldn't whoever built the rendering engine have the precise syntax? Does anyone know who is responsible here & if it's possible to contact this person?

Regards,  
kai.

---

<div class="post-metadata">

**Author:** ![laurent](https://avatars.discourse-cdn.com/v4/letter/l/ce7236/32.png) [@laurent](https://discourse.joplinapp.org/u/laurent)\
**Post date:** [23 December 2021 11:09 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/5 "2021-12-23T11:09:08Z")

</div>

Mermaid is a nice library but unfortunately it's poorly documented and poorly implemented too, so you pretty much need to try and see what works and search on their forum or GitHub.

---

<div class="post-metadata">

**Author:** ![Kai](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kai/32/16967_2.png) [@Kai](https://discourse.joplinapp.org/u/Kai)\
**Post date:** [23 December 2021 11:16 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/6 "2021-12-23T11:16:03Z")

</div>

OK, thanks for that; pity, though; it's pretty neat and I am glad Joplin supports it.

I've already tried constructing a number of expressions and think I'm getting the hang of it, so I'll manage.

Regards,  
kai.

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [23 December 2021 19:29 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/7 "2021-12-23T19:29:10Z")

</div>

Can you please elaborate why the documentation is lacking?

Every diagram type has several subsections:

 ![image](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/f/f08998d99909898576a97b9ab406f23fb50f6a04.png)

e.g. [mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.](https://mermaid-js.github.io/mermaid/#/flowchart)

Another question: why don't you open an issue with the Mermaid repo?

---

<div class="post-metadata">

**Author:** ![Kai](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kai/32/16967_2.png) [@Kai](https://discourse.joplinapp.org/u/Kai)\
**Post date:** [23 December 2021 20:33 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/8 "2021-12-23T20:33:06Z")

</div>

Sure. I am familiar with the page you're referring to and it's nice, but doesn't really give me a proper picture of syntax or semantics.  
I'm mainly interested in gantt, so let's look at those diagrams.

- You can set a date format for the tasks as well as a separate date format for the axis, so this is nice ✅.

Things get a bit foggy when you start to specify your tasks in the section(s).

- Apparently (there are going to be a lot of "apparently's" here) a task name is separated from it's parameters by a colon. It doesn't really say that anywhere, but I gather that from the example. There is no terminator in a task description if I look at the examples; is this correct? So is a line break the terminating item here?

- Apparently I can qualify a task as {done | active | critical | milestone} which have different semantics. "done" and "critical" lead to different colours, whereas using "active" or not using it has no (discernible?) impact. I can also combine "critical" and "done", but it is not clear to me what happens if I do this. And are there other combinations permitted? Are there more qualifications here not listed in any example; perhaps parameters signifying priorities.

- Apparently I can give a task a reference which is accessible in other tasks. Are these names global or restricted to a section?

- After these parameters comes the starting date of the task (a milestone of course only has one date). I can specify a starting date or I can specify a dependency to another referenced task ("after task 1"). Can tasks also start "before" another task? Must tasks start directly after a previous task or can I write something like "3d after task1"?

- Similarly, the target date can be given as a fixed date, or as a timespan relative to the starting date. Since the date format is described in detail, this is straightforward.

- Apparently the dates are entirely optional and I can just give a timespan for a task, and mermaid will assume this task directly follows the previous task. Is this the case? Can I use a reference here again; can I set a task to begin x days after another task?

These are some of the questions I'm pondering just now. I'll probably get to a working knowhow after experimenting around a bit; i just thought that there might be something more precise than a set of examples.

Regarding your question about why I do not raise an issue in their repo: I'm not contributing anything to the development, so I'm happy to work with what's on offer. If a complete description does not exist, ok; I'll manage with the existing stuff. I just thought that since I'm pretty new to this, perhaps I've just overlooked something that everybody else was aware of. If I was mistaken here, my apologies.

Regards,  
kai.

---

<div class="post-metadata">

**Author:** ![shbach](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/shbach/32/4312_2.png) [@shbach](https://discourse.joplinapp.org/u/shbach)\
**Post date:** [23 December 2021 20:39 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/9 "2021-12-23T20:39:48Z")

</div>

I was also trying to make a Gantt chart and I had a lot of the same questions. The documentation isn't particularly good so it took me a while to figure out how to do what I wanted.

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [23 December 2021 20:51 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/10 "2021-12-23T20:51:34Z")

</div>

These are perfect questions for the Mermaid team. They wrote the code after all. So I am pretty sure they would know best.

I am not trying not to answer them, but I haven't used gantt myself thus I just don't know. (I only use a gantt example to test a Mermaid upgrade.)

---

<div class="post-metadata">

**Author:** ![dpowyslybbe](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@dpowyslybbe](https://discourse.joplinapp.org/u/dpowyslybbe)\
**Post date:** [27 December 2021 20:15 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/11 "2021-12-27T20:15:26Z")

</div>

I also struggled when trying to learn some of the finer details of mermaid.

I didn't find a single place that answered everything, so I produced the following for flowcharts which was based on a particular use case of mine, but I do also touch on Gantt charts there too.

See below link to medium if you're interested:

> **[Produce great looking flowcharts in seconds](https://dompl.medium.com/produce-great-looking-flowcharts-in-seconds-7f3bea64f2e2?sk=7a482a3df4f1f231cecd22fdedf5e646)**
>
> Mermaid turns a few lines of text into great looking visuals

Dom

---

<div class="post-metadata">

**Author:** ![Kai](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/kai/32/16967_2.png) [@Kai](https://discourse.joplinapp.org/u/Kai)\
**Post date:** [27 December 2021 21:13 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/12 "2021-12-27T21:13:10Z")

</div>

Yes, I am interested; will look into it tomorrow. Thanks in advance,  
kai.

---

<div class="post-metadata">

**Author:** ![scrumit](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/scrumit/32/3881_2.png) [@scrumit](https://discourse.joplinapp.org/u/scrumit)\
**Post date:** [3 January 2022 19:51 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/13 "2022-01-03T19:51:08Z")

</div>

I'm a programmer. Or was.

I've used mermaid. Here's a test note

Test mermaid

Want to use mermaid to do sequence and class diagrams.

```auto
classDiagram
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class08 <--> C2: Cool label

```

```auto
classDiagram
Object .. FontBase
FontBase --> Font
Object --> EventDispatcher
EventDispatcher --> Sprite
Sprite --> Shape
Shape --> TextField
FontBase : layoutText()
TextField : setLayout()

```

— from [Mermaid in Joplin? - #37 by bva](https://discourse.joplinapp.org/t/mermaid-in-joplin/1705/37)

— still doesn’t work - [Markdown Guide | Joplin](https://joplinapp.org/markdown/)

```auto
graph LR
    A-->B
    A-->C
    B-->D
    C-->D

```

but why not just install the Plantuml plugin?

I'm sure the community will sort it out, eventually.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [2 February 2022 19:51 UTC](https://discourse.joplinapp.org/t/mermaid-syntax-wanted/22538/14 "2022-02-02T19:51:15Z")

</div>

Closed on 2 February 2022 19:51 UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.