How to use Mermaid diagram in Jupyter Notebook with mermaid.ink through proxy

Question

Previously to use Mermaid in a Jupyter Notebook file, nb-mermaid should be installed using pip and then it called using built-in magic commands %%javascript as instructed here or using %%html.

Unfortunately, the result, in a Jupyter Notebook file, can not be displayed on GitHub, but will be displayed on nbviewer. It works only in a GitHub page.

Then there is another way using mermaid.ink with IPython as guide in here as follows.

import base64
from IPython.display import Image, display
import matplotlib.pyplot as plt

def mm(graph):
  graphbytes = graph.encode("ascii")
  base64_bytes = base64.b64encode(graphbytes)
  base64_string = base64_bytes.decode("ascii")
  display(
    Image(
      url="https://mermaid.ink/img/"
      + base64_string
    )
  )

mm("""
graph LR;
    A--> B & C & D;
    B--> A & E;
    C--> A & E;
    D--> A & E;
    E--> B & C & D;
""")

And it works fine and can be viewed on GitHub as in here.

But when it runs behind proxy the image, which is generated remotely on https://mermaid.ink/ and display using matplotlib, can not be displayed in a Jupyter Notebook file. Is there any solution to this problem?

Answer 1

It has now been included in JupyterLab 4.1 and Notebook 7.1

• JupyterLab 4.1 and Notebook 7.1 are here 🎉