mermaid/docs/Tutorials.md

# Tutorials

**Edit this Page** [![N|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md)
This is  list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.  

For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram. 


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

[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)

[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)

[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)

[Eddie Jaoude: Can you code your diagrams?](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
Fixed broken links and syntax in the document 2020-09-07 14:02:09 +08:00			`# Tutorials`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Update Tutorials.md 2020-10-28 00:20:20 -07:00			`Edit this Page [![N\|Solid](img/GitHub-Mark-32px.png)](https://github.com/mermaid-js/mermaid/blob/develop/docs/Tutorials.md)`
Update Tutorials.md 2020-10-09 02:14:01 -07:00			`This is list of publicly available Tutorials for using Mermaid.JS . This is intended as a basic introduction for the use of the Live Editor for generating diagrams, and deploying Mermaid.JS through HTML.`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Update Tutorials.md 2020-10-09 02:14:01 -07:00			`For most purposes, you can use the [Live Editor](https://mermaid-js.github.io/mermaid-live-editor), to quickly and easily render a diagram.`
Create Tutorials.md 2020-08-21 18:41:57 -07:00

Fixed broken links and syntax in the document 2020-09-07 14:02:09 +08:00			`## Live-Editor Tutorials`
			`The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Fixing various typos/misspellings in documentation 2020-10-14 14:41:15 +02:00			`[GitLab Unfiltered: How to Create Mermaid Diagrams](https://www.youtube.com/watch?v=SQ9QmuTHuSI&t=438s)`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Fixing various typos/misspellings in documentation 2020-10-14 14:41:15 +02:00			`[GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook](https://www.youtube.com/watch?v=5RQqht3NNSE)`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Fixing various typos/misspellings in documentation 2020-10-14 14:41:15 +02:00			`[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)`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Fixing various typos/misspellings in documentation 2020-10-14 14:41:15 +02:00			`[Eddie Jaoude: Can you code your diagrams?](https://www.youtube.com/watch?v=9HZzKkAqrX8)`
Create Tutorials.md 2020-08-21 18:41:57 -07:00

Fixed broken links and syntax in the document 2020-09-07 14:02:09 +08:00			`## Mermaid with HTML:`
			`Examples are provided in [Gettting Started](n00b-gettingStarted.md)`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Fixed broken links and syntax in the document 2020-09-07 14:02:09 +08:00			`CodePen Examples:`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
			`https://codepen.io/CarlBoneri/pen/BQwZzq`

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

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


Fixed broken links and syntax in the document 2020-09-07 14:02:09 +08:00			`## Mermaid with Text Area:`
Create Tutorials.md 2020-08-21 18:41:57 -07:00
Fixed broken links and syntax in the document 2020-09-07 14:02:09 +08:00			`https://codepen.io/Ryuno-Ki/pen/LNxwgR`