若要在整頁自動版面配置時，讓 draw.io 容器及其內容保持在一起，請使用自動版面配置容器。draw.io 會將它視為單一圖形，並保留其內部排列。選取方式很重要：如果只選取版面配置容器，系統會改變的是容器內部的版面配置。進階版面配置圖形與版面配置容器、套用版面配置以重新排列圖表

本指南說明如何在 Mac 上排列數個小型、包含於容器中的圖表，同時讓每個圖表維持完整。範例使用 Container A、A1 和 A2 等中性標籤。目前官方桌面版發布頁列出 32.6.1 版及 macOS 安裝套件；依照最新版文件中的選單操作時，請使用目前的桌面版。32.6.1 版

哪種容器可以保留內部版面配置？

首先，請釐清圖表中「保持在一起」的意思。讓子圖形留在父圖形內、保留子圖形之間的相對位置，以及自動排列這些子圖形，是不同的需求。

一般容器可建立包含關係。若要新增圖形，請將它拖到容器上方，並在容器外框變成紫色時放開。只是在幾個節點後方畫一個大矩形，並不會建立這種關係。連接器可以跨越父容器的邊界。啟用或停用容器圖形的收合／展開功能

一般版面配置文件指出，執行版面配置時，一般容器中的內容會在容器內排列。選取含有至少兩個圖形的單一容器，便會將操作限制在其內容。因此，一般容器適合用來建立包含關係，但這項行為並不能確保原有的內部排列會保持不變。套用版面配置以快速整理圖表

自動版面配置容器提供此處所需、且文件有說明的界線：在整個圖表套用版面配置時，其內部圖形和連接器不會重新排列，而且每個容器都會視為單一圖形。進階版面配置圖形與版面配置容器

預期結果 適合的起始選項 重要條件
節點留在父圖形內，同時允許內部重新排列 一般容器 套用版面配置前，先建立實際的包含關係。
重新排列頁面，同時保留各容器的內部版面配置 自動版面配置容器 請對整個圖表套用版面配置。
在可見邊界內持續排列節點 Advanced 圖庫中的自動版面配置圖形 內部編輯會觸發其自身的版面配置。
將精確的手動排列整體移動 將圖形和連接器群組 文件有說明群組移動；但僅建立群組，並不代表任何自動版面配置都會保留內部位置。

此表根據文件中容器圖形、自動版面配置容器和群組的差異整理而成，可作為選擇參考。

建立能保持完整的小型容器

若要建立可見的框線，請從自動流程版面配置圖形開始。如此一來，就不必依賴一般矩形來充當版面配置容器。

建立內部圖表

  1. 在 Mac 上使用 draw.io Desktop 開啟圖表。
  2. 在左側面板找到 Advanced 圖形庫。如果沒有顯示，請點選 More Shapes，選取 General 圖形庫，再點選 Apply。
  3. 將水平或垂直流程版面配置圖形拖到畫布上。
  4. 使用起始圖形建立一條短連線鏈，並標上 A1、A2 和 A3。
  5. 若要延伸這條鏈，請將游標移到節點上，然後點選方向箭頭來複製並連接另一個節點。按兩下節點標籤即可重新命名。

在流程版面配置容器中，每個方向箭頭都會從游標所在的節點建立一個已連接的圖形，並由版面配置決定其位置。樹狀容器的同層節點與子節點規則不同。自動版面配置圖形也會配合內容調整容器大小。這些步驟依據官方自動版面配置圖形指南。

再建立第二個自動流程版面配置圖形，並加入 B1、B2 和 B3 節點。這些是示意標籤，並非必須遵循的命名慣例。建立兩個容器，更容易分辨移動整個容器與重新排列其子圖形的差異。

編輯時，請在每個版面配置容器中至少保留一個圖形。文件提醒，刪除最後一個包含在容器中的圖形，也會一併刪除版面配置容器。重建現有區段時，請保留一個起始圖形，直到替換內容完成。進階版面配置圖形與版面配置容器

選擇可見或透明的邊界

Advanced 版面配置圖形具有外圍泳道，可支援連接至邊界及從邊界連出的連線。透過 Arrange > Insert > Layout 建立的容器則有透明邊界；連接器必須連到其內部圖形。請依外部圖表要連接至容器本身，還是特定節點，來選擇適合的方式。進階版面配置圖形與版面配置容器

若要使用透明邊界，請選擇 Arrange > Insert > Layout，再選取版面配置。將圖形拖到節點的方向箭頭上，即可建立內部圖表。左上角的交叉箭頭控制點可用來移動版面配置容器。插入自動版面配置

套用外部版面配置，同時保留內部版面配置

套用外部版面配置前，請先完成各容器的內部排列，並新增能表達圖表區段之間關係的連線。例如，如果關係屬於整個區段，請將 Container A 的可見邊界連接到 Container B 的可見邊界。

接著依照以下步驟操作：

  1. 點選畫布上的空白處，清除選取狀態。
  2. 開啟 Arrange > Layout。
  3. 選擇合適的預設版面配置，例如用於由左至右關係的 Horizontal Flow。
  4. 檢查間距選項，再點選 Apply。
  5. 檢查容器位置和容器內部的節點。

水平流程會依連接器指示的由左至右方向排列圖形。Node Spacing 控制同一列或欄內的間距，Rank Spacing 則控制相鄰列或欄之間的間距。如果標籤或連線需要更多空間，請調整相關間距。流程版面配置

清除選取狀態會影響操作結果。如果只選取版面配置容器，Arrange > Layout 會取代容器目前使用的內部版面配置，而非重新排列頁面。若要刻意調整現有容器的選項，請選取該容器，再選擇 Arrange > Layout > Edit Layout。套用版面配置以重新排列圖表

請將此合成範例作為驗收檢查：套用外部版面配置後，A1、A2 和 A3 應維持原有的內部排列，三個 B 節點也應如此。其父容器可以移動。此檢查依據文件中將版面配置容器視為單一圖形的說明；這不代表此處實際執行過桌面版測試。進階版面配置圖形與版面配置容器

調整更多設定前，先判斷版面變更原因

子圖形在容器內重新排列了

先檢查容器類型和選取狀態。一般容器允許重新排列其內容。選取自動版面配置容器後，版面配置指令可能會取代其目前使用的版面配置。請先判斷發生了哪種操作，再調整間距或重建圖表。套用版面配置以快速整理圖表、套用版面配置以重新排列圖表

容器變大或變小

大小變化不一定表示包含關係失效。一般版面配置文件指出，即使停用 Resize Nodes，容器仍會調整大小以容納重新排列後的內容。這個選項控制個別節點的縮放；它並不保證容器邊界固定不變。套用版面配置以快速整理圖表

調整邊界大小時，子圖形也跟著拉伸

若要手動調整群組大小，請選取群組，並在 Style > Properties 下停用 Resize Children。文件中對應的樣式值為 recursiveResize=0，並套用於群組。這項設定控制等比例縮放；文件並未說明它能在自動版面配置時保留位置。停用調整子圖形大小，以個別調整群組圖形的大小

你需要精確的手動排列

若某個區段的手動放置位置必須完全精確，請選取其中的圖形和內部連接器，然後使用 Arrange > Group 或 Cmd+G。拖曳建立的群組，即可將其成員一起移動。這是文件有說明的手動移動方式；群組文件並未證明任意群組在所有自動版面配置中都能完全固定。群組與取消群組圖形和連接器

版面配置的結果不理想

按下 Cmd+Z 復原，再比較其他預設版面配置。官方指南提醒，版面配置會使用圖表的目前狀態，因此連續套用多種版面配置，不一定能重現相同結構。還原成相同的起始排列，才能更有效地比較。套用版面配置以重新排列圖表

對此任務，請明確決定兩件事：哪種版面配置負責排列各容器中的節點，以及哪種版面配置負責排列頁面。自動版面配置容器能依據文件所述，將這兩項操作區分開來。先建立內部區段，清除選取狀態，再套用外部版面配置，並檢查結果後再繼續。

來源