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