Update tutorials.md

packages/mermaid/src/docs/ecosystem/tutorials.md

@@ -42,16 +42,7 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR
 
 ## Mermaid in open source docs
 
-[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)
+[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)import base64
-
-[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
-
-## Jupyter Integration with mermaid-js
-
-Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
-
-```python
-import base64
 from IPython.display import Image, display
 import matplotlib.pyplot as plt
 
@@ -61,6 +52,28 @@ def mm(graph):
     base64_string = base64_bytes.decode("ascii")
     display(Image(url="https://mermaid.ink/img/" + base64_string))
 
+[K8s.dev blog: Improve your documentation with Mermaid.js diagrams](https://www.kubernetes.dev/blog/2021/12/01/improve-your-documentation-with-mermaid.js-diagrams/)
+
+## Jupyter / Python Integration with mermaid-js
+
+Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook and save it as *.png* image with the stated resolution (in this example, `dpi=1200`).
+
+```python
+import base64
+import io, requests
+from IPython.display import Image, display
+from PIL import Image as im
+import matplotlib.pyplot as plt
+
+def mm(graph):
+    graphbytes = graph.encode("utf8")
+    base64_bytes = base64.urlsafe_b64encode(graphbytes)
+    base64_string = base64_bytes.decode("ascii")
+    img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
+    plt.imshow(img)
+    plt.axis('off') # allow to hide axis
+    plt.savefig('image.png', dpi=1200)
+
 mm("""
 graph LR;
     A--> B & C & D;
@@ -73,6 +86,6 @@ graph LR;
 
 **Output**
 
-![Example graph of the Python integration](img/python-mermaid-integration.png)
+![Example graph of the Python integration](img/python-mermaid-integration-updated.png)
 
 <!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->