| 1 | > **Warning** |
| 2 | > |
| 3 | > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. |
| 4 | > |
| 5 | > ## Please edit the corresponding file in [/packages/mermaid/src/docs/ecosystem/tutorials.md](../../packages/mermaid/src/docs/ecosystem/tutorials.md). |
| 6 | |
| 7 | # Tutorials |
| 8 | |
| 9 | This is a list of publicly available Tutorials for using Mermaid.JS and is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML. |
| 10 | |
| 11 | **Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.** |
| 12 | |
| 13 | For most purposes, you can use the [Live Editor](https://mermaid.live), to quickly and easily render a diagram. |
| 14 | |
| 15 | ## Live-Editor Tutorials |
| 16 | |
| 17 | The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0. |
| 18 | |
| 19 | [Chris Chinchilla: Hands on - Text-based diagrams with Mermaid](https://www.youtube.com/watch?v=4_LdV1cs2sA) |
| 20 | |
| 21 | [GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s) |
| 22 | |
| 23 | [GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE) |
| 24 | |
| 25 | [World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS](https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s) |
| 26 | |
| 27 | [Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8) |
| 28 | |
| 29 | ## Mermaid with OpenAI |
| 30 | |
| 31 | [Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:](https://medium.com/@elle.neal_71064/mind-mapping-with-ai-an-accessible-approach-for-neurodiverse-learners-1a74767359ff), [Demo:](https://databutton.com/v/jk9vrghc) |
| 32 | |
| 33 | ## Mermaid with HTML |
| 34 | |
| 35 | Examples are provided in [Getting Started](../intro/getting-started.md) |
| 36 | |
| 37 | **CodePen Examples:** |
| 38 | |
| 39 | <https://codepen.io/CarlBoneri/pen/BQwZzq> |
| 40 | |
| 41 | <https://codepen.io/tdkn/pen/vZxQzd> |
| 42 | |
| 43 | <https://codepen.io/janzeteachesit/pen/OWWZKN> |
| 44 | |
| 45 | ## Mermaid with Text Area |
| 46 | |
| 47 | <https://codepen.io/Ryuno-Ki/pen/LNxwgR> |
| 48 | |
| 49 | ## Mermaid in open source docs |
| 50 | |
| 51 | [K8s.io Diagram Guide](https://kubernetes.io/docs/contribute/style/diagram-guide/) |
| 52 | |
| 53 | [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/) |
| 54 | |
| 55 | ## Jupyter / Python Integration with mermaid-js |
| 56 | |
| 57 | 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`). |
| 58 | |
| 59 | ```python |
| 60 | import base64 |
| 61 | import io, requests |
| 62 | from IPython.display import Image, display |
| 63 | from PIL import Image as im |
| 64 | import matplotlib.pyplot as plt |
| 65 | |
| 66 | def mm(graph): |
| 67 | graphbytes = graph.encode("utf8") |
| 68 | base64_bytes = base64.urlsafe_b64encode(graphbytes) |
| 69 | base64_string = base64_bytes.decode("ascii") |
| 70 | img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content)) |
| 71 | plt.imshow(img) |
| 72 | plt.axis('off') # allow to hide axis |
| 73 | plt.savefig('image.png', dpi=1200) |
| 74 | |
| 75 | mm(""" |
| 76 | graph LR; |
| 77 | A--> B & C & D |
| 78 | B--> A & E |
| 79 | C--> A & E |
| 80 | D--> A & E |
| 81 | E--> B & C & D |
| 82 | """) |
| 83 | ``` |
| 84 | |
| 85 | **Output** |
| 86 | |
| 87 |  |
| 88 | |
| 89 | <!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes imshow savefig ---> |
| 90 | |