.. _nbmermaidrst:

=========================================
Javascript library in a notebook: mermaid
=========================================


.. only:: html

    **Links:** :download:`notebook <nb_mermaid.ipynb>`, :downloadlink:`html <nb_mermaid2html.html>`, :download:`PDF <nb_mermaid.pdf>`, :download:`python <nb_mermaid.py>`, :downloadlink:`slides <nb_mermaid.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_mermaid.ipynb|*`


Tries `mermaid <https://mermaidjs.github.io/>`__ in a notebook. Example
from `demo <https://mermaidjs.github.io/mermaidAPI.html>`__.

.. code:: ipython3

    from jyquickhelper import RenderJS
    css = ["http://www.xavierdupre.fr/js/mermaid/mermaid.forest.css"]
    libs = ['http://www.xavierdupre.fr/js/mermaid/mermaidAPI.min.js']
    script = """
    var graphDefinition = 'graph TB\\na-->b';
    var cb = function(svgGraph) {
        document.getElementById('__ID__').innerHTML = svgGraph;
    }
    mermaidAPI.render('__ID__svg', graphDefinition, cb);
    """
    jr = RenderJS(script, css=css, libs=libs)
    jr






.. raw:: html

    <div id="M7a059e1abe334bd3a7b6cac96353f507-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/mermaid/mermaid.forest.css" type="text/css" /><div id="M7a059e1abe334bd3a7b6cac96353f507" style="width:100%;height:100%;"></div></div>
    <script>

    require(['http://www.xavierdupre.fr/js/mermaid/mermaidAPI.min.js'], function() { 
    var graphDefinition = 'graph TB\na-->b';
    var cb = function(svgGraph) {
        document.getElementById('M7a059e1abe334bd3a7b6cac96353f507').innerHTML = svgGraph;
    }
    mermaidAPI.render('M7a059e1abe334bd3a7b6cac96353f507svg', graphDefinition, cb);
     });

    </script>




.. code:: ipython3

    print(jr._repr_html_())


.. parsed-literal::
    <div id="M7a059e1abe334bd3a7b6cac96353f507-css"><link rel="stylesheet" href="http://www.xavierdupre.fr/js/mermaid/mermaid.forest.css" type="text/css" /><div id="M7a059e1abe334bd3a7b6cac96353f507" style="width:100%;height:100%;"></div></div>
    <script>
    require(['http://www.xavierdupre.fr/js/mermaid/mermaidAPI.min.js'], function() { 
    var graphDefinition = 'graph TB\na-->b';
    var cb = function(svgGraph) {
        document.getElementById('M7a059e1abe334bd3a7b6cac96353f507').innerHTML = svgGraph;
    }
    mermaidAPI.render('M7a059e1abe334bd3a7b6cac96353f507svg', graphDefinition, cb);
     });
    </script>