教程

¥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.

请注意，这些教程可能会显示较旧的界面，但在线编辑器的用法大致相同。

¥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.

在线编辑器教程

¥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.

克里斯·钦奇拉：动手实践 - 带有 Mermaid 的基于文本的图表

¥Chris Chinchilla: Hands on - Text-based diagrams with Mermaid

GitLab 未过滤：如何创建 Mermaid 图

¥GitLab Unfiltered: How to Create Mermaid Diagrams

GitLab 未过滤：艾米莉在手册中添加了 Mermaid 图

¥GitLab Unfiltered: Emilie adds a mermaid diagram to the handbook

零的世界：我学习如何在 Mermaid.JS 中构建流程图和信号图

¥World of Zero: I Learn How To Build Flowcharts and Signal Diagram's in Mermaid.JS

埃迪·贾德：你能编写你的图表吗？

¥Eddie Jaoude: Can you code your diagrams?

Mermaid 与 OpenAI

¥Mermaid with OpenAI

艾丽·尼尔：人工智能思维导图：神经多样化学习者教程的易懂方法：、演示：

¥Elle Neal: Mind Mapping with AI: An Accessible Approach for Neurodiverse Learners Tutorial:, Demo:

Mermaid 与 HTML

¥Mermaid with HTML

入门 中提供了示例

¥Examples are provided in Getting Started

CodePen 示例：

¥CodePen Examples:

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.io Diagram Guide

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

¥K8s.dev blog: Improve your documentation with Mermaid.js diagrams

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
""")

输出

¥Output