使用巢狀流程圖子圖建立有標題的容器，包括葉節點區塊。空容器顯示效果不佳時，請在每個葉節點內加入不可見的間隔項目。這樣可以保留可見的階層；請在已安裝的 Obsidian 繪圖器中檢查結果。

本指南會製作一張中性的圖表：一個標題為 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 標示為搶先體驗版，並表示它透過 Obsidian 的 Pele 函式庫繪製 Mermaid 語法，並相容於 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 之間切換。使用閱讀檢視查看完成的圖表，避免編輯游標顯示其原始碼。這些控制方式記載於 Obsidian 的檢視模式與編輯模式。

預期結果會有六個可見的有標題容器：一個集合、兩個群組和三個葉節點區塊。每個葉節點都包含一個標籤為單一空格的輔助項目。spacer 類別會要求填滿色、邊框和文字皆透明。這結合了 Mermaid 說明文件所述的類別機制與一種版面配置替代方法；Mermaid 在其流程圖樣式參考中說明了 classDef 和類別指派。

本範例已依照記載的語法檢查，但撰寫本文時並未在 Mac 上的 Obsidian 工作階段中實際繪製。因此，驗收方式是就地目視檢查：六個標題都應出現，每個群組都應包含指派給它的葉節點，且不應看見任何間隔矩形。精確間距和同層項目的位置不屬於驗收標準。

修改標籤而不改變階層

先只修改引號內的標題。請讓 collection、groupA、blockA 和其他 ID 各自保持唯一。這樣更容易將修改後的版本與起始範例比較。

若要新增葉節點，請複製一個完整的葉節點子圖，為子圖和間隔項目分別指定新的 ID，並將新的間隔項目 ID 加入最後的類別指派中。請將它放在外層群組的 end 之前。例如，若要在 Group B 中加入第四個葉節點，請將它放在 blockC 旁邊，並置於 groupB 內。

請由內而外閱讀結尾宣告：先關閉葉節點，再關閉所屬群組，最後關閉集合。縮排能讓編輯時的結構一目了然，但原始碼仍必須正確表達每個 end 的位置。

為什麼使用間隔項目，而不是空子圖？

不同繪圖器和版本對空容器的處理方式不盡相同。Mermaid 問題 5402 回報，在 Mermaid 10.8.0 中，空子圖搭配 ELK 時無法正常運作，而提供的 Dagre 範例則能正常運作。這是特定設定的歷史回報，不能證明所有目前的繪圖器都會拒絕空子圖。請參閱 Elk renderer not wokring on empty subgraph。

實際上，對於要在未指定的安裝環境中使用的圖表，不宜只依賴空容器的處理方式。間隔項目方法會為每個葉節點提供明確內容，同時保留子圖上有意義的標題。

選擇來源碼需要多嚴格時，請參考下列判斷方式：

要求 起始方法 檢查項目
可見葉節點必須保持為有標題的容器 使用含透明間隔項目的巢狀子圖 標題、包含關係和隱藏輔助項目
原始碼不能包含任何輔助節點 在目標繪圖器中嘗試空的葉節點子圖 每個空葉節點是否都能正常顯示
葉節點區塊之後會放入實際項目 保留葉節點子圖，並以實際內容取代間隔項目 只移除不再需要的輔助項目
區塊需要刻意安排欄位位置 另外評估 Mermaid 區塊圖 已安裝版本的語法支援度和標題呈現方式

Mermaid 專門的區塊圖說明文件介紹了複合區塊、欄位和明確間距。若主要目標是安排位置，值得評估這些功能。不過，這些功能本身無法保證轉換後仍會保留這種特定的有標題容器呈現方式。請參閱區塊圖說明文件。

排查顯示異常的結果

每次只改一個項目。將完整的起始範例另存於另一則筆記，方便區分繪圖器差異和編輯錯誤。

  1. 筆記顯示的是程式碼，而不是圖表。 確認開頭圍欄使用 mermaid，然後切換至 Reading view。將圍欄與 Obsidian 說明文件中的圖表格式比較。
  2. 葉節點看起來像一般的標籤矩形。 檢查它的宣告。開頭應為 subgraph，並在其內部另起一行放置間隔項目。
  3. 葉節點內仍有小矩形可見。 確認間隔項目的 ID 與最後的 class 宣告相符。暫時移除樣式，找出你看見的是哪個輔助項目，然後再恢復樣式。
  4. 某個區塊出現在錯誤的群組。 調整版面設定前，請先檢查結尾 end 宣告的順序。
  5. 圖表在線上正常，但在 Obsidian 中顯示不同。 比較已安裝應用程式的版本說明與線上繪圖器的版本。將正常運作的本機範例保留下來作為參考。

調整位置前先保留包含關係

標題和包含關係正確後，再判斷目前的排列是否足夠易讀。不要只為了縮小矩形，就把葉節點子圖換成節點：這項修改會改變你原本要保留的表示方式。

同樣地，只有在圖表需要表達超出包含關係以外的關聯時，才加入連接線。Mermaid 說明文件指出一項方向限制：若將子圖內的節點連接到外部，該子圖會繼承其父層的方向。加入這類邊線後，請重新檢查版面。請參閱子圖中的方向。

最後，請在平常閱讀筆記的寬度下檢查內容。保留能清楚呈現集合、群組和有標題葉節點的版本。理想的結果是易讀的包含階層，葉節點區塊仍保持為子圖，並且你清楚了解任何不可見的版面配置輔助項目，也能在日後輕易移除。

來源