import mermaid from 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.2.3/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: true });
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
print(jr._repr_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>