Mac版Obsidianで読みやすく統一感のあるMermaidフローチャートを作るには、各図の中で再利用できるノードスタイルを定義します。アプリのテーマはそのままにし、インストール済みバージョンでどのレンダラーが使われているかを確認して、共通のデフォルト設定が必要な場合にのみ図の範囲に限定したCSSを追加します。

このガイドでは、ノードの塗りつぶしとラベルを統一し、別の手順を1つ明確に示した小さなフローチャートを作成します。ラベルはすべて例示用です。ここで紹介するのは通常のノートで再利用できるスタイルパターンです。MermaidとObsidianの新しいPeleレンダラーで動作が異なる場合は、手順を分けて説明します。

設定を選ぶ前にインストール済みのレンダラーを確認する

Obsidianの早期アクセス版のヘルプに記載されている Settings → About → App → Current version で、使用中のビルドを確認します。スタイルをトラブルシューティングする前に、そのバージョンを控えておきましょう。

ここには重要な境界があります。早期アクセス版と明記されたObsidian 1.15.0 Desktopの2026年10月22日付リリースノートでは、Mermaid図のレンダリングにPeleを導入しています。ノートによると、Mermaid 12.1.0の構文に対応し、テーマの色とフォントを使用します。また、異なるSVGクラスを生成します。このリリースノートが説明しているのは特定のリリースであり、お使いのMacにどのレンダラーがインストールされているかを示すものではありません。Obsidian 1.15.0 Desktopを参照してください。

別のガイドの設定をコピーする前に、次の表で該当する環境を確認してください。

レンダリング環境 まず試す設定 注意点
ObsidianがMermaid自体を使用 ソース内のフローチャートクラス。必要に応じて図のフロントマター 設定機能はインストール済みのMermaidのバージョンによって異なります。
ObsidianがPeleを使用 ソース内のスタイル。必要に応じてPeleのCSS変数 Mermaidのテーマや themeVariables の色設定は適用されません。
プラグインが図のレンダリングを置き換えている そのプラグインが文書化しているレンダラーと設定 組み込みレンダラーの動作だけでは、互換性を確認できません。

PeleはMermaid構文を受け付ける場合でも、独自のレイアウトと外観について明示的に説明しています。互換性に関するドキュメントには、設定のサポート状況が図の種類によって異なることも記載されています。構文の互換性と、見た目が同じになるかどうかは別々に確認してください。

ノート内で再利用可能なフローチャートのスタイルを作る

新しいノートを作成し、開始と終了のフェンスを含む以下のブロック全体を貼り付けます。Obsidianの高度な書式構文のドキュメントでは、図には mermaid とラベル付けしたフェンス付きコードブロックを使うと説明されています。

```mermaid
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
    B --> D[Option D]

    classDef standard fill:#edf2f7,stroke:#475569,color:#172033,stroke-width:2px;
    classDef alternate fill:#e0f2fe,stroke:#0369a1,color:#172033,stroke-width:2px;
    class A,B,C standard;
    class D alternate;
```

Mermaidの classDef 構文で再利用可能な外観を定義し、class で名前付きノードに割り当てます。この例では、3つのノードに standard を適用し、1つには alternate を適用します。ノード識別子と表示ラベルを分けておけば、文言の変更を追いやすくなります。これらの機能については、フローチャート — 基本構文で説明されています。

この配色はデザイン例です。淡い塗りつぶし色に、暗い文字色と、よりはっきりした枠線を組み合わせています。「Option D」というラベルでも別の手順だと分かるため、その意味を青い塗りつぶし色だけに頼らず伝えられます。

ノートをプレビューし、普段の閲覧サイズでラベルを確認します。意図した表示は、同じスタイルのグレーのノードが3つと、青いノードが1つです。まず矢印はレンダラーのデフォルトのままにします。一度に1つずつ変更すれば、結果を判断しやすくなります。

このパターンを再利用するには、ブロック全体を別のノートにコピーし、ラベルと接続を変更して、最後の2行にあるノードのリストを更新します。配色の参照用コピーを1つ残しておきましょう。これは手作業で運用するルールです。参照用コピーを編集しても、ほかの場所にコピー済みの図は自動では更新されません。

Peleも図内で定義するスタイルに対応しており、ドキュメントでは、ソースで定義した色はテーマを変更しても固定されると説明されています。Obsidianのテーマを維持しながら配色を統一したい場合に、この方法が役立ちます。Peleのテーマ設定を参照してください。

Mermaidが図をレンダリングする場合にのみ図のフロントマターを使う

インストール済みの環境がMermaid自体を使っており、図のフロントマターに対応している場合は、図全体の配色と文字組みをまとめて設定できます。Mermaidでは、フロントマター設定はバージョン10.5.0以降で利用できます。サイトレベルの初期化は統合するアプリケーション側で行います。ノートの作成者は、代わりに図ごとの設定を使えます。Mermaidの設定を参照してください。

次の別案では、3つのノードすべてに共通の外観を設定します。まずは別のテスト用ブロックで試してください。

```mermaid
---
config:
  theme: base
  themeVariables:
    primaryColor: "#edf2f7"
    primaryTextColor: "#172033"
    primaryBorderColor: "#475569"
    lineColor: "#64748b"
    fontFamily: "Arial, sans-serif"
    fontSize: "16px"
---
flowchart TD
    A[Item A] --> B[Step B]
    B --> C[Result C]
```

YAMLは**mermaidフェンスの内側**、flowchart TDより前に置きます。これは図の設定であり、Markdownファイルの先頭にあるノートのプロパティとは別のものです。

Mermaidでは、カスタマイズ可能なテーマとして base を指定し、テーマ設定エンジンでは16進数の色を使う必要があります。テーマ設定のドキュメントには、上記の設定で使われている文字色、塗りつぶし色、枠線、線、フォントの各変数が記載されています。これらの設定は図の外観を指定するものであり、Obsidianアプリのテーマを切り替えるものではありません。

Peleでは、この例の themeVariables の色を変更しても、同じ結果にはなりません。これらの色は明示的にサポート対象外です。固定のノード色にはソースで定義したクラスを使うか、共通のレンダラー設定には以下のCSS変数を使ってください。Mermaidのテーマ設定が無視されるからといって、16進数の値を調整し続けないようにしましょう。Peleの互換性情報を参照してください。

小さなCSSスニペットでPeleの共通デフォルトを追加する

Peleを使用している場合は、CSS変数を使う方法もあります。複数の図でデフォルトを共通化したい場合や、すべてのブロックを編集する代わりに1つのスタイルシートを変更したい場合に便利です。

次のスニペットは、Peleのフローチャートを対象としています。周囲のノートやアプリのテーマはそのままに、文字、塗りつぶし、枠線、コネクタの色を設定します。セレクターと変数については、Peleのテーマ設定に記載されています。

.pele-flowchart {
  --pele-bg: #ffffff;
  --pele-fg: #172033;
  --pele-line: #64748b;
  --pele-surface: #edf2f7;
  --pele-surface-alt: #e2e8f0;
  --pele-border: #475569;
}

Obsidianで文書化されているデスクトップ版の手順でインストールします。

  1. Settingsを開きます。
  2. Appearance → CSS snippetsでOpen snippets folderを選択します。
  3. そのフォルダーにdiagram-defaults.cssという名前のプレーンテキストファイルを作成し、CSSを貼り付けます。
  4. Appearance → CSS snippetsに戻り、Reload snippetsを選択します。
  5. diagram-defaultsを有効にします。

これらの操作と、保存したスニペットの変更が自動で適用されることについては、CSSスニペット — Obsidianヘルプに記載されています。Macでは、エディターでファイル名が.css拡張子付きで保存されていることを確認してください。

前のセクションの3ノードの図を使い、図のフロントマターを削除して共通のデフォルト設定を試します。ソースで定義した色はレンダラーのデフォルト設定を上書きすることがあるため、最初の例のようにノードクラスを明示した図では、共通の塗りつぶし変数の効果を判断するのに適していません。

このスニペットでは、固定の明るい配色を使っています。普段の閲覧環境に合わせて別の配色が必要な場合は、文字、背景、枠線、線をまとめて変更し、結果を確認してください。--pele-bg変数は背景要素に使われます。図全体の背後に不透明なパネルが表示されることを保証するものではありません。

このスニペットはPele専用のものとして扱ってください。Mermaidのフローチャートのドキュメントでは、ノードのスタイル設定に classDef を推奨し、外部CSSはMermaid内部のスタイルに負ける場合があると注意しています。一方のレンダラー向けのスタイルシートが、もう一方でも動作するとは限りません。MermaidのCSSクラスに関する説明を参照してください。

読みにくい図を決まった手順で診断する

図はレンダリングされるものの、見た目が安定しない場合は、次の手順に従ってください。アプリのテーマを変えずに、構文、スタイルの適用範囲、利用できるスペースを切り分けられます。

  1. テストを簡単にする。 ノートの図を一時的なノートにコピーし、短いラベルを3つだけ残します。小さな例も動作しない場合は、色を調整する前に構文やレンダラーの対応状況を確認します。
  2. スタイル設定の方法を1つ選ぶ。 ソースクラスだけ、Mermaidのフロントマターだけ、またはPeleの変数だけを試します。すぐに組み合わせると、どの設定が上書きしているのか分かりにくくなります。
  3. 色の組み合わせを確認する。 ノードの塗りつぶしに対する文字色を確認し、次に周囲のノートに対する枠線と矢印の色を確認します。別のアクセントを追加する前に、読みにくい色の組み合わせを直します。
  4. 閲覧時の幅を確認する。 普段使うペイン幅で図をプレビューします。図が横に広くなりすぎる場合は、ラベルを短くするか、縦方向の配置を試します。
  5. 少しずつ複雑にする。 残りのノード、別のスタイル、エッジラベルを少しずつ追加します。比較できるように、最後に読みやすかったバージョンを残しておきます。

配置方向を確認するには、Mermaidで TD は上から下、LR は左から右を表します。図を書き直す前に、その宣言だけを変更してみてください。フローチャートの方向を参照してください。

最終的な表示は、インストール済みのObsidianレンダラーで判断します。外部エディターで構文を確認することはできますが、PeleはMermaidとは異なるノードの位置、間隔、エッジの経路を使用すると説明しています。ソースが同じでも、図形の配置まで同じになるとは限りません。

再利用可能な配色と一緒に、小さな参照用の図を残しておきましょう。普段使うペイン幅でラベル、ノード、コネクタが読みやすいことを確認できたら、同じルールを作業用ノートにも適用します。スタイルを繰り返し使えるようにし、レンダラーの境界を把握しておけば、Obsidianのテーマはそのままで統一感を保てます。

参考資料