Label resizing with dynamically loaded fonts

[tomzx]

Hi,

This is more of a heads up than an actual issue (and this is probably more related to how dagre renders labels, but this may be of interest for mermaid), but if you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the whole page to have been loaded (dom + assets, particularly the font files).

Thus, developers that integrate mermaid into their own page should use

$(window).load(function() {
    mermaid.initialize();
});

over

$(document).ready(function() {
    mermaid.initialize();
});

Not doing so will most likely result in mermaid rendering graphs that have labels out of bounds.

Using ready

Using load

[knsv]

Thanks @tomzx. That's a good point. I think this should be pointed out in the docs.

Also I think the domContentLoaded used by mermaid should be changed to loadEvent.

So good input, thanks.

[knsv]

Using the load event in mermaid now. Not yet released though.

[knsv]

Closing issue as it's resolution is included in release 0.5.6. Let me know if you do not agree.