QuartzでExcalidrawで描いた図を使う運用

概要

Obsidianの中だけでExcalidrawを使うのあれば、obsidian-excalidrawプラグインを使えば良い。

しかし、本サイトではObsidianの保管庫をQuartzでHTMLへ変換し公開しているため、

![[image.excalidraw]]

のように書いてもQuartzでは上記形式が処理されず、せっかく描いた図をWeb上で公開できない。このため以下のように運用することにした。

1. Excalidraw Pluginを使って図を描き保存する
2. Excalidrawファイルを作ったフォルダにPNGが自動生成される
3. ノートを作成し2.のPNGを画像として参照する

上の図もこの流れで公開している。

Excalidrawプラグインの設定内容

Basic

• Excalidraw folder: _Excalidraw
  • Excalidrawのファイルが保存されるフォルダ。PNGもここに出力される

Filename

• prefix: なし
  • Excalidraw専用フォルダを作成するためprefixは不要

Embedding Excalidraw into your Notes and Exporting

• Export Settings > Auto-export Settings > Auto-export PNG: ON

quartz.config.tsの設定

QuartzがExcalidrawのファイルを処理しないよう､quartz.config.tsのignorePatterns へ追加する。

    ignorePatterns: ["templates", ".obsidian", (中略), "**/*.excalidraw.md],

変更履歴

• 2025/02/26 プラグインの設定内容変更､Quartz 4にあわせた設定ファイルの記述変更