Mermaid syntax wanted

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. is helpful but hardly comprehensive. Something in BNF would be nice ...


Joplin 2.6.10 (prod, linux)

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

Revision: 98fba37

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


1 Like

Thanks for the tip; I'll try that.


Apparently that Workspace isn't very talkative :zipper_mouth_face: ...
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?


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.

1 Like

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.


Can you please elaborate why the documentation is lacking?

Every diagram type has several subsections:

e.g. mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

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

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 :white_check_mark:.

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.


1 Like

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.

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.)

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:



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

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.

Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class08 <--> C2: Cool label
Object .. FontBase
FontBase --> Font
Object --> EventDispatcher
EventDispatcher --> Sprite
Sprite --> Shape
Shape --> TextField
FontBase : layoutText()
TextField : setLayout()

— from Mermaid in Joplin? - #37 by bva

— still doesn’t work - Markdown Guide | Joplin

graph LR

but why not just install the Plantuml plugin?

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

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