教程

这是 Mermaid.JS 的公开教程列表，旨在为使用实时编辑器生成图表以及通过 HTML 部署 Mermaid.JS 提供基本介绍。

请注意，这些教程可能显示的是旧版界面，但实时编辑器的用法大致相同。

对于大多数情况，您可以使用 实时编辑器，来快速轻松地渲染图表。

实时编辑器教程

实时编辑器中可生成的定义从 8.7.0 版本起也向后兼容。

Chris Chinchilla: 实操 - 使用 Mermaid 进行基于文本的图表绘制

GitLab Unfiltered: 如何创建 Mermaid 图表

GitLab Unfiltered: Emilie 为手册添加了 Mermaid 图表

World of Zero: 我学会了如何在 Mermaid.JS 中构建流程图和信号图

Eddie Jaoude: 你能编写你的图表吗？

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.io 图表指南

K8s.dev 博客：使用 Mermaid.js 图表改进您的文档

Jupyter / Python 与 mermaid-js 集成

这是一个 Python 与 mermaid-js 集成的示例，它使用了 mermaid.ink 服务，该服务在 Jupyter Notebook 中显示图表，并将其保存为 * .png * 图像，分辨率如所述（在本例中为 dpi=1200）。

import base64
import io, requests
from IPython.display import Image, display
from PIL import Image as im
import matplotlib.pyplot as plt

def mm(graph):
    graphbytes = graph.encode("utf8")
    base64_bytes = base64.urlsafe_b64encode(graphbytes)
    base64_string = base64_bytes.decode("ascii")
    img = im.open(io.BytesIO(requests.get('https://mermaid.ink/img/' + base64_string).content))
    plt.imshow(img)
    plt.axis('off') # allow to hide axis
    plt.savefig('image.png', dpi=1200)

mm("""
graph LR;
    A--> B & C & D
    B--> A & E
    C--> A & E
    D--> A & E
    E--> B & C & D
""")

输出