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

解决方案 #

Mermaid 流程图节点内不会解析\t为制表符，仅会将其渲染为普通文本，可通过 HTML 非换行空格实体   补全短行的前置空格实现对齐。

修改后的完整代码如下：

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

你可以根据实际渲染的对齐效果，灵活调整 的添加数量，直到两行的设备名称完全对齐即可。该方案兼容性最高，所有支持Mermaid的渲染环境都可正常生效。

内容的提问来源于stack exchange，提问作者Ray Cheng