C4: padding and margins

[RobinKnipe]

Description

Great to see the C4 diagram support taking shape!

See the example screenshot below; taken from Firefox rendering a Github markdown page with C4 Mermaid diagrams:

1. there is quite a lot of extra vertical space around the extreme most edges of the diagram content
2. and extra horizontal space between the diagram title and the rest of the content
3. component boxes are not drawn large enough to properly contain their descriptions
4. boundary titles are too close to the top and sometimes clash
5. components are often not placed into better available space, causing unnecessary layering/relation crossover

Steps to reproduce

There are various examples on the same markdown page the screenshot above was taken from: https://github.com/DEFRA/fcp-dal-api/blob/main/docs/architecture.md

Screenshots

Interestingly Chromium performs better with the same content:

1. same as Firefox
2. same as Firefox
3. component widths work nicely, but more space at the bottom would be nice
4. boundary titles have a bit more space, but a little more would probably be good
5. here the component box arrangement is much better!.. so there's not the same relation overlap problem

NOTE: similar behaviour experienced in VS Code (presumably because of Electron?)

Code Sample

Again see the example markdown doc: https://github.com/DEFRA/fcp-dal-api/blob/main/docs/architecture.md

Setup

• Mermaid version: default Github markdown renderer
• Browser and Version: [Chromium v144.0.7559.96, Firefox v147.0.2]

Suggested Solutions

Suggestions in the ordered lists accompanying each screenshot above

Additional Context

No response