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.

Converted

Answer 1

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

Salvia

Sadly as of now, it only works on Azure DevOps Services, not OnPremise – Salvia

Unfortunately it is a dead link. – Adamik

@Adamik Links is updated now - i guess u could have done this by yourself too ;) – Salvia

Answer 2

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.

Sherasherar