如何在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，但我不知道是什么。

- Jack Deeth

---

这是一个关于流程图能否在文本过长时换行的问题。具体内容可以参考链接：Flowchart ability to Wrap text when text in flowchart is too long · Issue #1321 · mermaid-js/mermaid。 - Ooker

Answer 1

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

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

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

mindmap
    id1("`**Root**`"]
      id2["`A formatted text... with **bold** and *italics*`"]
      id3[Regular labels works as usual]
      id4["`Emojis and Unicode works too: 
      शान्तिः سلام  和平 `"]

- Knut Sveidqvist

---

虽然此链接可能回答了问题，但最好在这里包括答案的必要部分并提供链接以供参考。仅链接的答案如果链接页面发生变化可能会变得无效。- 来自审核 - InSync

简而言之：关键因素是用引号""将您的文本括起来，以便根据您的新行进行换行。 - undefined