# Tutorials

This is  list of publicly available Tutorials in Mermaid. This is intended as a basic introduction for the use of the Live Editor and HTML with mermaid.  

For the purposes, the Live-Editor is capable of taking care of all diagramming needs, and these are the most common use cases for it.


## Live-Editor Tutorials
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.

https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s

https://www.youtube.com/watch?v=5RQqht3NNSE

https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s

https://www.youtube.com/watch?v=9HZzKkAqrX8

https://www.youtube.com/watch?v=7_2IroEs6Is&t=207s

https://www.youtube.com/watch?v=9HZzKkAqrX8

## Mermaid with HTML:
Examples are provided in [Gettting Started](n00b-gettingStarted.md)

**CodePen Examples:**

https://codepen.io/CarlBoneri/pen/BQwZzq

https://codepen.io/tdkn/pen/vZxQzd

https://codepen.io/janzeteachesit/pen/OWWZKN


## Mermaid with Text Area:

https://codepen.io/Ryuno-Ki/pen/LNxwgR