Mermaidを使ってみよう！

2025年2月14日 2025年4月16日

msg15

はじめに

みなさまこんにちは。
今回使用してみるツールは、Mermaidというツールです。Mermaidは、テキストから図を作成するツールで、今回取り上げるER図はもちろん、フローチャート、シーケンス図、クラス構成図、状態遷移図などが作成可能です。

Mermaidとは？

Mermaidとは、前述したとおりER図はもちろん、グラフ、シーケンス図などをテキストから作成することができるツールです。

出力形式としては、PNG、SVG、などです。こちらのライブエディターから作成した図は出力可能です。
ライブエディター：https://mermaid.live/

初期表示ではフローチャートのコーディングサンプルが設定されていると思います。
下記のような例が示されていますね。

flowchart TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]

ここで、一つ一つかみ砕いてみます。flowchartはわかると思います。どのような図を作成するのか宣言するのですね。ER図ではerDiagramを、円グラフではpie とします。
続いて、TDです。TOP to DOWNというの略だと思いますが、上から下に向けて描画していきます（TBでも可能です。）。左から右としたい場合は、LRとします（LIGHT to LEFT）。逆に下（BOTTOM）から上方向はBTとします。右から左はRLとします。
A[Christmas] はノード（四角い箱）を表します。ここではChristmasという文字列を追記する定義がされています。
--> で次のノードへ矢印を伸ばします。
矢印が何を表すか説明が必要ですよね。その際に|Get money|のように、テキストを添えます。
テキストの先には別のノードB(Go shopping)があります。こちらもノードなのですが()で括ったノードは角が丸い四角となります。
近年、アイコンが使用可能になりました。fa:xxxと入力するとアイコンを取得し表示します。
アイコン一覧：https://icones.js.org/

ノードまとめ

様々なノードをまとめてみました。

ノード名	コーディング例	見え方
通常	normal[text]
角が丸い箱	A("node")
ひし形	A{"node"}
スタジアム型	A(["node"])
二重四角	A[["node"]]
DB型	A[("node")]
円	A(("node"))
付箋	A>"node"]
ヘキサゴン	A{{"node"}}
平行四辺形	A[/"node"/]
平行四辺形２	A[\"node"\]
台形	A[/"node"\]
逆さ台形	A[\"node"/]
書類	A@{shape: docs, label: "node"}