Adding graphs via Mermaid

To render beautiful graphs, sequence and Gantt diagrams and flowcharts, one can use the Mermaid library.

Required steps:

• Check out the latest release of Mermaid at https://github.com/knsv/mermaid/releases

• Put mermaid.css and mermaid.min.js from the latest release (or master version, if you are feeling brave) into the presentation's directory.

• In the presentation's html file after a link to remark's own JavaScript (something like <script src="./remark-latest.min.js"></script>) add:

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

• In any slide, add the flowchart by putting graph description (on a separate line) like this:

  <div class="mermaid">
  graph LR
          A-->B
          B-->C
          C-->A
          D-->C
  </div>
  

• Enjoy!

Current limitations:

• Multiple graphs/sequence diagrams per slideshow do not interact with each other gracefully (bug report not yet posted to Mermaid) - possibly because of id autonaming and resulting conflicts in rendering.

• Graphs on a slide may require a refresh to show up, if you encountered this problem, try adding following code after you create slides. See this issue for some details.

  mermaid.initialize({
    startOnLoad: false,
    cloneCssStyles: false
  });
  function initMermaid(s) {
    var diagrams = document.querySelectorAll('.mermaid');
    var i;
    for(i=0;i<diagrams.length;i++){
      if(diagrams[i].offsetWidth>0){
        mermaid.init(undefined, diagrams[i]);
      }
    }
  }
  slideshow.on('afterShowSlide', initMermaid);
  initMermaid(slideshow.getSlides()[slideshow.getCurrentSlideIndex()]);