.. _nbflowchartrst:

===========================================
Javascript library in a notebook: flowchart
===========================================


.. only:: html

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


Tries `flowchart.js <https://flowchart.js.org/>`__ in a notebook.

.. code:: ipython3

    css = None
    libs = ["http://fperucic.github.io/treant-js/vendor/raphael.js",
            "http://flowchart.js.org/flowchart-latest.js"]

.. code:: ipython3

    script = """ 
    var diagram = flowchart.parse(   
        "st=>start: Start:>http://www.google.com[blank]\\n" +
        "e=>end:>http://www.google.com\\n" +
        "op1=>operation: My Operation\\n" +
        "sub1=>subroutine: My Subroutine\\n" +
        "cond=>condition: Yes\\n" +
        "or No?:>http://www.google.com\\n" +
        "io=>inputoutput: catch something...\\n" +
        "\\n" +
        "st->op1->cond\\n" +
        "cond(yes)->io->e\\n" +
        "cond(no)->sub1(right)->op1");
    diagram.drawSVG('__ID__');
    """

.. code:: ipython3

    from jyquickhelper import RenderJS
    jr = RenderJS(script=script, css=css, libs=libs,
             div_class="chart", height=None, width=None)
    jr






.. raw:: html

    <div id="Ma1c484f4b6254eab8a9e6f5401192721-cont"><div class="chart" id="Ma1c484f4b6254eab8a9e6f5401192721"></div></div>
    <script>

    require(['http://fperucic.github.io/treant-js/vendor/raphael.js','http://flowchart.js.org/flowchart-latest.js'], function() {  
    var diagram = flowchart.parse(   
        "st=>start: Start:>http://www.google.com[blank]\n" +
        "e=>end:>http://www.google.com\n" +
        "op1=>operation: My Operation\n" +
        "sub1=>subroutine: My Subroutine\n" +
        "cond=>condition: Yes\n" +
        "or No?:>http://www.google.com\n" +
        "io=>inputoutput: catch something...\n" +
        "\n" +
        "st->op1->cond\n" +
        "cond(yes)->io->e\n" +
        "cond(no)->sub1(right)->op1");
    diagram.drawSVG('Ma1c484f4b6254eab8a9e6f5401192721');
     });

    </script>




.. code:: ipython3

    jr.generate_html()[0]




.. parsed-literal::
    '<div id="Ma1c484f4b6254eab8a9e6f5401192721-cont"><div class="chart" id="Ma1c484f4b6254eab8a9e6f5401192721"></div></div>'



.. code:: ipython3

    print(jr.generate_html()[1])


.. parsed-literal::

    require(['http://fperucic.github.io/treant-js/vendor/raphael.js','http://flowchart.js.org/flowchart-latest.js'], function() {  
    var diagram = flowchart.parse(   
        "st=>start: Start:>http://www.google.com[blank]\n" +
        "e=>end:>http://www.google.com\n" +
        "op1=>operation: My Operation\n" +
        "sub1=>subroutine: My Subroutine\n" +
        "cond=>condition: Yes\n" +
        "or No?:>http://www.google.com\n" +
        "io=>inputoutput: catch something...\n" +
        "\n" +
        "st->op1->cond\n" +
        "cond(yes)->io->e\n" +
        "cond(no)->sub1(right)->op1");
    diagram.drawSVG('Ma1c484f4b6254eab8a9e6f5401192721');
     });