# How to display graph with MathJax in jupyter notebook?

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:

%%dot
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:

Any idea what I can do to fix this?

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.