I am trying to create a jupyter-notebook with a graphical depiction of a neural network. For starters, I am trying to display a simple network that evaluates a boolean NOT operator.

I am using the %%dot cell magic that is documented at https://metakernel.readthedocs.io/en/latest/source/README.html?v=20190725125340#id13 and I have a code cell in my notebook with the following contents:

digraph NOT {
  rankdir = LR
  node [shape="circle"]
  x0 [label="+1"]
  x1 [label="$x_1$"]
  h [shape="plain"]
  y1 [color="coral" label=""]
  x0 -> y1 [label="10"]
  x1 -> y1 [label="-20"]
  y1 -> h [label="g()"]

This is rendered into an SVG that is displayed as the output of the code cell. However, for the label on the x1 node I've used $x_1$, which I'd like to render as $x_1$ (presumably by MathJax, as it does in the Markdown cells). Unfortunately, I just get a blank node with no label, like this:

Picture of neural network configuration for NOT

Any idea what I can do to fix this?


1 Answer 1


I ended up creating a new magic, based on the %dot magic, called %dotMJ. It works by looking for <text> objects in the SVG (corresponding to labels in GV), checking if they are LaTeX code (start/end with $), and if so converting them to a <div> and wrapping with a <foreignObject>. This allows MathJax to "see" the LaTeX code and convert it appropriately for display.

Source is available at: https://gitlab.com/jello/ML-Notebooks/blob/master/dotMJ_magic.py


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.