若要在整页自动布局时让 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 撤销，然后再比较其他预设。官方指南提醒，布局会根据图表的当前状态运行，因此连续应用多个布局不一定能得到相同的结构。恢复到相同的起始排列后再进行比较，更有参考价值。应用布局重新排列图表

对于此任务，请明确作出两个决定：哪个布局负责排列每个容器内的节点，以及哪个布局负责排列页面。自动布局容器提供了文档明确支持的方式，将这两种操作分开。先构建内部部分，清除选区，应用外部布局，然后检查结果再继续。

来源