Spaces in Mermaid

Question

I have a .md file saved and I am viewing it using Atom and the Mermaid Preview package. I am going off the example on their GitHub page:

graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;

That renders fine, but how do I add spaces the text? For example:

graph TD;
  A F-->B;
  A-->C;
  B-->D;
  C-->D;

The previewer goes blank when I put spaces in. I tried adding quotations, but that did not help.

phifi · Answer 1 · 2021-09-15T07:19:38.967

20

Try this (haven't tried it in Atom but it worked fine in VisualStudio Code with Mermaid Plugin):

graph TD;
  id1[A F]-->B;
  A-->C;
  B-->D;
  C-->D;

Instead of id1 you can use whatever id you want.

Depending on the type of braces you use, you can change the look of the rendered Node.

Box with round edges - id1(A F)
Circle - id1((A F))
Asymetric Shape - id1>A F]
Rhombus - id1{A F}

This can be found on the mermaid documentation site

edited Sep 15 '21 at 07:19

answered Jun 19 '19 at 07:27

phifi

2,783
1
21
39

Sadly as of now, it only works on Azure DevOps Services, not OnPremise – phifi Jan 16 '20 at 07:26
Unfortunately it is a dead link. – KansaiRobot Sep 02 '21 at 06:04
@KansaiRobot Links is updated now - i guess u could have done this by yourself too ;) – phifi Sep 15 '21 at 07:20

score 0 · Answer 2 · answered Aug 21 '23 at 12:04

In Typora 1.6.7 you can use HTML code in Mermaid node titles, e.g., type Yellow&bnsp;Submarine for a well-placed space. However, the HTML code becomes part of the node id. I found it impossible to give a node a shorthand id (as demonstrated by phifi) in addition to the title. In Typora Mermaid, the title is the id.

Spaces in Mermaid

2 Answers2

Linked