Go back

Creating block diagram using Python in Jupyter notebook

Creating block diagram

Install the blockdiag library

We will use the blockdiag library to easily create a block diagram to insert in the Jupyter notebook.

In [1]:
!pip install blockdiag

Collecting blockdiag
  Using cached blockdiag-1.5.3-py2.py3-none-any.whl
Requirement already satisfied: webcolors in /anaconda/lib/python3.6/site-packages (from blockdiag)
Requirement already satisfied: Pillow in /anaconda/lib/python3.6/site-packages (from blockdiag)
Requirement already satisfied: setuptools in /anaconda/lib/python3.6/site-packages/setuptools-27.2.0-py3.6.egg (from blockdiag)
Requirement already satisfied: funcparserlib in /anaconda/lib/python3.6/site-packages (from blockdiag)
Requirement already satisfied: olefile in /anaconda/lib/python3.6/site-packages (from Pillow->blockdiag)
Installing collected packages: blockdiag
Successfully installed blockdiag-1.5.3

Diagram definition

First we create the folder:

In [2]:
!mkdir diagrams

mkdir: diagrams: File exists

and we create a new file inside the diagrams folder with the definition of the graph:

In [3]:
%%file diagrams/block_diagram
blockdiag {
  // Define class (list of attributes)
  class emphasis [color = lightblue, style = dashed];
  class redline [color = red, style = dotted];

  Extract -> Transform -> Load;

  // Set class to node
  Transform [class = "emphasis"];

  // Set class to edge
  Transform -> Load [class = "redline"];
}

Overwriting diagrams/block_diagram

Convert the diagram to PNG

Using the blockdiag library, we can convert the diagram from the definition to a PNG by running the blockdiag command from the command line with the graph definition as first argument:

In [4]:
!blockdiag diagrams/block_diagram

Display the PNG

By using the display functionality of the Jupyter notebook we can show the generated PNG:

In [5]:
from IPython.display import Image
Image("diagrams/block_diagram.png")
Out[5]:

Convert to slides

Jupyter has the functionality to convert a Jupyter notebook to a fancy looking presentation. By using nbconvert and with the output set to slides, the notebook will be translated to an HTML page, which will be transformed into a beautiful presentation by adding the RevealJS library.

In [6]:
!jupyter nbconvert creating_block_diagram.ipynb --to slides

[NbConvertApp] Converting notebook creating_block_diagram.ipynb to slides
[NbConvertApp] Writing 297425 bytes to creating_block_diagram.slides.html

Check for resulting HTML

After conversion we should see both the .ipynb and .html in the directory.

In [7]:
!ls -la creating_block_diagram.slides.html

-rw-r--r--  1 jitsejan  staff  297489 Jan 15 00:43 creating_block_diagram.slides.html

Retrieve RevealJS

To use Jupyter slides we need to download RevealJS to the root directory of the notebooks. We do this by cloning the reveal.js Git repository directly in the current folder.

In [ ]:
!git clone https://github.com/hakimel/reveal.js.git

fatal: destination path 'reveal.js' already exists and is not an empty directory.

Start Python webserver

Use http.server for Python 3 and SimpleHTTPServer when using Python 2 to start the server to view the HTML page.

In [ ]:
!python -m http.server 8000

Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

Check port 8000 and open the HTML page containing the slides. In this case the HTML of this notebook will be visible on http://localhost:8000/creating_block_diagram.slides.html#/.

notebook Python Jupyter blockdiagram presentation
Go back