Obsidian 1.15でMermaid図の描画がPeleに変わりました。互換性と--mermaid-*変数での色の変え方を確かめる

どうも！オペ部の西村祐二です！

Obsidianでは、mermaidのコードブロックにMermaidの記法を書くと、フローチャートやシーケンス図をノートの中に表示できます。

Obsidian 1.15（2026年11月2日に一般公開）で、この図の描画がmermaid.jsから、Obsidianが開発したPeleに変わりました。Peleは、Mermaidの記法をSVGにする独自実装のライブラリです。

changelogでは、この変更で良くなった点として次の4つが挙げられています。

• 図の表示が速くなる
• 図がテーマの色とフォントで描かれる
• 図がノートの幅に合わせて表示され、縮小されたときはズームとパンができる
• Peleはコードを実行できないため、確認なしで図が表示される

このうち、テーマの色での描画、ノートの幅に合わせた縮小とボタンでのズーム、確認なしの表示は、1.15.0の画面で確認できました。ダークテーマに切り替えると図の配色も変わり、横に長い図もノートの幅に収まります。表示の速さは計測していません。

描画の実装が変わったので、mermaid.js向けに書いた図やCSSスニペットがそのまま使えるかという互換性もあわせて確かめました。

1.14.5と1.15.0で同じノートを開いて比べた結果は、次のとおりでした（2026年11月11日時点、1.15.0で確認）。

この記事では、良くなった点とこれまでの書き方との互換性を画面で確かめ、図の色を変えたいときの--mermaid-*変数の使い方をまとめます。

今回の変更点

• 対象バージョン: Obsidian 1.15.0（Desktop、2026年11月2日に一般公開）
• 変更の要点（changelogより）:
  • Mermaidの図とチャートを、新しいライブラリPeleで描画します。Mermaid 12.1.0の構文に対応しています
  • 図の表示が速くなり、テーマの色とフォントで描かれます
  • 図はノートの幅に合わせて表示され、縮小されたときはズームとパンができます
  • Peleはコードを実行できないため、図は確認なしで表示されます。設定の「Show Mermaid diagrams in notes」（日本語表示では「ノートに Mermaid 図を表示」）は削除されました
  • 開発者向けに、色や角の丸み、文字の太さを指定する--mermaid-* CSS変数が追加されました。図のSVGには、Mermaidのクラスではなく、Peleの.pele-*クラスが付きます。プラグインが図を描くときに使うloadMermaid()とwindow.mermaidの描画も、Peleに切り替わりました
• Peleの互換性（Compatibilityより）: Mermaid 12.1.0に組み込まれている図の種類はすべて描画できます。ZenUMLなどの外部プラグインは対象外です。配置はPele独自で、ノードの位置や線の引き方はMermaidと異なります。Mermaidのテーマは適用されず、任意のHTMLラベルとJavaScriptのコールバックも使えません
• 同梱されているPeleのバージョン: 1.15.0のアプリ本体に含まれるPeleは1.8.0でした（lib/pele.min.jsの中のバージョン文字列で確認）。2026年11月11日時点のPeleの最新は1.13.0で、pele.runのドキュメントには、1.15.0に入っていない機能（ラベルで使えるHTMLタグの追加など）も載っています
• 公式リンク: Obsidian 1.15 Desktop changelog、Pele（GitHub）、Pele Compatibility、Pele Theming

試してみる

環境

• macOS 26.7.2（Apple Silicon）
• Obsidian 1.15.0と1.14.5。インストーラー1.12.7に、GitHubで配布されている1.15.0と1.14.5のアプリ本体を読み込ませ、普段の設定とは別の検証用フォルダから起動しました
• テスト用の保管庫に、Mermaidの図を書いたノートを4つ用意しました
• 主に閲覧モードで確認しました。ライブプレビューでも、Peleで描画されてズームボタンが付くことを1つの図で確かめています

1. 確認なしで描画され、色がテーマに追従する

次のノートを開きました。Obsidianのヘルプにある例を短くしたシーケンス図も入れています。

```mermaid
flowchart LR
  A[下書き] --> B{レビュー}
  B -->|OK| C[公開]
  B -->|修正| A
```

```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    John-->>-Alice: Hi Alice, I can hear you!
```

1.14.5では、図の位置に「この保管庫で Mermaid 図を表示しますか？」というメッセージと「許可」ボタンが表示され、押すまで図は描画されませんでした。1回押すと、ノートの2つの図が両方描画されました。1.15.0では、開いた時点で図が表示されました。主な設定タブ9つ（外観、エディタなど）を1つずつ確認すると、1.14.5のエディタ設定にあった「ノートに Mermaid 図を表示」は、1.15.0ではどのタブにもありませんでした。

描画された図を並べたのが次の画像です。左から順に、1.14.5、1.15.0（ライトテーマ）、1.15.0（ダークテーマ）です。画像上部のラベルは後から追記しました。

1.14.5は、mermaid.jsがデフォルトで使う紫系の配色でした。1.15.0では、ノードの塗りがテーマの背景色に近いグレーになり、ダークテーマに切り替えると図も暗い配色に変わりました。ダークテーマでノードの塗りに使われている変数の値を読むと、テーマの--background-secondaryと同じ#282828でした。ノードの位置や線の引き方も変わっていました。Compatibilityの説明のとおり、配置はPele独自です。

2. 色やリンクに関わる書き方の互換性

Mermaidの書き方のうち、色やリンクに関わるものを1つのノートにまとめて、両方のバージョンで開きました。画像に写っている見出し（「init でテーマを指定」など）はノートの中の見出しで、下のコードでは省略しています。

```mermaid
%%{init: {'theme': 'forest'}}%%
flowchart LR
  A[forest テーマ指定] --> B[次の工程]
```

```mermaid
flowchart LR
  A[下書き] --> B[レビュー]:::warn --> C[完了]
  style C fill:#879a39,stroke:#66800b,color:#fffcf0
  classDef warn fill:#d0a215,stroke:#ad8301
```

```mermaid
flowchart LR
  A[01 基本の図] --> B[外部リンク] --> C[コールバック]
  class A internal-link;
  click B "https://obsidian.md" "Obsidian"
  click C callback "JS関数"
```

```mermaid
flowchart LR
  A["<b>太字</b><br>改行"] --> B["<span style='color:red'>赤い文字</span>"]
```

結果は次のとおりでした。

• %%{init}%%のtheme指定: 1.14.5では緑系のforestテーマになりましたが、1.15.0では他の図と同じグレーでした。Compatibilityにも、Mermaidのテーマは適用されないと書かれています
• classDefとstyle: 1.15.0でも同じ色で塗られました。Themingによると、classDefやstyleで図の中に指定した色は固定で、テーマを切り替えても変わりません。「完了」の文字が白系なのは、styleでcolor:#fffcf0を指定したためで、1.14.5と同じでした
• ノートへのリンク: Obsidianのヘルプで紹介されているinternal-linkクラスをノードに付けると、1.15.0でもリンクになりました。リンク先はノードのラベルと同じ名前のノートで、クリックすると「01 基本の図」が開きました
• click: URLを指定したノードはリンクになりました。コールバックを指定したノードは、どちらのバージョンでもリンクになりませんでした
• ラベル内のHTML: 1.15.0でも、<b>は太字に、<br>は改行になりました。<span style='color:red'>は、1.14.5では赤くなりましたが、1.15.0では文字だけが表示され、色は通常の文字色でした。Compatibilityによると、PeleのラベルはSVGのテキストで描かれ、改行・太字・斜体には対応していますが、任意のHTMLには対応していません

3. 横に長い図は縮小されてズームでき、狭い幅では縦向きになる

10個のノードを横につないだflowchart LRを、幅1000pxのウィンドウで開きました。

1.14.5では、図の幅は約1735pxで、ノートの幅（700px）からはみ出して横スクロールが出ました。1.15.0では、図全体がノートの幅に収まるように縮小され、右端にズームのボタンが重なって表示されました。ボタンを押して拡大すると、リセットのボタンも表示されました。

画像の上の段では、最後のノードにボタンが重なっています。Peleのリリースノートによると、1.10.1で、ボタンが文字を隠す場合はその分だけ図を狭める変更が入っています。1.15.0に同梱の1.8.0には、まだ含まれていません。PeleのAPIドキュメントによると、ボタンのほかに、ピンチやCtrlまたは⌘を押しながらのホイールでも拡大でき、ドラッグで図を動かせます。今回はボタンでの拡大だけを試しています。

ウィンドウを狭くしていくと、図の向きも変わりました。図を表示する領域の幅が647pxまでは横向きのままで、637px以下ではflowchart LRの図のノードが縦に並びました。PeleのAPIドキュメントでも、640px未満では縦向きのレイアウトに切り替わる場合があるとされています。表示する領域の幅で切り替わるので、ウィンドウを分割した狭いペインでも、コードで指定したLRとは違う向きで表示される可能性があります（ペインの分割では試していません）。

4. 色を変えるなら--mermaid-*変数を使う

1.14.5までは、mermaid.jsが出力するSVGの要素を指定するCSSスニペットで、図の色を変えられました。

/* mermaid.js の要素を直接指定していたスニペット */
.mermaid .node rect { fill: #ffd6a5 !important; stroke: #e76f51 !important; }
.mermaid .flowchart-link { stroke: #e63946 !important; }

このスニペットを有効にすると、1.14.5ではノードの塗りが指定の色になりましたが、1.15.0では色が変わりませんでした。changelogにあるとおり、1.15.0の図のSVGにはMermaidのクラスではなくPeleのクラス（pele-flowchartなど）が付くので、mermaid.js向けのセレクタは当てはまりません。

1.15.0のapp.cssを確認すると、図の色は次の順に決まっていました。Obsidianがbodyに定義した22個の--mermaid-*変数が、テーマの変数を参照しています。そのうえで、Peleが読む--pele-*変数に対応付けられています。図の中のstyleとclassDefは、これらの変数で決まる色より優先されます。次の画像は自作した概念図で、公式の構成図ではありません。

主な変数と、1.15.0でのデフォルトの値は次のとおりです。用途の欄は、PeleのThemingにある、対応する--pele-*変数の説明をもとにしています。

このほかに、--mermaid-criticalと--mermaid-errorがあります。文字の太さを指定する変数として、--mermaid-title-weight、--mermaid-heading-weight、--mermaid-bold-weightもあります。

1.15.0で、円グラフ（pie）とフローチャートを書いたノートを開き、変数を上書きするCSSスニペットを.obsidian/snippets/に置いて有効にしました。

/* Obsidian 1.15 の --mermaid-* 変数で色を変える */
body {
  --mermaid-surface: #fff1d6;
  --mermaid-border-color: #e76f51;
  --mermaid-line-color: #e63946;
  --mermaid-radius: 12px;
  --mermaid-color-1: #264653;
  --mermaid-color-2: #2a9d8f;
  --mermaid-color-3: #e9c46a;
  --mermaid-color-4: #f4a261;
}

左が旧スニペットを有効にした状態、右が上の変数のスニペットを有効にした状態です。

ノードの塗り・枠・線の色と角の丸み、円グラフの4色が、スニペットで指定した値に変わりました。今回はスニペットをbodyに書いたので、ダークテーマでも同じ色を使う書き方です。ただし、ダークテーマでこのスニペットを有効にした表示は確認していません。テーマごとに色を変えたい場合は、.theme-lightと.theme-darkのそれぞれに書く必要がありそうです。

検証結果の考察

• 影響を受けやすいノート: mermaid.jsのテーマやスニペットで配色をそろえていた保管庫では、1.15に上げると図の色がObsidianのテーマの色になります。図ごとの色はclassDefとstyleで残せますが、図全体の配色はスニペットを書き直すことになります
• 見た目の差: ノードの位置や線の引き方はPele独自です。mermaid.jsの配置を前提にした図（線の重なりを避けるためにノードの順序を調整した図など）は、開き直して確かめる必要がありそうです。表示する領域が640pxを下回ると、横向きの図が縦向きに並び替わる点も、狭いペインで図を見る人には大きな変化です
• Peleのバージョンとの関係: 1.15.0に同梱のPeleは1.8.0なので、pele.runに載っている新しい機能やズームボタンの改善は、今後のObsidianのアップデートで入る可能性があります。今回の結果は、2026年11月11日時点の1.15.0での確認です
• 試していない範囲: Canvasの中の図は、1.15.0のapp.jsでズームが無効になっているため、横に長い図の見え方が本文と異なる可能性があります。Obsidian Publishで公開したページとモバイルアプリでの描画、ダークテーマでの--mermaid-*スニペット、ドラッグやホイールでの操作も試していません。mermaid.jsのクラス名を前提に図を加工するコミュニティプラグインは、セレクタが当てはまらなくなる可能性があります

まとめ

Obsidian 1.15では、Mermaidの図がPeleで描画されるようになりました。表示前の確認はなくなり、図の色はテーマに合わせて変わります。横に長い図はノートの幅に合わせて縮小され、ズームで細部を見られます。表示する領域が640pxを下回ると、横向きの図が縦向きに並ぶ点と、ノードの配置が変わる点には注意が必要です。

互換性については、classDefとstyleの色、ノートへのリンク、URLのclick、ラベル内の<b>と<br>は、1.15.0でもそのまま使えました。2026年11月11日時点の1.15.0では、%%{init}%%のテーマ指定、ラベル内HTMLのstyle、mermaid.jsのSVGを指定したCSSスニペットは図に反映されなかったので、図ごとの色はclassDefとstyle、全体の配色は--mermaid-*変数を上書きするスニペットで指定するのが良さそうです。

誰かの参考になれば幸いです。

参考リンク:

• Obsidian 1.15 Desktop changelog
• obsidianmd/pele（GitHub）
• Pele Compatibility
• Pele Theming
• Pele API
• Obsidian ヘルプ: Advanced formatting syntax（Diagram）
• Obsidian ヘルプ: CSS snippets