Open spe-nsi opened 3 years ago
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).
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 ?
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