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.
Note that these tutorials might display an older interface, but the usage of the live-editor will largely be the same.
For most purposes, you can use the Live Editor, to quickly and easily render a diagram.
The definitions that can be generated the Live-Editor are also backwards-compatible as of version 8.7.0.
Mermaid with OpenAI
Mermaid with HTML
Examples are provided in Getting Started
Mermaid with Text Area
Mermaid in open source docs
Jupyter Integration with mermaid-js
Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook.
import base64 from IPython.display import Image, display import matplotlib.pyplot as plt def mm(graph): graphbytes = graph.encode("ascii") base64_bytes = base64.b64encode(graphbytes) base64_string = base64_bytes.decode("ascii") display(Image(url="https://mermaid.ink/img/" + base64_string)) mm(""" graph LR; A--> B & C & D; B--> A & E; C--> A & E; D--> A & E; E--> B & C & D; """)