チュートリアル

これは、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: 図をコードで記述できますか？

OpenAIによるMermaid

Elle Neal: AIによるマインドマッピング：神経多様性学習者向けのアクセス可能なアプローチチュートリアル:、 デモ:

HTMLによるMermaid

はじめにに例が記載されています

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図でドキュメントを改善する

mermaid-jsを使用したJupyter統合

これは、mermaid.inkサービスを使用してJupyterノートブックにグラフを表示する、mermaid-jsを使用した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;
""")

出力