Search code examples
markdowndiagrammermaid

Add bullet points in mermaid diagram

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?

Solution

  • 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