mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
mermaid/docs/Tutorials.md

67 lines
2.0 KiB
Markdown
Raw Normal View History

Fixed broken links and syntax in the document
2020-09-07 08:02:09 +02:00
# Tutorials
Create Tutorials.md
2020-08-22 03:41:57 +02:00
feat: Auto generation of Edit this Page
2020-11-15 03:28:47 +01: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.
Update Tutorials.md
2020-10-28 08:20:35 +01:00
Update Tutorials.md
2021-03-06 09:33:21 +01:00
**Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.
feat: Auto generation of Edit this Page
2020-11-15 03:28:47 +01: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-22 03:41:57 +02:00
Fixed broken links and syntax in the document
2020-09-07 08:02:09 +02: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-22 03:41:57 +02: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-22 03:41:57 +02: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-22 03:41:57 +02: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-22 03:41:57 +02: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-22 03:41:57 +02:00
Updating minor changes on Docs
2020-11-05 19:16:12 +01:00
## Mermaid with HTML
Fixed broken links and syntax in the document
2020-09-07 08:02:09 +02:00
Examples are provided in [Gettting Started](n00b-gettingStarted.md)
Create Tutorials.md
2020-08-22 03:41:57 +02:00
Fixed broken links and syntax in the document
2020-09-07 08:02:09 +02:00
**CodePen Examples:**
Create Tutorials.md
2020-08-22 03:41:57 +02:00
https://codepen.io/CarlBoneri/pen/BQwZzq
https://codepen.io/tdkn/pen/vZxQzd
https://codepen.io/janzeteachesit/pen/OWWZKN
Updating minor changes on Docs
2020-11-05 19:16:12 +01:00
## Mermaid with Text Area
Create Tutorials.md
2020-08-22 03:41:57 +02:00
Fixed broken links and syntax in the document
2020-09-07 08:02:09 +02:00
https://codepen.io/Ryuno-Ki/pen/LNxwgR
#1791 Update docs for Python integration with Mermaid
2020-11-26 19:18:12 +01:00
## Python Integration with mermaid-js
Here's an example of python integration with mermaid-js which uses the mermaid.ink service.
This is also working with colab and jupyter lab notebooks.
```python
import base64
Fix issue in python sample source in Tutorials.md Updated python sample source in Tutorials to make it work. Before this change problem was: ``` C:\Users\user>python mermaid.py Traceback (most recent call last): File "mermaid.py", line 3, in <module> graphbytes = graph.encode("ascii") NameError: name 'graph' is not defined ```
2020-12-13 23:10:06 +01:00
import requests, io
from PIL import Image
import matplotlib.pyplot as plt
#1791 Update docs for Python integration with Mermaid
2020-11-26 19:18:12 +01:00
graph = """
graph LR;
A--> B & C & D;
B--> A & E;
C--> A & E;
D--> A & E;
E--> B & C & D;
"""
Fix issue in python sample source in Tutorials.md Updated python sample source in Tutorials to make it work. Before this change problem was: ``` C:\Users\user>python mermaid.py Traceback (most recent call last): File "mermaid.py", line 3, in <module> graphbytes = graph.encode("ascii") NameError: name 'graph' is not defined ```
2020-12-13 23:10:06 +01:00
graphbytes = graph.encode("ascii")
#1791 Update docs for Python integration with Mermaid
2020-11-26 19:18:12 +01:00
base64_bytes = base64.b64encode(graphbytes)
base64_string = base64_bytes.decode("ascii")
img = Image.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
plt.imshow(img)
```
Fix issue in python sample source in Tutorials.md Updated python sample source in Tutorials to make it work. Before this change problem was: ``` C:\Users\user>python mermaid.py Traceback (most recent call last): File "mermaid.py", line 3, in <module> graphbytes = graph.encode("ascii") NameError: name 'graph' is not defined ```
2020-12-13 23:10:06 +01:00
#1791 Update docs for Python integration with Mermaid
2020-11-26 19:18:12 +01:00
**Output**
![image](img/python-mermaid-integration.png)