titleTopMargin option for flowchart does not affect subgraph titles

[zoeyTM]

Description

When using subgraphs in a flowchart, there is currently no way to customize the padding around a subgraph's title. Larger diagrams consisting of multiple concurrent subgraphs cause mermaid to render the subgraph titles extremely close to the subgraphs top border, making the graph appear unpolished.

I hoped that titleTopMargin would affect subgraph titles too, but it currently only applies to the main flowchart title. There is no other config option that allows for this specific type of customization either.

--

The current workaround I've found is to nest subgraphs inside each other to give the illusion of a padded subgraph title, like in this live editor snippet, however this comes with its own drawbacks such as the subgraph scaling inconsistently in size and there being a lot of extra empty space everywhere else in the graph as well.

Steps to reproduce

Here's a live editor snippet demonstrating a flowchart with a title containing a subgraph that also has a title. The titleTopMargin config option has also been set, but it's only affecting the flowchart title, not the subgraph title.

Screenshots

Screenshot showing the subgraph without the desired padding:

Screenshot showing the workaround solution (still not ideal, but at least the subgraphs title is padded):

Code Sample

No response

Setup

• Mermaid version: v10.5.0
• Browser and Version: Chrome

Suggested Solutions

Preferred solution would be a new flowchart config option that allows for custom padding around subgraph titles.

An alternate solution would be to apply titleTopMargin to subgraph titles as well as the current functionality of applying to the general flowchart title.

Additional Context

No response

[VishalMCF]

Hi everyone, which solution suggested by @zoeyTM is suitable?

[nirname]

@VishalMCF I think we need a configuration option for margins. You can extend schema, update types generated from it with with

pnpm --filter=mermaid types:build-config

and then fix Flowchart renderer.

[mathbraga]

@nirname Is adding 2 separate config options (1 for top and 1 for bottom) an ideal solution for this? I figured that in some cases users might want to also add spacing between the subgraph title and its content.

[nirname]

@mathbraga I think that 2 configuration options in is enough. It will allow to adjust margins for all the subtitles. May be we should keep it as an object itself:

subgraphTitleMargin: {
  top: 10,
  bottom: 20
}

or we could use

titleMarting: {
  top: 10,
  bottom, 20
}

which would affect graph title too, but we should keep current titleTopMargin for backward compatibility anyway

[mathbraga]

Hi @nirname, I solved the issue for the generic subgraph, but I'm having trouble when subgraphs have external connections. Was wondering if it would be possible to make a PR for only the general case and then create another issue for the external connections variation.

To clarify, this is what I mean with external connection:

So subcontainer has an external connection.

[nirname]

@mathbraga Hi! Open PR, let's have a live preview of the change. Your request will be deployed and everyone will be able to see what is going on.

[zoeyTM]

@sidharthv96 Can we reopen this issue since the feature PR that closed it got reverted?

[nirname]

@zoeyTM I think it has been eventually merged

• Original PR Feature/4935 subgraph title margin config option #5041
• Revert Revert 5041 feature/4935 subgraph title margin config option #5197
• Re-revert & fix Revert "Revert 5041 feature/4935 subgraph title margin config option" #5205

[zoeyTM]

Ah! I missed that, thanks!

[zoeyTM]

Any idea when the next release might be that would include the re-revert? @nirname

[nirname]

@zoeyTM Not really sure, I am not currently responsible for making releases, maybe @sidharthv96 can respond to this