Search code examples
cssmermaid

How to wrap text automatically in a Mermaid flowchart node?

Is there a way to set a max width for text within a Mermaid flowchart node, such that it automatically wraps?

For example - how would I get the first graph to look like the second graph, without painstakingly inserting manual line breaks:

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

Screenshot of results

I have a suspicion the solution will be a single line of CSS but I don't know what it is.

Solution

  • There is support for wrapping of text in Mermaid now: https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here

    In short, a new string format was introduced in version 10.1.0 of Mermaid allowing markdown formatting and wrapping of lines. The format currently works in flowcharts and mind maps. To create such a string start with "` and close the string with `". If you do a new line in this kind of string, the text will be rendered as such in the diagram.

    Sample diagram using this kind of strings:

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