タイトル付きコンテナには、末端のブロックも含めて、フローチャートのサブグラフを入れ子にして使います。空のコンテナがきれいに表示されない場合は、各末端に不可視のスペーサーを追加します。これにより、見た目の階層を維持できます。インストール済みのObsidianレンダラーで結果を確認してください。

このガイドでは、中立的な図を1つ作成します。外側のブロックは Collection というタイトルで、その中に Group A と Group B があり、各グループの中にはタイトル付きの末端コンテナがあります。ここでの目的は、末端を通常のラベル付き四角形に置き換えず、見出しのあるコンテナとして表示することです。

タイトル付きの末端ブロックには何を使うべきか？

別の意味のあるブロックを含むかどうかにかかわらず、表示するすべてのコンテナを subgraph で表します。Mermaidのフローチャートの例では、サブグラフ、明示的なサブグラフID、入れ子構造が説明されています。leafA["Block A"] のような通常のノード宣言は、ラベル付きノードを作成します。タイトル付きコンテナを宣言するものではありません。Mermaidのフローチャート — 基本構文を参照してください。

この例では、表示上のモデルとレイアウト補助を区別します。Collection、各グループ、末端ブロックが意味のある要素です。スペーサーは、レイアウトのために末端コンテナへ内容を持たせる実装上の詳細です。この補助要素を追加しても、末端の宣言がサブグラフからノードに変わるわけではありません。

この区別によって、この方法の適用範囲も明確になります。表示上の末端はタイトル付きコンテナのままですが、ソースには通常の補助ノードが含まれます。不可視の補助要素も含めてノード宣言を一切許可しない要件の場合、この回避策ではその厳しい要件を満たせません。

Macのインストール環境で使われるレンダラーを確認する

Obsidianでサイドバーから Settings を開き、General を選択して、アプリのバージョンを確認します。Obsidianの設定に関するドキュメントでは、バージョン情報の場所として General が案内されています。該当するリリースノートを選ぶ際は、そのバージョンを使ってください。

レンダラーの違いは結果に大きく影響します。2026年10月22日付の公式リリースノートでは、Desktop 1.15.0 は早期アクセス版とされ、Mermaidの構文をObsidianのPeleライブラリで描画し、Mermaid 12.1.0 の構文と互換性があると説明されています。同リリースでは、生成される図のクラスもPeleのクラスに変更されています。古いインストール環境がPeleを使っているとは限りません。また、互換性があるからといって、Mermaid.jsと同じ出力になるとは限りません。Obsidian 1.15.0 Desktop（早期アクセス）を参照してください。

このガイドで参照したMermaidのドキュメントには、バージョン 12.2.0 と表示されています。これは、Obsidianのリリースノートに記載された互換性レベルとは別のバージョンです。各環境で同じ例を確認するまでは、ドキュメント、オンラインエディター、インストール済みアプリをそれぞれ別の環境として扱ってください。

最初の試行では、レンダラー固有の設定や外部スタイルシートのセレクターを図に加えないでください。以下の例はサブグラフと図内のスタイル指定を使っているため、手元の環境を確認する出発点として使えます。

Obsidianのノートで入れ子のコンテナを作る

ノートを編集ビューで開き、開始と終了のフェンスを含む以下のブロック全体を貼り付けます。Obsidianのドキュメントでは、Mermaid図は言語識別子 mermaid を付けたフェンス付きコードブロックとして記述します。この形式のノートで図を表示するために、追加の図表プラグインは必要ありません。高度な書式設定構文を参照してください。

```mermaid
flowchart TB
    subgraph collection["Collection"]
        subgraph groupA["Group A"]
            subgraph blockA["Block A"]
                spacerA[" "]
            end
            subgraph blockB["Block B"]
                spacerB[" "]
            end
        end
        subgraph groupB["Group B"]
            subgraph blockC["Block C"]
                spacerC[" "]
            end
        end
    end

    classDef spacer fill:transparent,stroke:transparent,color:transparent;
    class spacerA,spacerB,spacerC spacer;
```

Cmd+E を押すと、編集ビューと Reading view を切り替えられます。完成した図は、編集中のカーソルによってソースが表示されないReading viewで確認してください。これらの操作は、Obsidianのビューと編集モードに記載されています。

意図した結果では、タイトル付きコンテナが6つ表示されます。コレクションが1つ、グループが2つ、末端ブロックが3つです。各末端には、ラベルが半角スペース1つの補助要素が含まれます。spacer クラスは、塗りつぶし、枠線、テキストを透明にするよう指定します。これはMermaidの文書化されたクラス機能とレイアウト上の回避策を組み合わせています。Mermaidのフローチャートのスタイル設定リファレンスでは、classDef とクラスの割り当てが説明されています。

この例は、文書化された構文に照らして確認済みですが、この記事のためにMac版Obsidianのセッションで描画したものではありません。そのため、合格の判断はローカル環境での目視確認によります。6つのタイトルがすべて表示され、各グループに対応する末端が含まれ、スペーサーの四角形が見えないことを確認してください。厳密な間隔や兄弟要素の位置は合格条件ではありません。

階層を変えずにラベルを変更する

まず、引用符で囲まれたタイトルだけを変更してください。collection、groupA、blockA などのIDはそれぞれ異なる値のままにします。こうすると、編集後のバージョンを最初の例と比較しやすくなります。

末端を追加するには、末端のサブグラフ全体をコピーし、サブグラフとスペーサーの両方に新しいIDを付け、最後のクラス割り当てに新しいスペーサーIDを加えます。これを囲んでいるグループの end より前に配置します。たとえば、Group B に4つ目の末端を追加する場合は、groupB の中で blockC と並べて配置します。

閉じる文は内側から外側へ読みます。末端を閉じ、そのグループを閉じ、次にコレクションを閉じます。インデントを使うと編集中に構造を把握しやすくなりますが、ソースでは各 end の位置を正しく表す必要があります。

空のサブグラフではなくスペーサーを使う理由

空のコンテナの挙動は、レンダラーやバージョンによって異なってきました。MermaidのIssue 5402 では、Mermaid 10.8.0 でELKを使うと空のサブグラフが機能せず、同時に提示されたDagreの例では機能したと報告されています。これは特定の構成に関する過去の報告であり、現在のすべてのレンダラーが空のサブグラフを拒否する証拠ではありません。Elk renderer not wokring on empty subgraphを参照してください。

実用上の判断として、インストール環境が特定されていない場合は、空のコンテナの挙動だけに依存する図は避けましょう。スペーサーを使えば、意味のあるタイトルはサブグラフに残したまま、各末端に明示的な内容を持たせられます。

ソースにどれだけ厳密な条件があるかに応じて、次の判断表を使ってください。

要件 最初に試す方法 確認事項
表示上の末端をタイトル付きコンテナのままにする 透明なスペーサーを使った入れ子のサブグラフ タイトル、包含関係、非表示の補助要素
ソースに補助ノードを一切含めない 対象のレンダラーで空の末端サブグラフを試す すべての空の末端が問題なく描画されるか
末端ブロックに後から実際の項目を入れる 末端サブグラフを維持し、スペーサーを置き換える 不要になった補助要素だけを削除する
ブロックを意図した列に配置する Mermaidのブロック図を別途検討する インストール済み環境での構文サポートとタイトル表示

Mermaidの専用ブロック図ドキュメントでは、複合ブロック、列、明示的な間隔指定が説明されています。配置が主な目的であれば、これらの機能を検討する価値があります。ただし、これらの機能だけで、このタイトル付きコンテナの表示をそのまま維持できるとは限りません。ブロック図のドキュメントを参照してください。

表示がおかしい場合の確認方法

一度に変更するのは1つだけにします。編集ミスとレンダラーの違いを見分けられるよう、完全な最初の例を別のノートにコピーしておいてください。

  1. ノートに図ではなくコードが表示される。 開始フェンスに mermaid が使われていることを確認し、Reading view に切り替えます。フェンスをObsidianで文書化されている図の形式と比較してください。
  2. 末端が通常のラベル付き四角形に見える。 その宣言を確認してください。subgraph で始まり、スペーサーはその内側の別の行にあるはずです。
  3. 末端の中に小さな四角形が残る。 スペーサーのIDと、最後の class 文が一致しているか確認します。どの補助要素が見えているか特定するため、一時的にスタイル設定を削除してから、元に戻してください。
  4. ブロックが間違ったグループに表示される。 レイアウト設定を調整する前に、閉じる end 文の並びを確認してください。
  5. オンラインでは動作するのにObsidianでは表示が異なる。 インストール済みアプリのリリースノートを、オンラインレンダラーのバージョンと比較してください。動作するローカルの例を基準として残しておきます。

配置を調整する前に包含関係を保つ

タイトルと包含関係が正しくなったら、配置が十分に読みやすいか判断します。四角形を小さくするためだけに末端のサブグラフをノードに置き換えないでください。その変更では、維持しようとしている表現が変わってしまいます。

同様に、包含関係を超えるつながりを図で表す必要がある場合にだけ、コネクターを追加してください。Mermaidのドキュメントでは、サブグラフ内のノードを外部のノードにリンクすると、そのサブグラフが親の方向を継承するという制限が説明されています。そのようなエッジを加えたら、レイアウトを再確認してください。サブグラフの方向を参照してください。

最後に、普段読むときの幅でノートを確認します。コレクション、そのグループ、タイトル付きの末端がはっきり見えるバージョンを残してください。役立つのは、末端ブロックをサブグラフのまま保った読みやすい包含階層であり、不可視のレイアウト補助がある場合は、その役割を明確に理解でき、後で簡単に削除できることです。

出典