2

I would like to add bullet points like these:

  • This is a bullet point

in a node of a mermaid diagram. We could use a - as list, but I would like to have the bullet. Here is some reproducible code:

flowchart LR
    A[Node 1] --> B[Node 2: \n-A\n-B]

Output:

enter image description here

Does anyone know how to change the - to a bullet?

Quinten
  • 35,235
  • 5
  • 20
  • 53

1 Answers1

1

Markdown lists are not natively supported in Mermaid. When you try it, for example

mylist newLines["`- Line1
    - Line 2
    - Line 3`"]

you get a message Unsupported markdown: list.

However, you can add the character manually, as in your current code with a literal -. There are some options, although neither is very quick to type. In the code below two font-awesome icons and various representations of the bullet character, i.e., html code #8226, html character name bull, Unicode •.

flowchart LR
    A[Node 1] --> B["Node 2: \nfa:fa-genderless font-awesome\nfa:fa-caret-right fa arrow\n#8226; html code\n#bull; html named\n• Unicode"]

enter image description here

For lists it may be better-looking to left-align the text:

flowchart LR
    A[Node 1] --> B["Node 2:\nfa:fa-genderless font-awesome\nfa:fa-caret-right fa arrow\n#8226; html code\n#bull; html named\n• Unicode"]
    style B text-align:left

enter image description here

Marijn
  • 1,640
  • 14
  • 24