From 4a19740aea90a20447500e1dfab7a3dae8a26e4f Mon Sep 17 00:00:00 2001 From: "Radmila M." Date: Mon, 10 Feb 2025 13:24:38 +0300 Subject: [PATCH] Update tutorials.md --- .../mermaid/src/docs/ecosystem/tutorials.md | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/mermaid/src/docs/ecosystem/tutorials.md b/packages/mermaid/src/docs/ecosystem/tutorials.md index 7258361bf..82c272a4e 100644 --- a/packages/mermaid/src/docs/ecosystem/tutorials.md +++ b/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.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 +[K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/)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)