Adding graphs via Mermaid

stu-b-doo edited this page Nov 28, 2017 · 7 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:

    <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.

UPDATE: https://github.com/knsv/mermaid/issues/360

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.