import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
Tries vizjs in a notebook. This is a simple way to show a graph defined with the DOT language. vizjs compiles Graphviz was compiled into javascript with emscripten.
from jyquickhelper import add_notebook_menu
add_notebook_menu()
from jyquickhelper import RenderJS
css = None
libs = ['http://www.xavierdupre.fr/js/vizjs/viz-lite.js']
script = """
var svgGraph = Viz("digraph { a -> b; }");
document.getElementById('__ID__').innerHTML = svgGraph;
"""
jr = RenderJS(script, css=css, libs=libs)
jr
print(jr._repr_html_())
<div id="M87f269e44904465d99006e0de0c9b161-cont"><div id="M87f269e44904465d99006e0de0c9b161" style="width:100%;height:100%;"></div></div> <script> require(['http://www.xavierdupre.fr/js/vizjs/viz-lite.js'], function() { var svgGraph = Viz("digraph { a -> b; }"); document.getElementById('M87f269e44904465d99006e0de0c9b161').innerHTML = svgGraph; }); </script>
The previous script was wraps into a class in this module.
from jyquickhelper import RenderJsDot
dot = """
digraph {
d[label="longer label"];
a -> b -> c;
b -> d;
}
"""
RenderJsDot(dot)
print(RenderJsDot(dot)._repr_html_())
<div id="M897d8534cca9461ab1f83b41aa37cac1-cont"><div id="M897d8534cca9461ab1f83b41aa37cac1" style="width:100%;height:100%;"></div></div> <script> require(['http://www.xavierdupre.fr/js/vizjs/viz.js'], function() { var svgGraph = Viz("\ndigraph {\n d[label=\"longer label\"];\n a -> b -> c;\n b -> d;\n}\n"); document.getElementById('M897d8534cca9461ab1f83b41aa37cac1').innerHTML = svgGraph; }); </script>
The graph can become dynamic by using d3-graphviz. I took the minified version available here d3-graphviz.min.js showing up at this example d3-graphviz Basic Example.
css = None
libs = [dict(path="http://www.xavierdupre.fr/js/d3/d3.v4.min.js",
name="d3", exports="d3"),
'http://www.xavierdupre.fr/js/vizjs/viz-lite.js',
'http://www.xavierdupre.fr/js/d3graphviz/d3-graphviz.min.js']
script = """
d3.select("#__ID__").graphviz()
.fade(false)
.renderDot('digraph {a -> b}');
"""
jr = RenderJS(script, css=css, libs=libs)
jr
print(jr._repr_html_())
<div id="Md277a3b6510c4ae78dc84287effccb59-cont"><div id="Md277a3b6510c4ae78dc84287effccb59" style="width:100%;height:100%;"></div></div> <script> require.config({ paths:{ 'd3':'http://www.xavierdupre.fr/js/d3/d3.v4.min', }, shim:{ 'd3':{'exports':'d3'}, }, }); require(['d3','http://www.xavierdupre.fr/js/vizjs/viz-lite.js','http://www.xavierdupre.fr/js/d3graphviz/d3-graphviz.min.js'], function(d3) { d3.select("#Md277a3b6510c4ae78dc84287effccb59").graphviz() .fade(false) .renderDot('digraph {a -> b}'); }); </script>
Not really working.