integrating mermaid (or other js libraries)

[alperyilmaz]

Hi,
The wiki indicates that Mermaid can be integrated by including the following lines in HTML:

<script src="./remark-latest.min.js"></script>
<script src="./mermaid.min.js"></script>
<link rel="stylesheet" href="./mermaid.css">
<script>mermaid.initialize({startOnLoad:true});</script>

I included the necessary lines in HTML but I had to refresh the page whenever the slide contains mermaid code so that I can see the mermaid library effect. Is there any other way to overcome this problem? Should I be triggering slide events as described in #145 ?

[kuulemart]

Hi!

mermaid seems to have problems with remark setting slide's attribute display to none. I changed the css to use visibility attribute instead and it did the trick. My workaround was to add to html under style tag following lines

.remark-slide-container {
    visibility: hidden;
    display: initial;
}
.remark-visible {
    visibility: visible;
}

Latest remark and mermaid libraries were used:

    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js"></script>
    <script src="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/knsv/mermaid/6.0.0/dist/mermaid.css">
    <script>
        remark.create({
            highlightLanguage: 'javascript'
        });

        mermaid.initialize({startOnLoad:true});
    </script>

[mpusz]

It looks like it helps on page view but brakes print to pdf. Anyone have ideas how to make both working right?

[jcrben]

The wiki https://github.com/gnab/remark/wiki/Adding-graphs-via-Mermaid has had some updates since this bug was filed and there's also a bug report noted at the bottom of it mermaid-js/mermaid#360 where people have posted code to initialize mermaid as they slide through - maybe that will help

[wsargent]

I'm not having much luck with this. The diagrams always turn out black and pointing in random directions. Is there a current example?

[zuozhiw]

If anyone is still having problems with mermaid, I wrote this snippet that works for me:

// don't let mermaid automatically load on start
mermaid.initialize({
  startOnLoad: false,
  cloneCssStyles: false
});

function initMermaidInSlide(slide) {
  var slideIndex = slide.getSlideIndex();
  // caution: no API to get the DOM element of current slide in remark, this might break in the future
  var currentSlideElement = document.querySelectorAll(".remark-slides-area .remark-slide")[slideIndex];
  var currentSlideMermaids = currentSlideElement.querySelectorAll(".mermaid");
  if (currentSlideMermaids.length !== 0) {
    mermaid.init(undefined, currentSlideMermaids);
  }
}

// first starting slide won't trigger the slide event, manually init mermaid
initMermaidInSlide(slideshow.getSlides()[slideshow.getCurrentSlideIndex()])
// on each slide event, trigger init mermaid
slideshow.on('afterShowSlide', initMermaidInSlide);

[tim2CF]

this worked for me

      window.onload = function(){
        var slideshow = remark.create();
        // don't let mermaid automatically load on start
        mermaid.initialize({
          startOnLoad: false,
          cloneCssStyles: false,
          theme: 'neutral',
          flowchart: {
            curve: 'basis'
          }
        });
        // callback to render graphs
        function initMermaidInSlide(slide){
          // caution: no API to get the DOM element of current slide in remark, this might break in the future
          document.querySelectorAll(".remark-slides-area .remark-slide")[slide.getSlideIndex()]
                  .querySelectorAll(".mermaid")
                  .forEach(function(graph){
                    mermaid.init(undefined, graph);
                  });
        }
        // on each slide event, trigger init mermaid
        slideshow.on('afterShowSlide', initMermaidInSlide);
        // first starting slide won't trigger the slide event, manually init mermaid
        initMermaidInSlide(slideshow.getSlides()[slideshow.getCurrentSlideIndex()]);
      };

[jaimejim]

Hi, this looks very interesting, could anyone provide a full html example of a presentation that includes a diagram?

[tim2CF]

yes, of course, take a look to source code of page
https://timcf.github.io/erlang-universe/7-ico-ratings.html#4

[abelards]

Seems solved, closing the issue!