Differences in label: syntax?

[stdedos]

For this diagram

```mermaid
flowchart LR
    List@{ shape: braces, label: "📋 List

    ☐ Step A
    ☑ Step B
    ☑ Step C
    ☐ Step D
    ☐ Step E
    ☐ Step F
    ☐ Step G" }
```

I want to add exactly one empty line between 📋 List and the steps.

All my attempts, however, give different results:

1. ```mermaid
   flowchart LR
       List@{ shape: braces, label: "📋 List
   
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   ```

   flowchart LR
       List@{ shape: braces, label: "📋 List
   
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   

   Loading

2. ```mermaid
   flowchart LR
       List@{ shape: braces, label: "📋 List<br>
   
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   ```

   flowchart LR
       List@{ shape: braces, label: "📋 List<br>
   
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   

   Loading

3. ```mermaid
   flowchart LR
       List@{ shape: braces, label: "📋 List<br><br>
   
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   ```

   flowchart LR
       List@{ shape: braces, label: "📋 List<br><br>
   
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   

   Loading

4. ```mermaid
   flowchart LR
       List@{ shape: braces, label: "📋 List
       <br>
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   ```

   flowchart LR
       List@{ shape: braces, label: "📋 List
       <br>
       ☐ Step A
       ☑ Step B
       ☑ Step C
       ☐ Step D
       ☐ Step E
       ☐ Step F
       ☐ Step G" }
   

   Loading

... except 3 and 4 (which both render 3 <br/>s)

I have looked at the help:

• There is no mentioning of label: parameter in shape:, and
• In https://mermaid.ai/open-source/syntax/flowchart.html#parameters of Icon Shape, it merely says label: The text label associated with the icon. This can be any string. If not defined, no label will be displayed. - without specifying what syntax the label: has.

According to Commonmark rules, a newline with an empty line is enough to generate a paragraph.

I am very new to Mermaid - so it might be mentioned somewhere else.

Thank you for your time and effort

[manimovassagh]

The label: parameter in the @{} syntax uses HTML-like rendering, not CommonMark. Here is how line breaks work in practice:

• Literal newlines in the label string each produce a single <br/> in the rendered SVG
• <br> tags add an additional break on top of the newline character
• An empty line (two consecutive newlines) gives you two <br/>s

So in your attempts:

1. Title + empty line = 2 breaks (one per newline), but the second newline starts the next content line
2. <br> after title + empty line = 3 breaks (the explicit <br> + 2 from double newline)
3. <br><br> + empty line = 4 breaks
4. <br> on its own line = same as Improve arrows #3

To get exactly one visible blank line between the title and the steps, you want exactly 2 <br/>s total (one to end the title, one for the gap). The cleanest way:

label: "List<br>
Step A
Step B"

That gives you: the <br> ends the title, then the literal newline adds the blank line gap, then each subsequent newline is a single break between steps.

If that still produces too many or too few breaks, try without the empty line:

label: "List<br><br>Step A
Step B"

This explicitly controls the spacing without relying on newline handling, which can vary slightly between renderers.

You are right that this is under-documented. The label content is ultimately rendered as SVG <text> with <tspan> elements, which is why HTML-ish rules apply rather than Markdown paragraph semantics.

[stdedos]

Thank you for the detailed explanation 😊

```mermaid
flowchart LR
    List@{ shape: braces, label: "📋 List<br>
    
    ☐ Step A
    ☑ Step B
    ☑ Step C
    ☐ Step D
    ☐ Step E
    ☐ Step F
    ☐ Step G" }
```

flowchart LR
    List@{ shape: braces, label: "📋 List<br>
    
    ☐ Step A
    ☑ Step B
    ☑ Step C
    ☐ Step D
    ☐ Step E
    ☐ Step F
    ☐ Step G" }

Loading

and so it seems! (at least in the GH Implementation - now I need to check how mkdocs / zensical parse this 😅)