🔰

ObsidianのMermaidで横スクロールが出る問題をCSSスニペットで解決する（ついでにノートをフル幅表示）

に公開
CSS
Markdown
Obsidian
Mermaid
tech

ObsidianでMermaidを書いていると、図が横に長くなってノートに横スクロールが出ることがあります。
この記事では、CSSスニペット1枚で「図をノート幅に収める」方法と、ついでにノート本文を画面いっぱいに広げる方法をまとめます。

TL;DR

  • Mermaidの横スクロールは CSSスニペットでSVGを max-width: 100% にするのが手っ取り早い
  • ノート本文を広げたいなら Readable line length をOFF
  • 「特定ノートだけ」広げたいなら cssclasses + --file-line-width が便利

症状：Mermaidが横に伸びて横スクロールが出る

Mermaid自体はレンダリングされているのに、図がコンテナ幅を超えてしまい、ノート全体が横スクロールするやつです。

解決：CSSスニペットでMermaidのSVGをノート幅に収める

1) CSS snippets フォルダを開く

Obsidianの設定から：

  • Settings → Appearance → CSS snippets
  • 「Open snippets folder（フォルダを開く）」を押す

すると Vault 内のだいたいここが開きます：

  • .obsidian/snippets/

2) CSSファイルを作る

例： .obsidian/snippets/mermaid-fit.css

中身はこれ：

/* MermaidのSVGが横に溢れて横スクロールになるのを防ぐ（推奨） */
.mermaid svg {
  max-width: 100% !important;
  height: auto !important;
}
.mermaid {
  max-width: 100%;
}

3) スニペットを有効化する

Settings → Appearance → CSS snippets に戻って、mermaid-fit をON。

これで横スクロールがかなり改善します。

うまく効かないときのチェック
  • スニペットがONになっているか
  • テーマが強いCSSを当てていて上書きされていないか（その場合は !important を追加）
    .mermaid svg { max-width: 100% !important; height: auto; }
  • Reading view / Live Preview どちらで崩れているか（両方確認）

ついで：ノート本文を「画面いっぱい」に広げる（Readable line length）

Mermaidが収まっても、本文が細いと「まだ狭い…」となりがち。

一番簡単：Readable line length をOFF

  • Settings → Editor あたりにある Readable line length を OFF

これで本文が広く表示されます。

応用：特定のノートだけフル幅にしたい（cssclasses + --file-line-width）

「普段は読みやすい行幅のまま、図が多いノートだけ広げたい」場合はこれ。

1) CSSスニペットを追加

例： .obsidian/snippets/note-width.css

/* 特定ノートだけ幅を変える */
.wide-view {
  --file-line-width: 1200px;
}

.full-view {
  --file-line-width: 100%;
}

2) 対象ノートのフロントマターに cssclasses を指定

---
cssclasses:
  - full-view
---

wide-view / full-view は好みで。

3) 代替案：縮小せず「その図だけ」横スクロール（読めない問題の回避）

/* 図は縮小せず、Mermaidブロックだけ横スクロール（ノート全体を巻き込まない） */
.mermaid {
  overflow-x: auto;
  max-width: 100%;
}

おまけ：ZennでもMermaidをそのまま貼れる

Zennは ```mermaid のコードブロックをレンダリングできます。
なので Obsidian で書いた図は、そのまま持っていけます。

まとめ

  • ObsidianのMermaid横スクロールは CSSスニペットで .mermaid svg を制御するのが早い
  • 本文の表示幅は Readable line length のON/OFFで体感が大きく変わる
  • 「ノートごとに幅を変える」なら cssclasses + --file-line-width が綺麗

参考リンク

https://zenn.dev/zenn/articles/zenn-cli-guide
https://zenn.dev/zenn/articles/markdown-guide
https://forum.obsidian.md/t/how-to-style-mermaid-css-in-editor-and-in-obsidian-publish/48222

Discussion