ObsidianのMermaidで図を書く｜フローチャートの作り方

ObsidianでMermaidの図を表示する基本

Obsidianの公式ヘルプによると、図を入れるにはmermaidという言語名を付けたコードブロックを作ります（公式：Advanced formatting syntax）。コードブロックは、バッククォート（`）を3つ以上並べた行で囲んだ部分です（公式：Basic formatting syntax）。プラグインを入れる手順は、公式ヘルプのこの説明には出てきません。

最小の形は次のとおりです。1行目の```mermaidが、ここは図のコードだという目印になります。

```mermaid
flowchart TD
  A["依頼"] --> B["対応"]
```

2行目のflowchart TDは、フローチャートを上から下へ並べるという指定です。左から右に並べるならLRを使います（公式：Mermaid Flowcharts Syntax）。公式ヘルプはフローチャートのほか、シーケンス図やタイムラインも描けると紹介しています。

書きながら形を確かめたいときは、MermaidのLive Editorで試してからノートに貼る方法も、公式ヘルプのヒントに書かれています。

Mermaidで業務フローを書く例（見積もりの承認）

ここからは架空の例です。見積もりの依頼を受けてから、金額によって承認者が変わり、顧客へ送るまでの流れを図にします。会社名や金額の基準は説明用に作ったものです。

```mermaid
flowchart TD
  A["見積もりの依頼を受ける"] --> B["見積書を作る"]
  B --> C{"金額は50万円以上？"}
  C -->|はい| D["部長が承認する"]
  C -->|いいえ| E["課長が承認する"]
  D --> F["顧客へ送る"]
  E --> F
```

書き方の要点は三つです。

箱のIDは英字にし、表示する日本語は二重引用符で囲みました。こうしておくと、あとで説明の言葉を直してもIDは変わりません。同じ箱へ2本の矢印を集めるときも、FのようにIDを書けば足ります。

編集部はこのコードを、Mermaidの10.9.1と12.3.0の2つの版でそれぞれ描画しました。ヘッドレスのブラウザでMermaid本体を読み込む方法で、どちらの版でも図になりました。左右の並びにしたflowchart LRの版も同じ結果です。Obsidianに入っているMermaidの版は公式ヘルプのDiagramの説明に書かれていないため、アプリの中で同じ見た目になるかは確かめていません。

やり取りの順番を残したいときは、シーケンス図が向いています（公式：Mermaid Sequence diagrams）。営業と経理の依頼と返事なら、次のように書けます。この例も上の2つの版で描画できました。

```mermaid
sequenceDiagram
  営業->>経理: 請求書の発行を依頼
  経理-->>営業: 発行済みの連絡
```

Mermaidの図からObsidianのノートへリンクする

公式ヘルプによると、図の箱にinternal-linkというクラスを付けると、箱がノートへの内部リンクになります（公式：Advanced formatting syntax）。箱に表示する文字がリンクの文字として使われるので、ノート名と同じ文字にしておきます。

```mermaid
flowchart LR
  A["見積書の作り方"] --> B["承認ルール"]
  class A,B internal-link;
```

この例は「見積書の作り方」と「承認ルール」というノートがある想定です。この動きはObsidianの機能なので、Mermaid本体だけの描画では確かめられません。今回はアプリで試していません。

注意点が二つあります。一つは、図の中のリンクはグラフビューに表示されないことです。もう一つは、特殊な文字を含むノート名は二重引用符で囲む必要があることです。どちらも公式ヘルプの注記に書かれています。ふつうのリンクの書き方はObsidianのリンクの使い方で扱っています。

Mermaidの図が表示されない時の確認

図にならず、コードのまま見える。あるいはエラーの表示が出る。そんなときは、次の順に確かめると原因を絞りやすくなります。

言語名がmermaidになっているか

図になるのは、言語名がmermaidのコードブロックです（公式：Advanced formatting syntax）。先頭の行が```だけで言語名がない場合や、つづりが違う場合は、ふつうのコードとして扱われると考えられます。囲みの行のバッククォートが3つ以上あるかも見ておきましょう。

ソースモードで見ていないか

Obsidianの編集画面には、ライブプレビューとソースモードの2つの表示があります。公式ヘルプはソースモードを、Markdownの記法を書いたとおりにすべて表示するモードと説明しています（公式：Views and editing mode）。コードのまま見えるときは、閲覧ビューに切り替えて図になるかを見てください。切り替えはCtrl+E（MacはCmd+E）でもできます。ソースモードで図が描かれないことは公式ヘルプには明記されておらず、ここは説明からの推論です。

括弧などの記号を引用符で囲んでいるか

箱の文字に括弧を入れると、そのままでは記法の一部と区別できなくなることがあります。Mermaidの公式ドキュメントは、扱いにくい文字を含む文は引用符で囲むよう案内しています（公式：Mermaid Flowcharts Syntax）。

小文字のendと新しい記法を使っていないか

フローチャートで箱の名前を小文字のendにすると図が壊れる、とMermaidの公式ドキュメントに書かれています。Endのように一部を大文字にすれば避けられます（公式：Mermaid Flowcharts Syntax）。編集部の描画でも、start --> endは2つの版とも構文エラーになり、Endに変えると描画できました。

もう一つは版の違いです。Mermaidの公式ドキュメントには「v11.3.0+」のように、使える版が添えられた記法があります。編集部が新しい形の指定（A@{ shape: doc }の書き方）を試すと、12.3.0では描画でき、10.9.1では構文エラーになりました。

ObsidianのMermaidと版の違いの考え方

2026年11月6日時点で、Mermaidの最新版は2026年11月3日に公開された12.3.0でした（公式：Mermaid 12.3.0のリリース）。一方、Obsidian公式ヘルプのDiagramの説明には、アプリに入っているMermaidの版は書かれていません。

そのため、Mermaidの公式ドキュメントで版が添えられた新しい記法を見つけたら、使う前にObsidianで一度表示を確かめるのが安全です。業務の手順書のように長く使う図なら、上の見積もりの例のように、古くからある箱と矢印の書き方を中心にすると、版による違いの影響を受けにくいと編集部は考えています。

AIにMermaidのコードを書いてもらう場合も、括弧の引用符、小文字のend、版つきの記法の3点は同じように見直しましょう。ObsidianのノートをAIと一緒に使う方法の一例はObsidianとClaude Codeの連携方法で紹介しています。

MermaidとCanvasの使い分け

Obsidianで図を作る方法には、Canvasもあります。Canvasはコアプラグインの一つで、ノートや画像をカードとして画面に並べ、線でつなぐ機能です。.canvasという別のファイルに保存されます（公式：Canvas）。

手順が決まっている業務フローはMermaid、考えを広げる段階の整理はCanvas、と分けると選びやすくなります。Canvasの使い方はObsidianのCanvasの使い方で説明しています。

業務の手順書にMermaidを使うとき

Mermaidの図は文字で書かれているので、手順を直すときはコードの一行を書き換えれば済みます。承認者が変わった、確認の工程が一つ増えた、といった変更を本文と同じノートで管理できます。

社内で使うなら、箱のIDは英字、表示する文字は二重引用符、分岐はひし形、と書き方の決まりを最初にそろえておくと、ほかの人が直すときに迷いにくくなります。どの業務から図にするか、手順書をどこに置くかは、社内の情報の置き場所の決め方とあわせて考える必要があります。PLaiのAI社員導入支援では、こうした業務の手順を整理し、AIと一緒に使える形へつなげています。図にしたい業務が決まっているときは、今の手順を持ち寄ってご相談ください。

● 代表・市岡と話す、30分の個別面談

AI活用の「何から？」を、
30分で解決。

御社の仕事を伺い、AIに任せる業務と
最初に試すことを、一緒に決めます。

• 01AIに任せたい仕事を整理
• 02自社に合う始め方を具体化
• 03明日からの一歩を決める

30分の面談を申し込む↗

オンラインで30分AI社員導入支援について →

記事を読む、その先へ。
次は、御社の話を聞かせてください。