Mermaid.js generated SVG pictures with too many blank spaces taking up space.

[intzaaa]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I've found a bug and checked that ...

• ... the problem doesn't occur with the mkdocs or readthedocs themes
• ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
• ... the documentation does not mention anything about my problem
• ... there are no open or closed issues that are related to my problem

Description

If the block of code for mermaid is so long that it exceeds the height of the SVG that the target is generating, the upper and lower parts of the generated SVG will take up a lot of invalid space.

Expected behaviour

SVG just happens to appear below the text

Actual behaviour

Steps to reproduce

1. Write a markdown file
2. Insert a long block of mermaid code

Package versions

• Python: 3.10
• MkDocs: 1.3.0
• Material: 8.3.6

Configuration

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: mermaid
          class: mermaid
          format: !!python/name:pymdownx.superfences.fence_code_format

System information

• Operating system: Windows 11
• Browser: Edge 102

[intzaaa]

[squidfunk]

This is an exact duplicate of #3947. Closing.

[intzaaa]

Sorry, but mermaid2 plugin works well. How it works?

[squidfunk]

Thanks for providing the details. As we can see in your screenshot, it is clearly the viewbox's height that seems to be calculated wrong. The SVG is generated by Mermaid.js – Material for MkDocs does no post- or pre-processing whatsoever. We're using Mermaid.js 9.0.1, so it might be related to version differences between our integration and the mermaid2 plugin. other than that, if the mermaid2 plugin solves your issue, you can use that in favor.

[squidfunk]

The mermaid2 plugin uses v8.8.0.

[squidfunk]

You can define a custom mermaid.js version like so: #3171 (comment)

[intzaaa]

I had tried many versions of mermiad.js on material, no one works well.

I had tried many versions of mermaid.js on the plugin, each one works well, even v9.0.1.

What is the problem?

[intzaaa]

Mermaid in material is faster than mermaid plugin, so please fix the bug, thank you!

[squidfunk]

Thanks for testing the different versions. As I already noted in #3947 (comment), this is an upstream bug:

• Unexpected vertical space around graph mermaid-js/mermaid#2657

[intzaaa]

Thanks for testing the different versions. As I already noted in #3947 (comment), this is an upstream bug:

• Unexpected vertical space around graph mermaid-js/mermaid#2657

But why mermaid plugin works well? Maybe you can fix it like the plugin, see mermaid-js/mermaid#2657 (comment)

[vermeerdirk]

Just throwing a solution out here:
I do understand that the issue is in mermaid.js and should be resolved there.
However, as mentioned on similar posts here, setting the height property of the svg tag to 'auto' fixes it for my classdiagrams.
To do this, I changed the minified bundle that comes with the mkdocs-material package as follows:

mkdocs-matrial creates shadowroots for each diagram, in so avoiding other issues with duplicate id's etc, which is smart but it also makes it impossible to just use css to access elements (svg tag) inside the generated div tags.
Thankfully, there is a callback function we can use but we have to change the minified file for this. (or some sponsor could..maybe make it an option)

Edit: bundle.467223ff.min.js
Search for 'render' or 'mermaidAPI.render
Carefully change the code to set height of the svg to auto

        .................
	let t=`__mermaid_${ps++}`,r=C("div",{class:"mermaid"});
	// console.log('mermaid');
	mermaid.mermaidAPI.render(t,e.textContent,n=>{
	    // console.log('mermaid api render callback textcontent', e.textContent);
	    let o=r.attachShadow({mode:"closed"});
	    // console.log('object with attached Shadow root', o);
	    o.innerHTML=n,e.replaceWith(r);
	    // console.log('innerhtml set', o.innerHTML);
	    let firstSvg = o.querySelector('svg');
	    if (firstSvg) {
	        //firstSvg.setAttribute('height', 'auto'); 
                firstSvg.style.height = 'auto'; 
	    }
	})}),Gr.pipe(Z({ref:e}))}function ms(e,{target$:t,print$:r}){let n=!0;ret .......

Ofcourse, when upgrading mkdocs-material this solution is overwritten but in the meantime it's a workaround.
Also realize that it might create other issues elsewhere but for now, this works best for me