自动布局：即时整理你的架构图

每个架构团队最终都会面临一个任务：图表变大了。最初的五个整齐排列的系统现在变成了二十七个元素和四十条关系，其中一半互相交叉。上周有人添加了一个新容器，放在唯一的空白处——右下角，连接线穿过了三个其他节点。图表信息仍然准确，只是无法阅读了。

于是有人花一个下午拖动方框。上半部分看起来不错了，然后意识到移动API网关会破坏下面所有内容的对齐。重新开始。一小时后，图表稍微好了一点。下一个添加元素的人放错了位置，循环重复。

这是一个布局问题，布局问题有算法解决方案。这就是自动布局的作用。

一键，一切归位

自动布局位于图表工具栏中。点击按钮，图表上的每个元素——系统、容器、组件、代码元素、覆盖层和组合组——都会移动到计算出的最优位置。关系理顺了。交叉的边分离了。层级变得可见。

动画需要400毫秒。节点以缓动三次方曲线从当前位置滑动到新位置。你能看到变换过程，这有助于保持空间方向感——你可以追踪每个元素去了哪里，而不是图表突然跳转到不熟悉的排列。

在底层，自动布局使用ELK.js，即编译为JavaScript的Eclipse Layout Kernel。ELK是一个图布局引擎，实现了数十年的自动图形绘制研究。Archyl使用其分层算法，专门为有向图设计——这正是架构图的特征。

布局过程分为几个阶段：

ELK首先根据节点在依赖图中的位置将其分配到各层。没有入边的元素分配到第一层。仅依赖第一层元素的元素分配到第二层。依此类推。这创建了使架构图可读的自然自上而下（或从左到右）的层级结构。

在每一层内，ELK重新排序节点以最小化交叉的边数。它使用一种称为层扫描的技术——反复遍历各层并交换节点位置，直到交叉数稳定。更少的交叉意味着更清晰、更可读的图表。

确定层和排序后，ELK计算实际的x/y坐标。Archyl使用带有平衡对齐的Brandes-Koepf算法，产生紧凑的布局，其中相连节点尽可能垂直对齐（或在从左到右模式下水平对齐）。这创造了相关元素之间令人满意的直线箭头。

ELK使用样条路径路由边，Archyl根据最终节点位置重新计算每个关系的最优连接手柄——上、下、左或右。如果一个系统在容器上方，关系从系统底部连接到容器顶部。如果它们并排，连接从左到右。

架构图不是平面的。容器存在于系统中。组件存在于容器中。覆盖层将相关元素分组。自动布局处理所有这些嵌套关系。

当系统在图表上包含容器（显示为组合组节点）时，ELK将其视为带有内部子节点的组合父节点。子节点在父节点内布局，父节点调整大小以适应。内部布局使用与顶层相同的算法——分层、交叉最小化和对齐——因此系统组内部的结构与外部一样整洁。

覆盖层的工作方式相同。如果覆盖层配置了元素，这些元素在布局期间被视为覆盖层的子元素。覆盖层调整大小和位置以包含其成员，并带有适当的内边距。即使是"浮动"覆盖层——没有显式元素分配的——也能处理：自动布局检测哪些节点视觉上在覆盖层的边界内并将它们保持在一起。

原始ELK输出很好但不完美。Archyl应用两轮后处理来优化它。

链对齐找到在垂直轴上几乎对齐的相连节点，并强制它们到完全相同的中心线。这使用Union-Find结构对相连节点链进行分组，然后计算中位中心并对齐整个链。结果是相连元素之间完美的直线箭头——不再有看起来草率的"几乎垂直"的线。

重叠解决检测对齐后过于接近的节点并将它们推开。它迭代运行最多五次，处理移动一个节点与另一个节点产生新重叠的级联位移。

两轮处理后，每个位置都吸附到与React Flow背景匹配的20像素网格。这意味着元素精确对齐到网格线，创造出精心、有意的外观。

自动布局支持两个方向：自上而下和从左到右。自动布局按钮旁边的切换让你在两者之间切换。

自上而下是默认值，适用于大多数架构图——外部参与者在顶部，系统在中间，基础设施在底部。从左到右更适合管道式架构或数据水平通过处理阶段的流程导向视图。

方向影响一切：层分配、交叉最小化、对齐链和手柄计算。切换方向，整个图表重新定向。

自动布局不仅仅是视觉效果。动画完成后，每个计算出的位置都持久化到服务器。节点位置、覆盖层边界、组合组尺寸和边手柄都被保存。关闭浏览器，明天回来，布局与自动布局留下的完全一样。

边手柄更新批量合并为单个API调用以提高效率。覆盖层大小调整单独持久化。节点位置批量发送。没有任何丢失。

自动布局也适用于全局架构页面——不仅限于单个项目。当你查看整个组织中的系统以及数十个跨项目关系时，手动布局尤其痛苦。自动布局为全局视图带来同样的一键整理，具有相同的组合图支持，包括系统组包含其容器。

自动布局在三种场景中最有用：

AI发现之后。 当Archyl的AI分析代码仓库并生成C4模型时，初始位置是算法计算的，但可能不反映你选择的布局。自动布局给你一个干净的起点。

重大变更之后。 你添加了五个新容器，重组了关系，在系统间移动了组件。图表变得混乱。自动布局从头重新计算一切。

探索新项目时。 你加入了一个项目，想要理解其架构。图表是按其他人的心理模型布局的。自动布局产生标准的、可读的排列，使结构清晰。

运行自动布局后你总是可以调整单个元素。它是一个起点，不是约束。

自动布局现已在所有计划和每张图表上可用——项目级和全局级。打开任何图表，点击工具栏中的自动布局按钮，看着你的架构自动整理。

你的架构值得被阅读。自动布局确保图表不会妨碍理解。

关于构建有效架构图的更多信息，请参阅C4模型介绍。要了解自动布局如何与跨项目视图交互，请探索实时协作与全局架构。要分析自动布局排列的关系，请尝试影响雷达。