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.

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