Skip to content

Adding graphs via Mermaid

Jump to bottom Edit New page
Hunter-Github edited this page Feb 13, 2016 · 8 revisions

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:

    .mermaid[graph LR
        A-->B
        B-->C
        C-->A
        D-->C]

  • 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.
<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally