How to align text in Mermaid flowchart node?

Question

I would like to align text in a Mermaid flowchart node so the Thinkpad and iPad will line up. I tried to insert a \t before them but they just got rendered as text.

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D["Laptop: Thinkpad\nTablet: iPad"]
    style D text-align:left
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

Link to live editor

score 8 · Answer 1 · answered Feb 05 '22 at 20:01

8

I added a unicode space to line it up:

flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D["Laptop: Thinkpad\nTablet: iPad"]
style D text-align:left
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]

Image of Flowchart

answered Feb 05 '22 at 20:01

taylor.2317

582
1
9
23

score 3 · Answer 2 · answered Feb 18 '22 at 10:57

simple way: use space to fill it.

or if you just want to know how to print tab try use &Tab;

Be careful! The graph does not work; please use the flowchart instead of it.

Example

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>

<h2>Graph</h2>
<i>Do not use <code>graph</code> `\n` not work.</i>
<div class="mermaid">
graph TD
    A --> B["Laptop: Thinkpad\nTablet: iPad"]
</div>

<h2>flowchart</h2>
<div class="mermaid">
flowchart TD
    A --> B["Laptop: Thinkpad\nTablet&Tab;: iPad"] %% use TAB same as `&#9;`
    C --> D["Laptop: Thinkpad\nTablet : iPad"]     %% use space
    style B text-align:left
    style D text-align:left
</div>

Reference

charref
- &Tab; 	, &#9829 ♥ ...
Entity codes to escape characters

How to align text in Mermaid flowchart node?

2 Answers2

Example

Reference