教程
这是一个公开可用的教程列表，用于使用Mermaid.JS，旨在作为使用Live Editor生成图表并通过HTML部署Mermaid.JS的基本介绍。
请注意，这些教程可能显示的是较旧的界面，但实时编辑器的使用方式大体上是相同的。
在大多数情况下，您可以使用Live Editor，快速轻松地渲染图表。
实时编辑器教程
从8.7.0版本开始，Live-Editor生成的定义也是向后兼容的。
Chris Chinchilla: 实践 - 使用Mermaid创建基于文本的图表
GitLab 无过滤：Emilie 在手册中添加了一个美人鱼图
World of Zero: 我学习如何在Mermaid.JS中构建流程图和信号图
Mermaid 与 OpenAI
Elle Neal: 使用AI进行思维导图：神经多样性学习者的可访问方法教程:, 演示:
Mermaid 与 HTML
示例在入门指南中提供
CodePen 示例：
https://codepen.io/CarlBoneri/pen/BQwZzq
https://codepen.io/tdkn/pen/vZxQzd
https://codepen.io/janzeteachesit/pen/OWWZKN
Mermaid 与文本区域
https://codepen.io/Ryuno-Ki/pen/LNxwgR
开源文档中的Mermaid
K8s.dev 博客：使用 Mermaid.js 图表改进您的文档
Jupyter 与 mermaid-js 的集成
这是一个Python与mermaid-js集成的示例，它使用mermaid.ink服务，在Jupyter笔记本中显示图表。
python
import base64
from IPython.display import Image, display
import matplotlib.pyplot as plt
def mm(graph):
graphbytes = graph.encode("utf8")
base64_bytes = base64.urlsafe_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;
""")输出
