Subgraph label spacing is missing left/right and bottom spacing

[aeneasr]

Describe the bug

When creating a flowchart with multiple nested subgraphs, spacing is missing below the label (see screenshot section). Additionally, when the subgraph is narrow, there is spacing missing on the left and right of the label.

To Reproduce Check out this live editor link.

Expected behavior For better readability, there should be some spacing below / left and right of the label. I was not able to figure out how to configure that.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome, Firefox
• Version: mermaid-js.github.io/mermaid-live-editor accessed on 2020/1/16

Smartphone (please complete the following information):

• Not applicable

Additional context No context, just a thank you because I'm using mermaid everywhere!

[shebanian]

Also when you put a <br/> in the description of the subgraph it does not fit, and the spacing is not changing. Style css options with padding and margin also do not work.

@aeneasr As a work arround i alwasys use an empty subgraph in the subgraph to create more spacing. See subgraph 1 etc.. https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcblxuc3ViZ3JhcGggcGlbUHVibGljIEludGVybmV0XVxuICAgIEJbQnJvd3Nlcl1cbmVuZFxuXG5zdWJncmFwaCB2cGNbVlBDIC8gQ2xvdWQgLyBEb2NrZXIgTmV0d29ya11cbnN1YmdyYXBoIDFcbnN1YmdyYXBoIFwiRGVtaWxpdGFyaXplZCBab25lIC8gRE1aXCJcbiAgICBPS1tPUlkgT2F0aGtlZXBlciA6NDQ1NV1cbiAgICBCIC0tPiBPS1xuZW5kXG5cbiAgICBPSyAtLT4gU0FEXG4gICAgT0sgLS0-IFNBTFVcbiAgICBPSyAtLT4gU0FMSVxuICAgIE9LIC0tPiBTQVJcbiAgICBPSyAtLT4gU0FBXG4gICAgT0sgLS0-IEtQXG5cbiAgICBzdWJncmFwaCBcIlByaXZhdGUgU3VibmV0IC8gSW50cmFuZXRcIlxuICAgIHN1YmdyYXBoIDNcbiAgICBLWyBPUlkgS3JhdG9zIF1cblxuICAgIEtQKFsgT1JZIEtyYXRvcyBQdWJsaWMgQVBJIF0pXG4gICAgS0EoWyBPUlkgS3JhdG9zIEFkbWluIEFQSSBdKVxuICAgIFNBIC0tPiBLQVxuICAgIEtBIC0uYmVsb25ncyB0by4tPiBLXG4gICAgS1AgLS5iZWxvbmdzIHRvLi0-IEtcblxuICAgIHN1YmdyYXBoIHNhW1wiU2VjdXJlQXBwIC8ga3JhdG9zLXNlcmxmc2VydmljZS11aS1ub2RlIEV4YW1wbGVcIl1cbiAgICBzdWJncmFwaCAyXG5cbiAgICAgICAgU0FbU2VjdXJlQXBwXVxuICAgICAgICBTQUQgLS5iZWxvbmdzIHRvLi0-IFNBXG4gICAgICAgIFNBTFUgLS5iZWxvbmdzIHRvLi0-IFNBXG4gICAgICAgIFNBTEkgLS5iZWxvbmdzIHRvLi0-IFNBXG4gICAgICAgIFNBUiAtLmJlbG9uZ3MgdG8uLT4gU0FcbiAgICAgICAgU0FBIC0uYmVsb25ncyB0by4tPiBTQVxuXG4gICAgICAgIHN1YmdyYXBoIFwiSGFzIGFjdGl2ZSBsb2dpbiBzZXNzaW9uXCJcbiAgICAgICAgICAgIFNBRChbUm91dGUgL2Rhc2hib2FyZF0pXG4gICAgICAgICAgICBTQUxVKFtSb3V0ZSAvYXV0aC9sb2dvdXRdKVxuICAgICAgICBlbmRcblxuICAgICAgICBzdWJncmFwaCBcIk5vIGFjdGl2ZSBsb2dpbiBzZXNzaW9uXCJcbiAgICAgICAgICAgIFNBTEkoW1JvdXRlIC9hdXRoL2xvZ2luXSkgXG4gICAgICAgICAgICBTQVIoW1JvdXRlIC9hdXRoL3JlZ2lzdHJhdGlvbl0pIFxuICAgICAgICAgICAgU0FBKFtSb3V0ZSAvYXV0aC8uLi5dKVxuICAgICAgICBlbmRcbiAgICBlbmRcbiAgICBlbmRcbiAgICBlbmRcbiAgICBlbmRcbiAgICBlbmRcblxuZW5kXG5cbnN0eWxlIHZwYyBjb2xvcjojZmYzMzAwLHBhZGRpbmc6MjBweCxtYXJnaW46MjBweCxzdHJva2U6IzMzMyxzdHJva2Utd2lkdGg6NHB4bGluZS1oZWlnaHQ6MjBweCIsIm1lcm1haWQiOnsidGhlbWUiOiJuZXV0cmFsIiwiZmxvd2NoYXJ0Ijp7InJhbmtTcGFjaW5nIjozMCwibm9kZVNwYWNpbmciOjMwLCJjdXJ2ZSI6ImJhc2lzIn19LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ

[CarlaFernandez]

Any updates on this? It would be great if the padding auto-adjusted, or at least if we could have some manual padding option.

[zimonitrome]

Bumping this again. Having the same issue.

[gaoxiaoliangz]

Any updates on this?

[edwarnicke]

I'm having this as well.

[MikePreston]

This really needs to be resolved please! - takes ages to rearrange/reconfigure the nested boxes in order for the subplot headers to not be obscured

[ledadu]

Same problem. To solve this you can add new features :

• <br> adding a padding
• adding a TAG (like titlePlacement) to set subgraph tilte placing (Left-rigth, left-center.....)

[alexfornuto]

b-b-b-bump! subgraphs overlapping parent titles is a bug worth prioritizing, IMHO.

EDIT: The best solution I can come up with is to use &nbsp to move the title, which only works in certain situations.

flowchart LR
subgraph Internet
style Internet stroke-dasharray: 5 5
D[Client]
end
subgraph lan [Internal Network &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp]
  style lan stroke-dasharray: 5 5
  A[Pomerium]
  D--oA
  A<==>B
  subgraph docker [Docker Network]
  style docker margin-top: 10
    B[Sidecar]
    C[Service]
  end
end

Ugly code, but the render ain't bad.

[Repkap11]

It's possible to add subgraphs with custom CSS set to "fill:none,stroke:none". This essentially adds padding.

For example, to fix @alexfornuto's previous chart without using &nbsp.

flowchart LR
classDef subgraph_padding fill:none,stroke:none
subgraph Internet
style Internet stroke-dasharray: 5 5
D[Client]
end
subgraph lan [Internal Network]
subgraph subgraph_padding1 [ ]
  style lan stroke-dasharray: 5 5
  A[Pomerium]
  D--oA
  A<==>B
  subgraph docker [Docker Network]
  style docker margin-top: 10
    B[Sidecar]
    C[Service]
  end
end
end
class subgraph_padding1 subgraph_padding

Similarlly, to fix @aeneasr's origional flowchart, see this live editor link.

[edwarnicke]

@Repkap11 This is awesome! I don't quite understand though why fill: none, stroke:none is fixing the padding... could you provide some insight?

[Repkap11]

The trick is that it's adding a 2nd subgraph which takes up extra space, not actually fixing the problem. The 2nd subgraph is transparent so doesn't cover the title like normally happens.

If you change the CSS class to something like classDef subgraph_padding fill:red,stroke:solid it should be more clear whats going on.

Also, the text of the extra subgraph is set to a space with on this line subgraph subgraph_padding1 [ ]. [ ] means a space.

[asafm]

This is very similar to https://github.com/mermaid-js/mermaid/issues/2345

[tschuehly]

I really like mermaid, but this issue is really annoying

[4r7if3x]

My workaround works similar to Repkap11's answer, by adding an extra nested subgraph with a blank value and having stroke-dasharray: 0 1 as its style; Nothing else was needed in my case. For example:

flowchart TD
    subgraph Label
        subgraph subgraph_padding_1 [ ]
            style subgraph_padding_1 stroke-dasharray: 0 1

            A --> C
            B --> C
        end
    end
C --> D

[LuisBL]

One more vote for this one, we really need it

[carl-3]

style subgraph_padding_1 stroke-dasharray: 0 1

I couldn't get the CSS to work for me. :(

[4r7if3x]

style subgraph_padding_1 stroke-dasharray: 0 1

I couldn't get the CSS to work for me. :(

There is a space in between [ & ], haven't you missed it?

[carl-3]

nope, I got that part. but had to adjust the stroke-dasharray part to get it to work (which I did eventually)

[NPKBender]

bumping this issue, a non-hacky fix would be nice :)

Thank you

[fw-aaron]

I'm new to Mermaid; just to be clear, there's no way to align the text of a subgraph?

flowchart LR
    subgraph FW ["The Label"]
    R(This) -->|"Connects"| P(That<br>there)
    end
    P -->|"Kills"| Blackbox
    style FW text-align:left

does not work:

flowchart LR
    subgraph FW ["The Label"]
    R(This) -->|"Connects"| P(That<br>there)
    end
    P -->|"Kills"| Blackbox
    style FW text-align:left

[CBroz1]

My workaround works similar to Repkap11's answer, by adding an extra nested subgraph with a blank value and having stroke-dasharray: 0 1 as its style; Nothing else was needed in my case.

In my case, I also needed, fill:none, as in...

flowchart TD
    subgraph Label
        subgraph subgraph_padding_1 [ ]
            style subgraph_padding_1 fill:none,stroke-dasharray: 0 1
            A --> C
            B --> C
        end
    end
C --> D

[stevedep]

Any news on this one?

[byryepez]

My workaround works similar to Repkap11's answer, by adding an extra nested subgraph with a blank value and having stroke-dasharray: 0 1 as its style; Nothing else was needed in my case.

In my case, I also needed, fill:none, as in...

flowchart TD
    subgraph Label
        subgraph subgraph_padding_1 [ ]
            style subgraph_padding_1 fill:none,stroke-dasharray: 0 1
            A --> C
            B --> C
        end
    end
C --> D

In my case, I used a classDef to define a new class, which is handy when you need to use it several times:

flowchart LR

subgraph Stage1[Stage 1]
    subgraph Title1 [ ]
        direction TB
        A1 --> B1
        B1 --> C1
    end
end

subgraph Stage2[Stage 2]
    subgraph Title2 [ ]
        direction TB
        A2 --> B2
        B2 --> C2
    end
end

subgraph Stage3[Stage 3]
    subgraph Title3 [ ]
        direction TB
        A3 --> B3
        B3 --> C3
    end
end


Stage1 --> Stage2
Stage2 --> Stage3

classDef Title fill:none,stroke:none;
class Title1,Title2,Title3 Title

flowchart LR

subgraph Stage1[Stage 1]
    subgraph Title1 [ ]
        direction TB
        A1 --> B1
        B1 --> C1
    end
end

subgraph Stage2[Stage 2]
    subgraph Title2 [ ]
        direction TB
        A2 --> B2
        B2 --> C2
    end
end

subgraph Stage3[Stage 3]
    subgraph Title3 [ ]
        direction TB
        A3 --> B3
        B3 --> C3
    end
end


Stage1 --> Stage2
Stage2 --> Stage3

classDef Title fill:none,stroke:none;
class Title1,Title2,Title3 Title

[bn-l]

This very badly deserves to be bumped

[jgreywolf]

Need someone to step up and take this issue on

[LMS007]

sigh...

[respirojnj]

++++

[bigNeoneo]

any good news?

[sgogriff]

bump!!

[mpaw]

It's been four years now and this issue is still open. Please either give us a way to modify the padding on the subgraphs or provide a solution. It's a really annoying issue.