import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
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="Ma1c484f4b6254eab8a9e6f5401192721-cont"><div class="chart" id="Ma1c484f4b6254eab8a9e6f5401192721"></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.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'); });