Javascript library in a notebook: flowchart¶

Links: notebook, html, PDF, python, slides, slides(2), GitHub

Tries flowchart.js in a notebook.

css = None
libs = ["http://fperucic.github.io/treant-js/vendor/raphael.js",
        "http://flowchart.js.org/flowchart-latest.js"]
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__');
"""
from jyquickhelper import RenderJS
jr = RenderJS(script=script, css=css, libs=libs,
         div_class="chart", height=None, width=None)
jr
jr.generate_html()[0]
'<div id="Mba9f94263b9640f2b2d3f9322b6b00ed-cont"><div class="chart" id="Mba9f94263b9640f2b2d3f9322b6b00ed"></div></div>'
print(jr.generate_html()[1])
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.comn" +
    "op1=>operation: My Operationn" +
    "sub1=>subroutine: My Subroutinen" +
    "cond=>condition: Yesn" +
    "or No?:>http://www.google.comn" +
    "io=>inputoutput: catch something...n" +
    "n" +
    "st->op1->condn" +
    "cond(yes)->io->en" +
    "cond(no)->sub1(right)->op1");
diagram.drawSVG('Mba9f94263b9640f2b2d3f9322b6b00ed');
 });