ObsidianのExcalidraw：ノートに手書き風の図を描く

前述の通り、Canvasファイルは.canvas形式で.mdファイルとは別に存在し、独立して管理する必要があり、同じファイル内でノートと組み合わせることができません。この章では、この痛点を解決するツール、Excalidrawプラグインを紹介します。

Excalidrawとは？Canvasとの違いは？

Excalidrawとは？

Excalidrawは無料でオープンソースのオンライン描画ツールで、スタンドアロンのWeb版（excalidraw.com）があり、サインアップ不要でブラウザから直接利用できます。その手書き風のスタイルは、フローチャート、マインドマップ、アーキテクチャ図などに最適です。

Obsidianでは、サードパーティプラグイン版を使用します。これはコミュニティの開発者によってメンテナンスされており、Obsidian公式のものではないため、手動でインストールする必要があります。コア機能はWeb版と同じですが、Obsidianとの深い統合が追加されています。

Canvasとの違い

どちらも「キャンバスに描く」ように見えますが、ファイル形式がまったく異なることが核心的な違いです。

Canvas：.canvasファイルを生成します。これはスタンドアロンのJSONファイルで、.mdノートとは別に存在し、独立して管理する必要があります。
Excalidraw：描画データを圧縮して.mdファイルの末尾に埋め込むことができます。1つのファイルにテキストと描画が共存し、別々に管理する必要がありません。

以下の2つのスクリーンショットは同じファイルです。

これが私がExcalidrawをおすすめする理由です。ファイルを開くとテキストが表示され、切り替えると描画が表示されます。両方のコンテンツが1か所にあります。

Excalidrawプラグインのインストール

Excalidrawはサードパーティプラグインなので、手動でインストールする必要があります。

パス：設定 → サードパーティプラグイン → コミュニティプラグイン → 「Excalidraw」を検索 → インストール → 有効化

インストール後、プラグインを有効にすると、左サイドバーにExcalidrawのアイコンが表示されます。

Excalidrawの作成と使用

新しいファイルの作成方法

2つの方法があります。

コマンドパレット：Cmd+P（Mac）またはCtrl+P（Windows）で「Excalidraw: New Drawing」を検索し、Enterキーを押します。
左サイドバー：Excalidrawアイコンをクリックして直接新規作成します。

デフォルトでは、新しいファイルは.excalidraw（.mdではない）として作成されます。心配しないでください。これを.mdファイルの一部にする方法が、後述の「2-in-1」セクションの焦点です。

一般的な操作とショートカット

Excalidrawのツールバーでは、各ツールの下に数字が表示されています。それがショートカットキーです。数字を押すと、ツールバーをクリックしなくても直接ツールを切り替えられます。

ツール	ショートカット
選択	1
長方形	2
ひし形	3
楕円	4
矢印	5
線	6
フリーハンド	7
テキスト	8
消しゴム	0
キャンバス移動	Space + ドラッグ、またはマウス中ボタンドラッグ
キャンバスズーム	Ctrl/Cmd + マウスホイール
画面に合わせる	Shift+1
すべて選択	Ctrl/Cmd + A
元に戻す	Ctrl/Cmd + Z

Canvasと比較して追加の機能：Excalidrawには専用のフリーハンドツール（ショートカット7）があり、マウスやトラックパッドで自由に描画できます。Canvasではできません。

キーボードワークフロー：キーボードから手を離さずに描画

Excalidrawは純粋なキーボードワークフローもサポートしており、ノードをすばやく作成、接続、コンテンツを記述するのに最適です。

基本ナビゲーション（選択モード時）：

アクション	ショートカット
次の/前の要素を選択	Tab / Shift+Tab
選択した要素を移動	← → ↑ ↓
テキスト編集に入る	Enter（テキスト要素が選択されている場合）
編集を終了し選択に戻る	Esc
選択した要素を複製	Ctrl/Cmd + D
選択した要素を削除	Backspace または Delete
すべて選択	Ctrl/Cmd + A

キャンバスにコンテンツを追加

図形とテキスト：ツールバーから図形を選択し、キャンバスをクリックして描画します。テキストツールでは、クリックして入力を開始します。中国語もサポートされています。

矢印の接続：長方形が選択されているとき、その端にカーソルを合わせると緑色の接続ポイントが表示されます。これらのポイントの1つから別の図形に矢印をドラッグすると、スナップして配置されます。

既存のノート：Obsidianのファイルツリーからノートを直接Excalidrawキャンバスにドラッグすると、ノートプレビューカードとして埋め込まれます。

画像：画像ファイルをキャンバスにドラッグすると、直接表示されます。

重要ポイント！AIでExcalidrawを描画する

前述の「AIでCanvasを描画する」セクションと同様に、ExcalidrawもClaude Codeで直接生成できます。

背景

これまでにClaude CodeとSkillシステムを紹介しました。Canvasはjson-canvas Skillを使用し、Excalidrawにも専用のSkillがあります：excalidraw-diagram。もちろん、Excalidrawに関するMCPやSkillは多数ありますので、必要なものを選択してください。

これはaxtonliuによって作成され、GitHubでオープンソース化されています。

https://github.com/axtonliu/axton-obsidian-visual-skills/tree/main/excalidraw-diagram

ダウンロード後、他のSkillと同様に~/.claude/skills/ディレクトリに配置します。

このSkillはスタンドアロンの.excalidrawファイルを生成します。描画のみが必要で、ノートテキストと混在させたくないシナリオに適しています。

描画を**.mdファイル内に直接埋め込みたい場合**（後述の2-in-1形式）、拡張Skill obsidian-excalidrawを作成しました。これは特にこの目的のためのもので、結果は圧縮されて.mdファイルの末尾に埋め込まれ、余分なファイルは作成されません。2つのSkillは目的が異なるので、必要に応じて選択してください。

使用方法

Claude Codeで/excalidraw-diagramと入力し、このSkillを選択してTabキーを押し、描画したい内容を説明します。Claude Codeが対応するExcalidrawファイルを生成します。

ライブデモ

この章の内容をデモとして使用しました。Claude Codeに「このExcalidrawコンテンツの章構成のフローチャートを描いて、各セクション間の関係を示して」と指示しました。

Claude Codeが内容を読み取り、自動的に構造図を生成し、.mdファイルの末尾に直接埋め込みました。Excalidrawモードに切り替えると表示されます。ノードを手動でドラッグしたり線を接続したりする必要はなく、手描きよりもはるかに高速です。

重要ポイント！Excalidrawを.mdファイルに埋め込む（2-in-1）

明確にしておきます：デフォルトでは、Excalidrawプラグインは.excalidrawファイルを作成します。これは.mdファイルとは別で、Canvasと同様に独立して管理する必要があります。

「2-in-1」機能はデフォルトの動作ではなく、追加の設定が必要です。設定すると、新しいファイルは.md形式になり、描画データは圧縮されてファイルの末尾に保存されるため、両方が同じファイルに共存します。

Canvasではこれができませんが、Excalidrawでは可能です。設定後、同じ.mdファイルが通常のノートと描画ボードの両方として機能し、すべてが1つのファイルに収まります。これがこの記事で最も価値のある部分です。

以下、5つのステップに分けて説明します。

5.1 2つの重要なプロパティ

注意深い読者は、私の以前のノートのスクリーンショットに、すでにこれらの2つのfrontmatterプロパティがあることに気づいたかもしれません。

excalidraw-plugin: parsed
excalidraw-open-md: true

excalidraw-plugin: parsed：Excalidrawプラグインに対して、この.mdファイルには解析が必要なExcalidrawデータが含まれていることを伝えます。このプロパティがないと、プラグインはファイルを処理しません。

excalidraw-open-md: true：ファイルをデフォルトでMarkdownモードで開きます（描画モードに直接入るのではなく）。trueに設定すると、ファイルを開いたときに最初にテキストが表示され、必要に応じて手動で描画モードに切り替えます。これがないと、ファイルを開くたびに直接描画ボードにジャンプし、テキストを読むために戻る必要があり、煩わしいです。

これらの2つのプロパティをfrontmatterに追加することで、ファイルは「デュアルモード」機能を獲得します。

5.2 テンプレートファイルの作成

2-in-1設定の鍵は、この設定をテンプレートファイルに保存することです。これにより、新しいノートを作成するたびに自動的に設定が含まれ、毎回手動で追加する必要がなくなります。

手順：

テンプレートフォルダ（例：02 Templates/）に新しい.mdファイルを作成し、「Excalidraw Template」という名前を付けます。
以下の内容をコピー＆ペーストして保存します。

---
excalidraw-plugin: parsed
excalidraw-open-md: true
---

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQAswYKDXgB6MSgw4CxAHSp6AWzJJMMJTEZgaCANoBdcuihQAymHRg+oCthhEAQulQBrAOb4ujXAGF6mPT4CCAAxABmkVGqnnhm2ABefIycmJgAvuTh2Oq68MDp6UA
```
%%

これは空のキャンバスを持つExcalidrawテンプレートです。2つのfrontmatterプロパティ（excalidraw-plugin: parsedとexcalidraw-open-md: true）は、プラグインに対してこのファイルが2-in-1形式であり、デフォルトでMarkdownモードで開くべきであることを伝えます。末尾のcompressed-jsonは空のキャンバスデータです。

5.3 Excalidrawプラグインの設定

テンプレートファイルがあるだけでは不十分です。Excalidrawプラグインに「テンプレートの場所」を教え、ファイル管理を妨げる設定を無効にする必要もあります。

パス：設定 → Excalidraw

変更する2つの項目：

① テンプレートの場所を設定：Excalidraw設定で「Template file」オプションを見つけ、テンプレートのパスを入力します（例：02 Templates/Excalidraw Template）。以降、Excalidrawで新しいファイルを作成するたびに、自動的にこのテンプレートが使用され、excalidraw-open-md: trueプロパティも含まれます。

② 「Add date to new file name」を無効にする：デフォルトでは、Excalidrawは新しいファイル名に作成日を追加します（例：Drawing 2026-03-12）。これによりファイル名が冗長になり、Obsidianのテンプレート命名ロジックと互換性がなくなります。このオプションを見つけてオフにします。

5.4 ショートカットキーのバインド

Markdownモードと描画モードの切り替えを右クリックメニューから行うのは遅すぎます。ショートカットキーをバインドして即座に切り替えられるようにします。

パス：設定 → ホットキー → 「Excalidraw」を検索

次のエントリを見つけます：「Excalidraw: Toggle between Excalidraw and Markdown mode」

これにCmd+E（Mac）またはCtrl+E（Windows）をバインドします。まず、このキーの組み合わせがすでに使用されていないか確認してください。ObsidianのデフォルトのCmd+Eは斜体です。斜体をよく使う場合は、Cmd+Shift+Eなど別のキーを選択してください。

バインド後、2-in-1ファイルでCmd+Eを押すと、「テキスト表示」と「描画表示」を切り替えられます。非常に便利です。

5.5 ファイル末尾の圧縮データ

設定後、2-in-1ファイルで描画コンテンツを保存するたびに、ファイルの末尾に自動的にデータブロックが生成されます。

%%
### Drawing
```compressed-json
N4IgLgngDgpiBcIYA8DGBDANgSwCYCd0B3EAGhADcZ8BnbAewDsEAmcm+gV31TkQ...
```
%%

このcompressed-jsonコードブロックは、すべての描画データを圧縮した結果です。座標、色、テキストコンテンツ、接続関係など、すべてがこの1行の文字列に圧縮されています。

3つの注意点：

このコンテンツを手動で削除しないでください。 削除すると描画データが失われ、Excalidrawモードに切り替えると空のキャンバスが表示されます。
%%はObsidianのコメント構文です。閲覧モードでは、このコンテンツは非表示になり、表示されないため、ノートの可読性に影響しません。
compressed-json行は完全な1行でなければなりません。改行で分割されると、ファイルがエラーになり開けなくなります。

まとめ

今日学んだこと：

Excalidraw = 無料でオープンソースの描画ツール：スタンドアロンのWeb版があり、Obsidianではサードパーティプラグイン版を使用。手書き風スタイルと無限キャンバス。
Canvasとの核心的な違い：Canvasは独立した.canvasファイルを生成し、独立した管理が必要。Excalidrawの描画データは.mdファイルに圧縮して埋め込める。1つのファイルで2つの用途。
インストール：設定 → サードパーティプラグイン → コミュニティプラグイン → Excalidrawを検索してインストール。
ツールのショートカット：数字キー1-8と0でツール切り替え、Escで編集終了、Tabで要素間ジャンプ、矢印キーで移動。コアリズム：数字キーでツール、Esc/Tabでナビゲーション。
AI描画：/obsidian-excalidraw Skillを使用すると、Claude Codeが直接埋め込み描画を生成。手動でノードをドラッグするよりはるかに高速。
2-in-1設定：frontmatterにexcalidraw-plugin: parsed + excalidraw-open-md: trueを追加。テンプレートファイルで設定し、Excalidraw設定でテンプレートパスを指定。Cmd+Eをバインドしてモードを素早く切り替え。
ファイル末尾のデータ：## Drawing + compressed-jsonコードブロックが圧縮描画データ。%%で囲まれ、閲覧モードでは非表示。手動で削除しないこと。

謝辞：この章の「2-in-1」設定は、BilibiliクリエイターFiveth_の方法（動画：BV1hyhPzoEcd）を参考にしています。ここに謝意を表します。