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

Dualistic

Answer 1

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]

Foretoken

Answer 2

simple way: use space to fill it.

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

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
  • 	 	, &#9829 ♥ ...
• Entity codes to escape characters

Meader