Can't find a way to add spacing between the top node of the subgraph and the subgraph name

[dpal]

Description

Consider the following graph:

    flowchart TD

        box1["No space above this box and the title"]

        subgraph Example of a subgraph that has no space between name and top node
             box1-->box2
    end

I could not find any way to add a space in such a graph.

Styling with "margin" does not work.
The vertical "margin" style setting is ignored.
The horizontal margin setting sort of works but works incorrectly (probably a separate bug). The margin adds space between the text inside a node and its border rather than to be a margin around the node itself.

  flowchart TD
        classDef withmargines margin:100px 5px 100px 5px;

        box1["No space above this box and the title"]:::withmargines
        

        subgraph foo [Example of a subgraph that has no space between name and top node]
             box1-->box2

        class foo withmargines;

    end

See the second screenshot.

Steps to reproduce

Create a graph as described in the mermaid online editor.

Note: Same result in HackMD.

Screenshots

Code Sample

No response

Setup

Desktop

• OS and Version: RHEL Workstation 8.6
• Browser and Version: Chrome

Additional Context

No response

[olivierduquenoy]

Try this :

flowchart TD

    classDef withmargines fill-opacity:0.0,color:#FFFFFF,stroke-width:0px;
    subgraph foo [<font size = 6>Example of a subgraph that HAS space between name and top node]

        foo1["<p style='width:100px;height:0px;margin:0'>Invisible !!!/p>"]:::withmargines
        box1["Some space above this box and the title"]
        
        foo1 ~~~ box1-->box2
    end

You can change the space with the height property of foo1

[dpal]

Try this :
...

This is a nice hack, thank you! It adds a hidden box at the top - OK. But it works around the problem (which is fine for me) but really does not fix the actual limitation of lack of support of margins and spacing. I think the issue is still valid as described.

[Ryder17z]

Related: mermaid-js/mermaid-live-editor#1410
I thought it was just an issue in the live editor...

[Ryder17z]

@olivierduquenoy Try this:

flowchart TD

    classDef withmargines fill-opacity:0.0,color:#FFFFFF,stroke-width:0px;
    subgraph foo [<font size = 6>Example of a subgraph that HAS space between\n name and top node but not when it has a linebreak]

        foo1["<p style='width:100px;height:0px;margin:0'>Invisible !!!/p>"]:::withmargines; 
        box1["Some space above this box and the title"];
        
        foo1 ~~~ box1-->box2["text here fa:fa-car fa:fa-dog fa:fa-toolbox"];
    end