Skip to content

Instantly share code, notes, and snippets.

@Cartman0

Cartman0/drawGraphvizOnJupyter.ipynb

Last active February 11, 2022 09:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Cartman0/5a7cfadc2f367869f2df506577ace525 to your computer and use it in GitHub Desktop.
Save Cartman0/5a7cfadc2f367869f2df506577ace525 to your computer and use it in GitHub Desktop.
Download ZIP
draw Graphviz(dot) with Viz.js on Jupyter notebook.
Display the source blob
Display the rendered blob
Raw
drawGraphvizOnJupyter.ipynb
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"scrolled": true
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
"requirejs.config({\n",
" paths: {\n",
" 'Viz': ['https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz'],\n",
" 'render': ['https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/lite.render'],\n",
" },\n",
"});\n",
"window.vizDrawModule = { \n",
" PromiseRequire: function(paths, callback){\n",
" return new Promise(function(resolve, reject){\n",
" return require(paths, callback(resolve, reject));\n",
" });\n",
" },\n",
" callback_dot2svg: function(dot){\n",
" return function(resolve, reject){\n",
" return function(Viz, render){\n",
" /**\n",
" Usage Viz Class: \n",
" https://github-wiki-see.page/m/mdaines/viz.js/wiki/Usage\n",
" */\n",
" let viz = new Viz(render);\n",
" var r = viz.renderSVGElement(dot).then(function(element) {\n",
" resolve(element);\n",
" });\n",
" };\n",
" };\n",
" },\n",
" PromiseRequire_forViz: function(dot){\n",
" return this.PromiseRequire(['Viz', 'render'], this.callback_dot2svg(dot)); \n",
" }, \n",
" dot2svg: async function(dot) {\n",
" try {\n",
" const svg = await this.PromiseRequire_forViz(dot);\n",
" return svg;\n",
" } catch (rejectedValue) {\n",
" console.error(\"rej:\", rejectedValue);\n",
" }\n",
" },\n",
" get_exec_cell: function(this_of_call){\n",
" var output_area = this_of_call;\n",
" var cell_element = output_area.element.parents('.cell');\n",
" var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
" var cell = Jupyter.notebook.get_cell(cell_idx);\n",
" return cell;\n",
" }, \n",
" pyexec: function(command, callback_output){\n",
" return new Promise(resolve => {\n",
" var kernel = IPython.notebook.kernel;\n",
" kernel.execute(command, {\n",
" iopub: {\n",
" output: callback_output(resolve)\n",
" },\n",
" },\n",
" {silent: false}\n",
" );\n",
" });\n",
" },\n",
" draw_svg: function($this, svgDom, log=false){\n",
" var mod_this=this;\n",
" \n",
" function callback_output(resolve){\n",
" return function(out){\n",
" var cell = mod_this.get_exec_cell($this);\n",
" cell.output_area.clear_output();\n",
" cell.output_area.append_output({\n",
" output_type: \"display_data\", \n",
" data: {\"image/svg+xml\": out.content.data[\"image/svg+xml\"]}\n",
" });\n",
" return resolve(out.content.data[\"image/svg+xml\"]);\n",
" }\n",
" }\n",
" \n",
" if(log){\n",
" console.log(\"svg: \", svgDom);\n",
" }\n",
" \n",
" var s = new XMLSerializer();\n",
" var svg_str = s.serializeToString(svgDom);\n",
" var pycode = `SVG(data=\"\"\"${svg_str}\"\"\")`;\n",
" mod_this.pyexec(pycode, callback_output);\n",
" },\n",
" drawDot: function(dot, call_this, log=false) {\n",
" var mod_this = this;\n",
" (async function(){\n",
" var svg = await mod_this.dot2svg(dot);\n",
" mod_this.draw_svg(call_this, svg, log);\n",
" })(dot, mod_this, call_this, log);\n",
" }\n",
"}\n"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"'''\n",
"draw Graphviz(dot) with Viz.js on Jupyter\n",
"'''\n",
"from IPython.display import Javascript, display, SVG\n",
"\n",
"def run(jscommand):\n",
" display(Javascript(jscommand))\n",
"\n",
"def execute(pycommand):\n",
" run(f'Jupyter.notebook.kernel.execute(\"{pycommand}\")')\n",
"\n",
"jscommand=\"\"\"\n",
"requirejs.config({\n",
" paths: {\n",
" 'Viz': ['https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/viz'],\n",
" 'render': ['https://cdnjs.cloudflare.com/ajax/libs/viz.js/2.1.2/lite.render'],\n",
" },\n",
"});\n",
"window.vizDrawModule = { \n",
" PromiseRequire: function(paths, callback){\n",
" return new Promise(function(resolve, reject){\n",
" return require(paths, callback(resolve, reject));\n",
" });\n",
" },\n",
" callback_dot2svg: function(dot){\n",
" return function(resolve, reject){\n",
" return function(Viz, render){\n",
" /**\n",
" Usage Viz Class: \n",
" https://github-wiki-see.page/m/mdaines/viz.js/wiki/Usage\n",
" */\n",
" let viz = new Viz(render);\n",
" var r = viz.renderSVGElement(dot).then(function(element) {\n",
" resolve(element);\n",
" });\n",
" };\n",
" };\n",
" },\n",
" PromiseRequire_forViz: function(dot){\n",
" return this.PromiseRequire(['Viz', 'render'], this.callback_dot2svg(dot)); \n",
" }, \n",
" dot2svg: async function(dot) {\n",
" try {\n",
" const svg = await this.PromiseRequire_forViz(dot);\n",
" return svg;\n",
" } catch (rejectedValue) {\n",
" console.error(\"rej:\", rejectedValue);\n",
" }\n",
" },\n",
" get_exec_cell: function(this_of_call){\n",
" var output_area = this_of_call;\n",
" var cell_element = output_area.element.parents('.cell');\n",
" var cell_idx = Jupyter.notebook.get_cell_elements().index(cell_element);\n",
" var cell = Jupyter.notebook.get_cell(cell_idx);\n",
" return cell;\n",
" }, \n",
" pyexec: function(command, callback_output){\n",
" return new Promise(resolve => {\n",
" var kernel = IPython.notebook.kernel;\n",
" kernel.execute(command, {\n",
" iopub: {\n",
" output: callback_output(resolve)\n",
" },\n",
" },\n",
" {silent: false}\n",
" );\n",
" });\n",
" },\n",
" draw_svg: function($this, svgDom, log=false){\n",
" var mod_this=this;\n",
" \n",
" function callback_output(resolve){\n",
" return function(out){\n",
" var cell = mod_this.get_exec_cell($this);\n",
" cell.output_area.clear_output();\n",
" cell.output_area.append_output({\n",
" output_type: \"display_data\", \n",
" data: {\"image/svg+xml\": out.content.data[\"image/svg+xml\"]}\n",
" });\n",
" return resolve(out.content.data[\"image/svg+xml\"]);\n",
" }\n",
" }\n",
" \n",
" if(log){\n",
" console.log(\"svg: \", svgDom);\n",
" }\n",
" \n",
" var s = new XMLSerializer();\n",
" var svg_str = s.serializeToString(svgDom);\n",
" var pycode = `SVG(data=\\\"\\\"\\\"${svg_str}\\\"\\\"\\\")`;\n",
" mod_this.pyexec(pycode, callback_output);\n",
" },\n",
" drawDot: function(dot, call_this, log=false) {\n",
" var mod_this = this;\n",
" (async function(){\n",
" var svg = await mod_this.dot2svg(dot);\n",
" mod_this.draw_svg(call_this, svg, log);\n",
" })(dot, mod_this, call_this, log);\n",
" }\n",
"}\n",
"\"\"\"\n",
"run(jscommand)"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"scrolled": false
},
"outputs": [
{
"data": {
"image/svg+xml": [
"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"63pt\" height=\"116pt\" viewBox=\"0.00 0.00 63.33 116.00\">\n",
"<g id=\"graph0\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 112)\">\n",
"<title>%0</title>\n",
"<polygon fill=\"#ffffff\" stroke=\"transparent\" points=\"-4,4 -4,-112 59.3277,-112 59.3277,4 -4,4\"/>\n",
"<!-- start -->\n",
"<g id=\"node1\" class=\"node\">\n",
"<title>start</title>\n",
"<ellipse fill=\"none\" stroke=\"#000000\" cx=\"27.6638\" cy=\"-90\" rx=\"27.8228\" ry=\"18\"/>\n",
"<text text-anchor=\"middle\" x=\"27.6638\" y=\"-85.8\" font-family=\"Times,serif\" font-size=\"14.00\" fill=\"#000000\">start</text>\n",
"</g>\n",
"<!-- goal -->\n",
"<g id=\"node2\" class=\"node\">\n",
"<title>goal</title>\n",
"<ellipse fill=\"none\" stroke=\"#000000\" cx=\"27.6638\" cy=\"-18\" rx=\"27.8286\" ry=\"18\"/>\n",
"<text text-anchor=\"middle\" x=\"27.6638\" y=\"-13.8\" font-family=\"Times,serif\" font-size=\"14.00\" fill=\"#000000\">goal</text>\n",
"</g>\n",
"<!-- start&#45;&gt;goal -->\n",
"<g id=\"edge1\" class=\"edge\">\n",
"<title>start-&gt;goal</title>\n",
"<path fill=\"none\" stroke=\"#000000\" d=\"M27.6638,-71.8314C27.6638,-64.131 27.6638,-54.9743 27.6638,-46.4166\"/>\n",
"<polygon fill=\"#000000\" stroke=\"#000000\" points=\"31.1639,-46.4132 27.6638,-36.4133 24.1639,-46.4133 31.1639,-46.4132\"/>\n",
"</g>\n",
"</g>\n",
"</svg>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"Javascript(\"\"\"\n",
" var dot=`\n",
" digraph{\n",
" start->goal;\n",
" }`;\n",
" window.vizDrawModule.drawDot(dot, this);\n",
"\"\"\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.8.4"
}
},
"nbformat": 4,
"nbformat_minor": 4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment