marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update tutorials.md

Browse Source
This commit is contained in:
Radmila M.
2025-02-10 13:24:38 +03:00
committed by GitHub
parent 8dd0e7a794
commit 4a19740aea
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)
<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->