Generated svg is different than live editor, text is cut off

[scambier]

Describe the bug
The svg generated via mermaid.render is different than the one in the live editor.

For the following code:

graph TD
	A(This text is cut off)

Loading

The live editor outputs this:

<svg id="mermaid-1592594992692" width="168.28334045410156" xmlns="http://www.w3.org/2000/svg" height="55" viewBox="0 0 168.28334045410156 55">

While the mermaid.render() callback outputs this:

<svg id="mermaid-nWuJ" width="156.515625" xmlns="http://www.w3.org/2000/svg" height="54" viewBox="0 0 156.515625 54" style="max-width: 100%;">

To Reproduce

Here is basically my code to generate the svg, nothing fancy:

import mermaid from 'mermaid'
mermaid.initialize({ theme: 'dark' })
mermaid.render(id, code, (svg) => {
  console.log(svg)
})

I'm using mermaid 8.5.1

I tried fiddling with fonts and sizes but it doesn't seem to change anything.

[knsv]

Thanks for reporting this. They method to get the width of the label is to render it and get the bounding box. After that the width if the box is calculated based in that initial width. If the font for some reason differs between the initial rendering and the final svg the text can be cut. I will try to replicate this error and investigate.

This might be related to issue #1540.

[knsv]

I have found the root cause for this and will fix it in 8.6.1. Meanwhile you can circumvent the issue by providing a container id for the render function as per below:

mermaid.render(
  'the-id-of-the-svg',
  code,
  svg => {
    console.log(svg);
    const elem = document.querySelector('#graph-to-be');
    elem.innerHTML = svg;
  },
  document.querySelector('.tmp')
);

and insert a element in which the rendering can happen in the html:

 <div class="tmp"></div>

The reason for this manipulation is that the DOM is used for getting the size of the text labels ... and we should make sure that the right font settings is provided where these calculations take place.