如何在 Mermaid 流程图节点中自动换行？

Question

有没有办法设置 Mermaid 流程图节点中文本的最大宽度，以便它自动换行？

例如 - 如何让第一张图看起来像第二张图，而不需要费力地插入手动换行符：

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

<div class="mermaid">
flowchart TD
    A{Is it Friday midday UTC?} -- Yes --> B(Check out Daft Punk's new single 'Get Lucky' if you have the chance. Sound of the summer.)
    A -- No --> C(Never mind then)
</div>

<h2>Desired output</h2>
<div class="mermaid">
flowchart TD
    A{Is it Friday</br>midday UTC?} -- Yes --> B(Check out Daft Punk's new single</br>'Get Lucky' if you have the chance.</br>Sound of the summer.)
    A -- No --> C(Never mind then)
</div>

我怀疑解决方案将是一行 CSS，但我不知道它是什么。

Answer 1

Mermaid 现在支持文本换行：\n https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here

\n

简而言之，10.1.0版本中引入了新的字符串格式版本中引入了一种新的字符串格式，允许进行 Markdown 格式化和换行。该格式目前适用于流程图和思维导图。要创建这样的字符串，请以“` 开头并以 `” 结束字符串。如果您在这种字符串中换行，文本将在图中呈现为这样。

\n

使用此类字符串的示例图：

\n

mindmap\n    id1("`**Root**`"]\n      id2["`A formatted text... with **bold** and *italics*`"]\n      id3[Regular labels works as usual]\n      id4["`Emojis and Unicode works too: \n      \xe0\xa4\xb6\xe0\xa4\xbe\xe0\xa4\xa8\xe0\xa5\x8d\xe0\xa4\xa4\xe0\xa4\xbf\xe0\xa4\x83 \xd8\xb3\xd9\x84\xd8\xa7\xd9\x85  \xe5\x92\x8c\xe5\xb9\xb3 `"]\n

\n