ObsidianのMermaid図解が高速化へ|新エンジンPeleと活用例

Obsidianで、メモや仕事の手順を図にして整理したことはありますか?

文字で図の構造を書くだけで、矢印やボックスのある図解に変換できる「Mermaid」。Obsidianには以前から備わっている機能ですが、その表示を大きく高速化する新しいエンジン「Pele」が登場しました。

PeleはObsidianのために開発されたオープンソースの描画ライブラリで、次期バージョンのObsidian 1.15に採用される予定です。新しい図解アプリが追加されるわけではありません。いつものMermaidの書き方で、より素早く、画面に合わせて図を表示できるようにする変更です。

図解の書き方はそのまま。表示を担うエンジンが変わる

Mermaidは、テキストで図の構造を記述する方法です。「AからBへ進む」「ここで2つに分岐する」といった関係を文字で書くと、フローチャートなどに変換されます。

Obsidianではノートの中に、言語をmermaidと指定したコードブロックを書けば、図として表示できます。

Peleが置き換えるのは、このテキストを図に変換する部分です。Mermaidそのものを覚え直したり、既存のノートを画像に変換したりする必要はありません。

ただし、Peleは独自のレイアウトエンジンを使うため、同じMermaidコードでもボックスの位置、間隔、線の引き方、色合いは従来と異なる場合があります。

Peleで変わる3つのこと

図を描くまでの待ち時間が短くなる

Peleの開発チームが公開した比較では、描画時間はPeleが0.05〜0.3ミリ秒、Mermaid.jsが6〜82ミリ秒。条件によって最大500倍高速としています。また、gzip圧縮後のライブラリサイズもPeleは約230KB、Mermaid.jsは約1.6MBです。

これは開発チームによる比較値で、どんな図やiPadでも500倍速くなるという意味ではありません。それでも、図の内容を直すたびに描画を待つ時間が減れば、図解を「仕上げるための作業」ではなく、考える途中で何度も書き直せる道具として使いやすくなりそうです。

狭い画面でも図の配置を調整できる

Peleは画面幅に合わせて図を収めるだけでなく、対応するレイアウトでは横方向の図を縦方向へ組み替えられます。iPadを縦向きにしたときや、Split Viewなどでノートの表示幅が狭くなったときに役立つ仕組みです。

ノートの配色に図解を合わせやすくなる

Peleの色やフォントはCSS変数で設定でき、配色の変更にも再描画なしで追従します。Obsidian 1.15では、テーマに馴染む表示やズーム操作も予定されています。

読書メモを「気づきから行動まで」の図にする

読書中のメモを、引用の保存だけで終わらせず、自分の考えや行動につなげたいとき。例えば、こんなフローをノートに置けます。

flowchart TD
  A["読書中に気になったこと"] --> B["自分の言葉でメモする"]
  B --> C{"次につながる?"}
  C -->|もっと考える| D["読書ノートで整理"]
  C -->|試してみる| E["次の行動を1つ決める"]

画像ではなくテキストで作っているので、読み進めて考えが変わったら、分岐や項目を足すだけです。図を清書するよりも、考えの流れを残して、あとから直せることに価値があります。

原稿の構成をマインドマップにする

記事やニュースレターを書く前には、伝えたい内容をいったん広げてみる方法もあります。

mindmap
  root((記事のテーマ))
    読者が知りたいこと
      困っていること
      今の選択肢
    伝えたいこと
      変わった点
      使うメリット
    具体例
      最初に試すこと
      続ける工夫

「何を伝えるか」「どこまで説明するか」を先に図にしておくと、本文を書くときに話が横道に逸れにくくなります。

Mermaidの良さは、図のパーツを一つずつドラッグして整列させなくてもいいこと。構造をテキストとして保存できるので、Markdownノートと一緒に管理したり、別の原稿へ再利用したりできます。

iPadからPeleを試すならPlayground

Obsidian 1.15の正式な搭載を待たなくても、Pele Playgroundはブラウザから利用できます。

  1. SafariでPlaygroundを開きます。
  2. 「Source」にMermaidのコードを入力します。上のサンプルもそのまま試せます。
  3. 出力表示を「Pele」「Mermaid」「Compare」で切り替えて見比べます。

同じコードから、どんな形の図ができるかを比較できるのが面白いところです。Obsidianの設定を変えたり、プラグインを追加したりする必要はありません。

Peleはフローチャートやマインドマップだけでなく、シーケンス図、ガントチャート、タイムライン、カンバンなど、Mermaid 12.1.0に組み込まれている図解形式に対応しています。

iPadで図解を使う機会が増えそう

図解は、きれいな完成画像を作るためだけのものではありません。読書メモの関係を整理したり、原稿の流れを組み立てたり、作業手順を見直したりする途中でも使えます。

Peleによって表示の待ち時間が減り、画面の幅に合わせて見やすくなれば、iPadでも「ちょっと図にして考えてみる」という使い方がしやすくなりそうです。

なお、2026年10月18日時点では、Obsidian 1.15への搭載は今後の予定です。PlaygroundでPeleの描画を試すことと、普段使っているObsidianの図解表示が切り替わることは別です。

Obsidianの基本機能や料金については、こちらの記事にまとめています。

関連リンク

Obsidian - Connected Notes アイコン

Obsidian - Connected Notes

Dynalist Inc.

Productivity無料v1.14.5