Confluence Mermaid Macro Rendering Massive Blank Spaces / Big Gaps

Resolved: Mermaid JS Before And After Diagram, Massive Blanks / Whitespaces / Big Gaps, Issue In Confluence

There is already a reported issue with Mermaid JS open for this, since April 2021. At time of writing this blog, July 2023, two years down and this issue is still open :(.
https://github.com/mermaid-js/mermaid/issues/1984

For all users using Atlassian Confluence & Mermaid as their TO-GO combination for creating pages with FlowCharts, Diagrams And Charts, lose no hope, there is a way to resolve/remove those big gaps or white-spaces in the display, which grows with the size of the diagram, by simply applying below CSS to your page styling.

.mermaid svg { height: auto; }

Scope: Page

If you not a System or Space admin, you can apply this fix for your page by using HTML macro at top of your page with content:

<style>
.mermaid svg { height: auto; }
</style>

HTML Macro Use For Custom CSS Styling Of The Page In Confluence

Scope: Space

To customize the space’s CSS style sheets:
1. Go to the space and choose Space tools > Look and Feel from the bottom of the sidebar
2. Choose…