marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-30 20:59:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6265 from Mandzhi/Mandzhi-patch-2

Browse Source 
Update tutorials.md
This commit is contained in:
Sidharth Vinod
2025-02-13 19:47:54 +00:00
committed by GitHub
parent f408e938d4 af6e2b4cb6
commit 8145199203
4 changed files with 28 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/ecosystem/img/python-mermaid-integration-updated.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 256 KiB

23
docs/ecosystem/tutorials.md
View File

@@ -52,28 +52,33 @@ Examples are provided in [Getting Started](../intro/getting-started.md)
[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/) [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 ## 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. 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 ```python
import base64 import base64
import io, requests
from IPython.display import Image, display from IPython.display import Image, display
from PIL import Image as im
import matplotlib.pyplot as plt import matplotlib.pyplot as plt
def mm(graph): def mm(graph):
graphbytes = graph.encode("utf8") graphbytes = graph.encode("utf8")
base64_bytes = base64.urlsafe_b64encode(graphbytes) base64_bytes = base64.urlsafe_b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii") base64_string = base64_bytes.decode("ascii")
display(Image(url="https://mermaid.ink/img/" + base64_string)) 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(""" mm("""
graph LR; graph LR;
A--> B & C & D; A--> B & C & D
B--> A & E; B--> A & E
C--> A & E; C--> A & E
D--> A & E; D--> A & E
E--> B & C & D; E--> B & C & D
""") """)
``` ```
@@ -81,4 +86,4 @@ graph LR;
![Example graph of the Python integration](img/python-mermaid-integration.png) ![Example graph of the Python integration](img/python-mermaid-integration.png)
<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes ---> <!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes imshow savefig --->

BIN
packages/mermaid/src/docs/ecosystem/img/python-mermaid-integration-updated.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 256 KiB

23
packages/mermaid/src/docs/ecosystem/tutorials.md
View File

@@ -46,28 +46,33 @@ https://codepen.io/Ryuno-Ki/pen/LNxwgR
[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/) [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 ## 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. 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 ```python
import base64 import base64
import io, requests
from IPython.display import Image, display from IPython.display import Image, display
from PIL import Image as im
import matplotlib.pyplot as plt import matplotlib.pyplot as plt
def mm(graph): def mm(graph):
graphbytes = graph.encode("utf8") graphbytes = graph.encode("utf8")
base64_bytes = base64.urlsafe_b64encode(graphbytes) base64_bytes = base64.urlsafe_b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii") base64_string = base64_bytes.decode("ascii")
display(Image(url="https://mermaid.ink/img/" + base64_string)) 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(""" mm("""
graph LR; graph LR;
A--> B & C & D; A--> B & C & D
B--> A & E; B--> A & E
C--> A & E; C--> A & E
D--> A & E; D--> A & E
E--> B & C & D; E--> B & C & D
""") """)
``` ```
@@ -75,4 +80,4 @@ graph LR;
![Example graph of the Python integration](img/python-mermaid-integration.png) ![Example graph of the Python integration](img/python-mermaid-integration.png)
<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes ---> <!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes imshow savefig --->