

Draw.IO Extension

In my ENGR114 class, students learn how to construct flow charts that describe the way a program runs. Students also use flowcharts to plan how a program will run. We can provide students access to a flow chart drawing program right in JupyterHub called Draw.IO. Draw.IO can be added to our JuptyerHub deployment as a JupyterLab extension.

• Draw.IO Extension
  • Install nodejs
  • Install Draw.IO extension for JupyterLub
  • Restart JupyterHub and test it out
  • Summary

Install nodejs

Ensure that nodejs is installed in the (jupyterhub) virtual environment. Nodejs is needed to install the Draw.IO JupyterLab extension.

$ sudo systemctl stop jupyterhub
$ conda activate jupyterhub
(jupyterhub)$ conda install -c conda-forge nodejs

Install Draw.IO extension for JupyterLub

Type another conda install line to install the Draw.IO extension for JupyterLab.

(jupyterhub)$ jupyter labextension install jupyterlab-drawio

Restart JupyterHub and test it out

$ sudo systemctl start jupyterhub
$ sudo systemctl status jupyterhub
[Ctrl]+[c] to exit

Below are some screen captures of the Draw.io extension in action. Students need to click the [Diagram] icon in the JupyterLab [Launcher] window to open a new Draw.IO drawing.

Summary

Draw.io is a drawing program students can use to create flow charts. Draw.io can be installed as a JupyterLab extension in our JupyterHub deployment. To install Draw.io into JupyterHub, first install nodejs and then install the Draw.io extension.