如何通过代理在 Jupyter Notebook 中使用 mermaid.ink 中的美人鱼图

Question

以前要在 Jupyter Notebook 文件中使用 Mermaid，应使用 nb-mermaid

 安装 

pip，然后按照此处

的说明使用内置魔法命令 

%%javascript 或使用 %%html

 进行调用。

不幸的是，结果，在Jupyter Notebook文件中，

无法显示在GitHub上，但会显示在nbviewer上。它仅适用于 GitHub 页面。

还有另一种方法，使用

mermaid.ink

 和 IPython 作为

here的指导，如下所示。

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;
""")

它工作正常，可以在 GitHub 上查看，如

here。

但是，当它在代理后面运行时，在

https://mermaid.ink/

 上远程生成并使用 

matplotlib

 显示的图像无法在 Jupyter Notebook 文件中显示。这个问题有办法解决吗？

Answer 1

现已包含在 JupyterLab 4.1 和 Notebook 7.1 中

• JupyterLab 4.1 和 Notebook 7.1 在这里 🎉

Answer 2

这将起作用，尽管它将美人鱼图渲染为静态图像，而不是“实时”SVG。

import base64, requests, io
from PIL import Image
import matplotlib.pyplot as plt

# Example Mermaid code
graph = """
graph TD
    A["A"] -->|10| B["B"]
    A["A"] -->|5| C["C"]
    B["B"] -->|8| D["D"]
    C["C"] -->|2| D["D"]
    D["D"] -->|6| E["E"]
"""

graphbytes = graph.encode("ascii")
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
plt.imshow(img)