教程

【Tutorials】

这是一个公开可用的 Mermaid.JS 教程列表，旨在作为使用实时编辑器生成图表以及通过 HTML 部署 Mermaid.JS 的基础入门介绍。

【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.】

请注意，这些教程可能显示的是较旧的界面，但实时编辑器的使用方法基本相同。

在大多数情况下，你可以使用 Live Editor 来快速轻松地渲染图表。

【For most purposes, you can use the Live Editor, to quickly and easily render a diagram.】

实时编辑器教程

【Live-Editor Tutorials】

从版本 8.7.0 开始，通过实时编辑器生成的定义也向后兼容。

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

Chris Chinchilla：实操 - 使用 Mermaid 创建基于文本的图表

GitLab 无过滤：如何创建 Mermaid 图

GitLab 无过滤：Emilie 向手册添加了一个 Mermaid 图表

零世界：我学习如何使用 Mermaid.JS 制作流程图和信号图

Eddie Jaoude：你能编程你的图表吗？

与 OpenAI 的 Mermaid

【Mermaid with OpenAI】

Elle Neal: 使用 AI 进行思维导图：神经多样性学习者的易访问方法教程, 演示：

使用 HTML 的 Mermaid

【Mermaid with HTML】

示例在 入门指南 中提供

【Examples are provided in Getting Started】

CodePen 示例：

https://codepen.io/CarlBoneri/pen/BQwZzq

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

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

带文本区域的 Mermaid

【Mermaid with Text Area】

https://codepen.io/Ryuno-Ki/pen/LNxwgR

开源文档中的 Mermaid

【Mermaid in open source docs】

K8s.io 图表指南

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

Jupyter / Python 与 mermaid-js 的集成

【Jupyter / Python Integration with mermaid-js】

这是一个 Python 与 mermaid-js 集成的示例，它使用 mermaid.ink 服务，在 Jupyter 注意本中显示图表，并将其保存为指定分辨率的 .png 图片（在此示例中，dpi=1200）。

【Here's an example of Python integration with mermaid-js which uses the mermaid.ink service, that displays the graph in a Jupyter notebook and save it as .png image with the stated resolution (in this example, 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
""")

输出