Automatic text wrapping in flowcharts is here!

3 April 2023 • 3 mins

Markdown Strings reduce the hassle

Starting from v10.1.0 of Mermaid, diagram authors can easily incorporate text formatting options such as bold and italics, along with automatic text wrapping within labels. Mermaid employs the familiar markdown syntax for formatting, making it both user-friendly and efficient. In this article, we will demonstrate practical examples of how to effectively utilize these features.

Text formatting

As an author, being able to highlight parts of the text is important to guide the reader’s attention, something we are all familiar with from using word processors and markdown. We are excited to introduce this functionality in labels for flowcharts and mind maps. The formatting syntax is borrowed with love ❤️ from markdown:

– For bold text, use double asterisks \*\* before and after the text.

– For italics, use single asterisks \* before and after the text.

Markdown strings also handle Unicode characters and Emojis. The following example demonstrates this along with some formatted text:

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

Automatic text wrapping

A common issue when creating flowcharts is dealing with labels that are too long, which often requires authors to manually add `<br>` tags in the label to make the text wrap at the right places.

The first example is a long text without any wrapping:

flowchart LR
    A[A text that needs to be wrapped wraps to another line]

This can make the flowchart very wide and difficult to read. Up until now, the only option has been to add `<br>` tags, as shown in the following example:

flowchart LR
    B[A text that needs to be<br/>wrapped wraps to another line]

Although this renders is acceptable, the effort involved in wrapping the text is unnecessarily high. Compare this with the following example using markdown strings:

flowchart LR
    C["`A text that needs to be wrapped to another line`"]</pre>

You can also wrap the strings manually using **markdown strings** but in a more efficient way. The following example highlights the simplicity:

flowchart LR
    C["`A text
      that needs
      to be wrapped
      in another
      way`"]

All in all, we are very excited about this new feature as it is sure to make our lives as diagram authors easier. With Markdown strings, formatting and wrapping text in Mermaid flowcharts and mindmaps is now more intuitive and less time-consuming. And last but not least, Markdown Strings support Unicode characters and Emojis, which increases the expressiveness and customization options available to authors. Now you can create diagrams that are both fun, engaging, and informative.

---