Notion の Mermaid に関する Tips : hkob の雑記録 (327)

はじめに

hkob の雑記録の第327回目は、Notion 座談会の最後に話題になった Mermaid に関する Tips をいくつか紹介したいと思います。

theme の設定

最初に theme を気にしたのは、mindmap が登場した時です。2023年の5月とのこと。

Notion の mermaid がアップデートしたので、mindmap が使えるようになりました。#Notion #notiontwt pic.twitter.com/eSkNDaXnrc

— hkob｜Notion Ambassador (@hkob) 2023年5月1日

dark mode の環境だといいのですが、light mode の環境だと上の方の枝が見にくい状態でした。

mindmap のデフォルトテーマ

その頃にいろいろ調べたところ、%%{init:…}%% で theme を設定できることがわかりました。forest のテーマはマインドマップ以外でもいい感じの色味になることが多く、light mode で公開するページではよく使っていました(dark mode だと文字が黒くて使いにくいです)。

%%{init:{'theme':'forest'}}%%
mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

その時の X のポストです。

Notion の mermaid はデフォルトで Notion の色調に合わせたグレースケールに設定されているのだけど、最近追加された timeline や mindmap 用には調整されていません。とりあえず、init で default や forest などに設定してみてください。#Notion #notiontwt pic.twitter.com/AsuV3PiJrE

— hkob｜Notion Ambassador (@hkob) 2023年5月4日

theme に使えるもの(default, neutral, dark, forest, base) の説明はこちらに掲載されています。

mermaid.js.org

layout の設定

Notion における Mermaid のレイアウトはしばらく標準の dagre が使われていたのですが、2025年10月に ELK に変更されました。ELK は配置が優先されるレイアウトのため、ここに挙げた ER 図やクラス図にはちょうどいいです。

Notion の Mermaid の Version が上がったのか、ER 図のレイアウトが変わったようです。線が縦横に整理されるようになっています。#Notion #Mermaid pic.twitter.com/RjOzH3F4WY

— hkob｜Notion Ambassador (@hkob) 2025年10月26日

ただ、フローチャートは順序に意味を持つので、配置を調整される ELK では残念な表示が行われることが多いようです。当初、subgraph などで調整しようと思ったのですが、やはり ELK ではどうしようもないことがわかりました。

ただ、ループを含むフローチャートはいい感じにレイアウトされてしまい、白い以前のものとは異なりちょっと残念な形になってしまいました。start と stop だけは特別にできればいいのですが。

仕方なく subgraph で無理矢理そこだけ対応しました。 pic.twitter.com/clYl6s6t1y

— hkob｜Notion Ambassador (@hkob) 2025年10月26日

結局、mermaid の config で ELK レイアウトの代わりに dagre レイアウトを適用する方が楽なことに気づきました。

とりあえずループを含んで変な感じになるようであれば、中身を頑張るより必要な時だけ dagre に戻すのが楽かもしれないと思いました。#Notion #Mermaid pic.twitter.com/l1NCnyBK0D

— hkob｜Notion Ambassador (@hkob) 2025年10月26日

やり方ですが、このポストにあるように先頭に以下の config を追記します。

---
config:
  layout: dagre
---

こちらについては、先日のブログで紹介しています。

hkob.hatenablog.com

init と config の違い

init と config で記述方法が異なり何が違うのかよくわからなかったので、Notion AI に「Notion の mermaid で init と config の違いを教えて」と聞いてみました。

Notion の mermaid で出てくる init と config は、どの設定をどこまでの範囲に効かせるかが違います。

---

ざっくり違い

• init
  • 図の「初期設定」をまとめて渡す入り口
  • テーマ・テーマ変数・セキュリティ設定・各種コンフィグを受け取る「外側の箱」
• config
  • init の中で使う「さらに細かい挙動設定」用のオブジェクト
  • フローチャートやシーケンス図など図の種類ごとの細かいオプションを書く場所

イメージとしては：

init = mermaid 全体に渡す設定パック

その中の config = 図タイプごとの詳細設定

この後に細かい設定方法などが書かれていましたが省略しました。とりあえず theme に関しては init でしかできないようなので、この形だけ覚えていればよさそうです。

画像の表示とリンクの追加

今は、埋め込んだ画像にリンクを追加することができるので、画像ボタンを生成することができます。これを使って、次ページへのリンクを作ったり、X のプロフィールへのリンクを作ったりできて便利になりました。

Image block へのリンク追加

以前はこのようなリンクを作ることができなかったので、mermaid で肩代わりをしていたことがありました。ここでは、Notion の左側にある「ホーム」「ミーティング」「Notion AI」タブへのリンクをアイコン化したものです。画像は外部サイトにあるものしか使えないのですが、Notion のアイコンは外部の URL がわかっているので、アイコンにあるものは全て利用可能です。Notion との統一性を取るにはアイコンを使うのは便利かなと思います。

ホーム、ミーティング、Notion AI へのボタンリンク

graph TD
  home@{ img: "https://www.notion.so/icons/home_gray.svg", label: "home", pos: "t", constraint: "on" }
  click home "https://notion.so/home"
  meet@{ img: "https://www.notion.so/icons/microphone_gray.svg", label: "meet", pos: "t", constraint: "on" }
  click meet "https://notion.so/meet"
  ai@{ img: "https://www.notion.so/icons/thinking_gray.svg", label: "AI", pos: "t", constraint: "on" }
  click ai "https://notion.so/ai"

今はこのような使い方をすることはあまりないかと思いますが、設計書のフローチャートなどの中で、click で別のフローチャートへのリンクを設定するなどまだ使い道はいろいろとありそうです。

新しい Diagram など

最近追いかけていませんでしたが、さらに Diagram が追加されていますね。

Packet diagram

---
title: "TCP Packet"
---
packet
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"
96-99: "Data Offset"
100-105: "Reserved"
106: "URG"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"

Packet diagram

Radar diagram

---
title: "Grades"
config:
  radar:
    axisScaleFactor: 0.25
    curveTension: 0.1
  theme: base
  themeVariables:
    cScale0: "#FF0000"
    cScale1: "#00FF00"
    cScale2: "#0000FF"
    radar:
      curveOpacity: 0
---
radar-beta
  axis m["Math"], s["Science"], e["English"]
  axis h["History"], g["Geography"], a["Art"]
  curve a["Alice"]{85, 90, 80, 70, 75, 90}
  curve b["Bob"]{70, 75, 85, 80, 90, 85}

  max 100
  min 0

Radar diagram

Architecture diagram

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

Architecture diagram

Treemap diagram

treemap-beta
"Products"
    "Electronics"
        "Phones": 50
        "Computers": 30
        "Accessories": 20
    "Clothing"
        "Men's": 40
        "Women's": 40

Treemap diagram

おわりに

mermaid もたまにオフィシャルを観にいかないといけないですね。今回も新しい Diagram がいくつか追加されていて楽しくなりました。

hkob.notion.site