21

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.

2 Answers 2

28

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

3
  • Sadly as of now, it only works on Azure DevOps Services, not OnPremise
    – phifi
    Commented Jan 16, 2020 at 7:26
  • Unfortunately it is a dead link. Commented Sep 2, 2021 at 6:04
  • @KansaiRobot Links is updated now - i guess u could have done this by yourself too ;)
    – phifi
    Commented Sep 15, 2021 at 7:20
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.