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 diagrams and flowcharts, one can use the Mermaid library.

Required steps:

  1. Check out the latest release of Mermaid at https://github.com/knsv/mermaid/releases
  2. Put mermaid.css and mermaid.min.js from the latest release (or master version, if you are feeling brave) into the presentation's directory.
  3. 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>
  1. 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]
  1. Enjoy!
<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