ObsidianはMarkdown形式で作成したメモを管理できるアプリです。このアプリと生成AIを組み合わせると、テキストの生成やタグの付与、リンクの作成など幅広い使い方ができることを解説してきました。
それだけでなく、AIを使うことで図表を手軽に作成できます。Mermaidなどテキスト形式で作成できる図の表現方法があり、複雑な図も簡単に生成や編集ができるのです。今回はObsidianのノート内に図表を入れるときに、AIと連携して作成するための具体的なプロンプト例を紹介します。
Mermaid
Markdown内にコードブロックとして記述するだけで、フローチャートやシーケンス図、ガントチャートなどを生成できるツールとしてMermaidがあります。Obsidianは標準機能でMermaidをサポートしているため、AIにてMermaidのコードを生成し、そのまま貼り付けるだけで図が完成します。
例1）会員登録のフローを作成する
Webアプリを作成するときは、会員登録の画面を用意します。このときのフローをMermaidで作成するには、次のようなプロンプトが考えられます。
Webアプリで利用者が会員登録するときのフローをMermaidで作成してください。
たとえば、次のようなフローが出力されます。
```mermaid
sequenceDiagram
participant User as 利用者
participant WebApp as Webアプリ
participant DB as データベース
participant EmailService as メールサービス
User->>WebApp: 会員登録画面にアクセス
WebApp->>User: 会員登録フォームを表示
User->>WebApp: フォームに情報を入力して送信
WebApp->>DB: 入力情報のバリデーションと保存
alt バリデーション成功
WebApp->>EmailService: 確認メールを送信
EmailService->>User: 確認メールを受信
User->>WebApp: メール内のリンクをクリック（メール認証）
WebApp->>DB: メール認証ステータスを更新
WebApp->>User: 登録完了画面を表示
else バリデーション失敗
WebApp->>User: エラーメッセージを表示
end
```
Obsidianで表示すると、次の図のようになります。
例2）ガントチャートを作成する
プロジェクトを進めるとき、その作業内容を小さな単位に分割し、ガントチャートを作成することがあります。このガントチャートをMermaidで作成するには、次のようなプロンプトが考えられます。
書籍の執筆のスケジュールをガントチャートで管理したいと考えています。 執筆と校正の工程があり、それぞれ章単位で6章まであるとします。 執筆では2週間で1章、校正は1週間で1章の期間で進めるとき、Mermaidでガントチャートを作成してください。 なお、スケジュールの開始は2025年6月1日とし、校正は2025年9月1日からとします。
たとえば、次のようなフローが出力されます。
```mermaid
gantt
title 書籍執筆と校正スケジュール
dateFormat YYYY-MM-DD
axisFormat %m/%d
section 執筆
章1執筆 :a1, 2025-06-01, 14d
章2執筆 :a2, after a1, 14d
章3執筆 :a3, after a2, 14d
章4執筆 :a4, after a3, 14d
章5執筆 :a5, after a4, 14d
章6執筆 :a6, after a5, 14d
section 校正
章1校正 :b1, 2025-09-01, 7d
章2校正 :b2, after b1, 7d
章3校正 :b3, after b2, 7d
章4校正 :b4, after b3, 7d
章5校正 :b5, after b4, 7d
章6校正 :b6, after b5, 7d
```
Obsidianで表示すると次の図のようになります。Obsidianの中でMermaidの図を開くと、日が変わるたびにガントチャート中の赤線が移動していくため、現在の工程も一目で把握できます。
SVGファイル
ObsidianではPNGやJPEG、WebPのような形式の画像ファイルを読み込めますし、次のように書くことでノート内に埋め込むこともできます。
![[sample.png]]
それに加えて、SVG
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" fill="skyblue" stroke="black" stroke-width="2"/>
<polygon points="130,80 170,80 150,20" fill="lightgreen" stroke="black" stroke-width="2"/>
</svg>
これをObsidianで開くと、次の図のように表示されます。
例3）SVGファイルを作成する
SVG形式のデータもAIで作成できます。上記のSVG形式のデータは、生成AIに対して次のようなプロンプトで作成したものです。
丸と三角を並べたSVGファイルを作成してください。
その他、細かくプロンプトで指定することで、簡単な図形を組み合わせたSVGファイルは手作業で作るよりも手軽に作成できます。
なお、Obsidianの標準機能ではSVGファイルを表示できますが、編集することはできません。ただし、コミュニティプラグインの
表の変換
ObsidianはMarkdownを使って表も作成できます。たとえば、次の画像のような表を作成することを考えます。
これをObsidianで表示するには、次のようにMarkdown形式で記述します。
| 血液型 | 割合 |
| ---| --- |
| A型 | 40% |
| B型 | 30% |
| O型 | 20% |
| AB型 | 10% |
このようにテキスト形式で記述できて便利ですし、前回の記事で紹介したようにObsidianのライブプレビューでは行や列の追加、削除などがGUIでできます。
例4）行と列を入れ替える
単純な表に対する操作であれば問題なくても、行と列を入れ替えるような操作は面倒です。たとえば、上記の表を次の画像のような表に変更することを考えてみましょう。
Excelなどの表計算ソフトを使うと、このような入れ替えも簡単なので表計算ソフトを使う方法もありますが、ここではMarkdown形式のまま生成AIで変換することにします。
たとえば、次のようなプロンプトが考えられます。
次のMarkdownの表で行と列を入れ替えたものをMarkdown形式で出力して。 | 血液型 | 割合 | | ---| --- | | A型 | 40% | | B型 | 30% | | O型 | 20% | | AB型 | 10% |
これだけで、次のように変換した結果が得られます。
| 血液型 | A型 | B型 | O型 | AB型 | | --- | --- | --- | --- | --- | | 割合 | 40% | 30% | 20% | 10% |
TeX形式の数式
Obsidianでは数式をTeX形式で表現することもできます。しかし、TeX形式の数式を手作業で入力するのは大変です。そこで、このTeX形式の入力にAIを使います。すでに用意されている数式の画像があれば、それを読み込んでAIに処理させるだけです。
例5）複雑な数式の入力
たとえば、次のような画像
この画像をAIに渡して、次のようなプロンプトを入力します。
添付の画像に含まれている数式をTeX形式で出力してください。
すると、次のような内容が出力されます。
r = \frac{s_{xy}}{s_x \times s_y} = \frac{\frac{1}{n} \sum_{i=1}^{n} (x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\frac{1}{n} \sum_{i=1}^{n} (x_i - \bar{x})^2} \times \sqrt{\frac{1}{n} \sum_{i=1}^{n} (y_i - \bar{y})^2}}
Obsidianでは、$$」
Excalidraw — 手描き風図形とスケッチの統合
ここまではObsidianに標準で用意されている機能について、AIで生成する方法を解説してきました。これに加え、Obsidianでは図表を作成できるコミュニティプラグインがいくつもあります。
ここでは、Obsidianで人気のあるコミュニティプラグインのExcalidrawについて取り上げます。これは、手描き風のスケッチを作成するときに便利なツールで、作成したデータはJSON形式で保存されます。
例6）テスト駆動開発の図を描く
テスト駆動開発のイメージを表す図として、
テスト駆動開発で使われる「Red」「Green」「Refactor」という3つの状態を○で表現し、その関係を矢印でつないで表現する図をObsidianのExcalidrawで表現するJSON形式のデータを作成してください。
そして、できあがったJSON形式のデータをObsidianのExcalidrawで使うことを考えます。ObsidianでExcalidrawの
表示された画面の ```compressed-json」 ```json」
もとの表示に戻すには、画面右上の
例7）ラフデザインの作成
Excalidrawは手書き風のデザインを作成できるため、ラフデザインを作成するときに使うと便利です。たとえば、Webサイトを新しく作成するとき、そのレイアウトを考えるときなどに使えます。このとき、次のようなプロンプトが考えられます。
Webサイトをヘッダー、メインビジュアル、サービス紹介、会社情報、お問い合わせ、フッターといった構成で作成するラフスケッチをObsidianのExcalidrawで表現するJSON形式のデータとして作成してください。
たとえば、次のような図ができあがります。
ObsidianとAIを組み合わせることで、テキスト形式のメモにも視覚的な情報を追加できることがわかるでしょう。今回紹介した例を活用して、より見やすいObsidianのノートを作成してください。