draw Graphviz(dot) with Viz.js on Jupyter notebook.

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
}