Multiples mermaid diagrams are crashing

[spe-nsi]

Hi, I've tried to put two Mermaid diagrams, one by slide, and the first renders correctly but not the second : I had to refresh the page to have to second (but then the first disappears). Example : effacer.txt

[GaelGirodon]

Hello, Mermaid can be a bit complex to configure when it must deal with another JS lib/framework.

Here's my configuration script:

// Initialize Mermaid but don't render diagrams on start
mermaid.initialize({ startOnLoad: false, cloneCssStyles: false });

function initMermaid(s) {
    const elements = document.querySelectorAll(".remark-slide")[s.getSlideIndex()]
        ?.querySelectorAll('.mermaid-diagram p:not([data-processed="true"])');
    if (elements) mermaid.init(undefined, elements);
}

// Render diagrams immediately on the current slide
initMermaid(slideshow.getSlides()[slideshow.getCurrentSlideIndex()]);

// Render diagrams when there is a navigation to another slide
slideshow.on("afterShowSlide", initMermaid);

Multiple diagrams, on multiple slides, are now correctly rendered with the following syntax:

.mermaid-diagram[
sequenceDiagram
    Alice->>John: Hello John, how are you?
]

PS: don't use the "default" .mermaid class as it seems to be buggy (Mermaid sometimes seems trying to render diagrams twice when we call init() on element(s) with the .mermaid class which leads to a syntax error).

[spe-nsi]

Hi, I didn't have the time to try your proposal until now and this didn't worked for me (my mermaid diagrams don't appear anymore). Can you send me a minimal working example ?