Mappyのマインドマップに、画像とExcalidrawの図を入れる方法｜Insert Image Plus

こんにちは、よーすけです。

飯塚さんが作ったObsidianのマインドマップのプラグイン「Mappy」を、毎日使っています。そのMappyのノードに、自作のプラグイン「Insert Image Plus」から画像やExcalidrawの図を入れられるようにしました。

Mappy 対応の投稿

この記事は、こんな人におすすめです。

• Mappyでマインドマップを作っている
• マップの枝に、画像や図解も並べたい
• Excalidrawで描いた図を、マップの中でも見たい

MappyとInsert Image Plusとは

Mappyは、ノートの見出しと箇条書きを、そのままマインドマップで読み書きできるプラグインです。マップの中身はふつうのMarkdownなので、マップで足した枝がそのままノートに残ります。くわしくは、飯塚さんのMappyの使い方の記事がいちばん分かりやすいです。

Insert Image Plusは、自分が作って公開しているプラグインです。ファイル名の頭の言葉（icon - 地図.png の icon など）がそのまま分類になり、画像とExcalidrawの図を一覧から選んで入れられます。

Mappyに画像を入れる手順

使うのは、デスクトップ版のObsidianです（Mappyと同じく、スマホでは動きません）。Insert Image Plusは0.5.0から、Mappyに対応しています。

1. Insert Image Plusを入れる

設定の「コミュニティプラグイン」で「Insert Image Plus」を探して、インストールして有効化します。

2. Mappyでノードを選んで「画像を挿入する」

マップでノードを1つ選び、コマンドパレットで「画像を挿入する」を選びます。画像の一覧が開くので、入れたいものを選びます。

3. Enterで決める

ノードの編集が開いて、画像の行（![[…]]）が入ります。Enterを押すと決まり、ノードに画像が出ます。

Excalidrawの図もそのまま入る

Mappyがノードに絵として出せるのは、pngやsvgなどの画像ファイルです。そこでInsert Image Plusは、Excalidrawの図を選んだときに、その図だけをSVGに書き出してから入れます。書き出したSVGは、図の隣にできます（埋め込み画像込みで5MBまで）。

Vault全体を自動で書き出す設定にはしていません。入れた図だけが書き出されるので、ファイルが勝手に増えません。

マップに図が並ぶと、考えが見えやすくなる

自分は、記事の構成を考えるときにMappyを使っています。AIに構成をMappyのノートとして書いてもらい、それをマップで見て、直したいところを返す流れです。

文字だけの枝でも全体は見えますが、枝にアイコンや図が並ぶと、どこが何の話かが一目で分かります。

注意すること

• デスクトップ版のObsidianだけで使えます
• Mappyの画面で、手で ![[ と打つのと同じように文字を入れる仕組みです。Mappyのファイルや処理には触りません
• Mappyの更新で動かなくなることがあります。そのときは、MappyではなくInsert Image Plusのほうにお知らせください

まとめ

• Insert Image Plusを入れると、Mappyのノードを選んでコマンド1つで画像を入れられる
• Excalidrawの図は、その図だけをSVGにして入れる
• 題名を消して画像だけにするか、題名の下の段に入れるかを選べる

関連記事

• Obsidian：Insert Image Plus の使い方
• AI：AI活用の5段階とは？チャットからアプリ作りまで、Obsidianを土台に上る方法

ObsidianとExcalidrawを始めたい方へ

自分が使っているObsidianの形と、Excalidrawのアイコン集を、そのまま使えるスターターキットにしました。メルマガに登録すると、無料で受け取れます。

スターターキットを受け取る →