when using mermaid + reveal.js, diagrams do not render in correct size after the 4th slide

[koutbo6]

Describe the bug Managed to integrate mermaid into reveal4.10 and it renders perfectly. That is, until you hit the 4th slide.

For some reason, slides 1,2,3 render the diagrams and set their size correctly.

Starting from slide 4 and beyond, the diagrams render, but they get unusually small sizes that prohibit their display.

To Reproduce

Attached index.html in this gist reproduces the problem: https://gist.github.com/koutbo6/44777c84fff9fe559bdf984aa065fe4d

Expected behavior diagrams should render properly on slides 4 and beyond when using mermaid with revealjs

Desktop (please complete the following information):

• OS: mac catalina
• Browser chrome
• Version 86.0.4240.198 (Official Build) (x86_64)

Additional context Here is the devtools console output. I probed the diagrams on slide 2 (working) and slide 4 (rendering but invisible due to small size)

// devtools console output

// this is the problematic diagram svg element from the 4th page, notice size, max-width and viewbox
document.getElementsByClassName("mermaid")[2]
<div class=​"mermaid" data-processed=​"true">​<svg id=​"mermaid-1607634965885" width=​"100%" xmlns=​"http:​/​/​www.w3.org/​2000/​svg" xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"16" style=​"max-width:​ 16px;​" viewBox=​"-8 -8 16 16">​…​</svg>​</div>​

// output fro svg getBBox for that element
document.getElementsByClassName("mermaid")[2].getElementsByTagName("svg")[0].getBBox()
SVGRect {x: -2, y: -2, width: 120, height: 70}

// here is the working diagram svg element from the 2nd page, compare dimensions and viewbox to problematic one above
document.getElementsByClassName("mermaid")[0]
<div class=​"mermaid" data-processed=​"true">​<svg id=​"mermaid-1607634965816" width=​"100%" xmlns=​"http:​/​/​www.w3.org/​2000/​svg" xmlns:xlink=​"http:​/​/​www.w3.org/​1999/​xlink" height=​"167.46875" style=​"max-width:​ 400.515625px;​" viewBox=​"0 0.0000019073486328125 400.515625 167.46875">​…​</svg>​</div>​

// this is the svg.getBBox() result, notice how dimensions differ from problematic one
document.getElementsByClassName("mermaid")[0].getElementsByTagName("svg")[0].getBBox()
SVGRect {x: 0, y: 0, width: 0, height: 0}

Thank you

[malmarz]

Found the cause.

lazy loading of slide contents causes the dimensions to be off for mermaid, therefore improperly calculate them for slides not fully loaded yet.

I've written some code to invoke init and render the diagrams only if the content has been fully loaded:

https://gist.github.com/koutbo6/f78bca0e2e2789c9892df77eafa1b70f

Solution works great for all diagrams .. except flow charts.

The flowchart diagrams render well, except for the node labels. Text dimension seems way off.

Here is how I see the following diagram:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Messing a bit with directives, I can get some of the labels to appear:

%%{init: { 'logLevel': 'debug', 'theme': 'neutral' } }%%
graph TD;
%%{config: { 'fontFamily': 'Menlo', 'fontSize': 18, 'fontWeight': 400} }%%
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Would appreciate any guidance

Thanks!

[mario-bermonti]

I'm experiencing the sane thing as @malmarz

The "boxes" are smaller than the text so they can't be used.

[maurerle]

I still have this issue and could not fix it with the gist provided above. The slides are not even rendering for those slides.

I am using pandoc markdown to create the revealjs presentation with this command: pandoc -f markdown -t revealjs test-mermaid.md --include-before before.html -o index.html

test-mermaid.md with this file and <script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script> in before.html

resulting in the following index.html which does not render correctly: https://jsfiddle.net/uzsbc895/

Any help is appreciated! :)

[maurerle]

The trick mentioned above does not work anymore for mermaid 10.x The fist mermaid.init call somehow already triggers for the other slides as well, but does not render them correctly.

As I need to use new diagrams like mindmap, I am somewhat lost here..

[maurerle]

I bisect some releases and found that this is broken since 9.2.0 (which introduces mindmaps :( ) - latest version which works with the workaround is 9.1.7

[maurerle]

I know have something like this:

    mermaid.mermaidAPI.initialize({
      startOnLoad:false,
      securityLevel: 'loose',
      lazyLoad: false,
    });

    Reveal.initialize();

    const cb = function (event) { mermaid.init(event.currentSlide, '.present>.mermaid'); };
    Reveal.addEventListener('ready', cb);
    Reveal.addEventListener('slidechanged', cb);

which works better, but not well..

test.html.txt