logo标签列表

如何在Mermaid流程图节点中对齐文本？

flowchartmermaid
10
我希望将Mermaid流程图节点中的文本对齐，这样Thinkpad和iPad将会对齐。我尝试在它们之前插入\t，但它们只是被渲染成文本。
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]

在这里输入图片描述

链接到实时编辑器

2个回答
8

我在这一行加入了一个Unicode空格以对齐：

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

3

简单的方法：使用空格来填充。

或者如果你只是想知道如何打印 tab，可以尝试使用 	

注意！graph 不起作用；请使用 flowchart 代替它。

例子

<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>

参考资料

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接