オートレイアウト：アーキテクチャ図を一瞬で整理

すべてのアーキテクチャチームが最終的に直面するタスクがあります：図が大きくなりすぎたのです。最初はきれいに並んだ5つのシステムだったのが、今では27の要素と40のリレーションシップになり、半分は互いに交差しています。先週、誰かが新しいコンテナを追加し、唯一の空きスペース——右下隅に置きました。接続線は他の3つのノードを横切っています。図には正確な情報が含まれています。ただ読めないだけです。

そこで誰かが午後をかけてボックスをドラッグします。上半分はきれいになりましたが、APIゲートウェイを移動すると下のすべての配置が崩れることに気づきます。やり直し。1時間後、図は少し良くなりました。次に要素を追加する人が間違った場所に置き、サイクルが繰り返されます。

これはレイアウト問題であり、レイアウト問題にはアルゴリズム的な解決策があります。それがオートレイアウトです。

ワンクリックで全体が移動

オートレイアウトは図のツールバーにあります。ボタンをクリックすると、図上のすべての要素——システム、コンテナ、コンポーネント、コード要素、オーバーレイ、複合グループ——が計算された最適位置に移動します。リレーションシップが解きほぐされます。交差するエッジが分離します。階層が見えるようになります。

アニメーションは400ミリ秒かかります。ノードはイーズドキュービックカーブで現在の位置から新しい位置にスライドします。変換が起きるのを見ることで、空間的な方向感を維持できます——図がいきなり見慣れない配置にスナップするのではなく、各要素がどこに行ったかを追跡できます。

仕組み

内部では、オートレイアウトはELK.jsを使用しています。JavaScriptにコンパイルされたEclipse Layout Kernelです。ELKは自動グラフ描画の数十年の研究を実装したグラフレイアウトエンジンです。Archylはその層状アルゴリズムを使用しており、これは有向グラフ——まさにアーキテクチャ図がそうであるもの——向けに設計されています。

レイアウトプロセスはいくつかの段階で実行されます：

レイヤー割り当て

ELKはまず、依存関係グラフにおける位置に基づいて各ノードをレイヤーに割り当てます。入力リレーションシップのない要素は最初のレイヤーに。最初のレイヤーの要素にのみ依存する要素は2番目のレイヤーに。以下同様。これにより、アーキテクチャ図を読みやすくする自然なトップダウン（または左から右）の階層が作られます。

交差最小化

各レイヤー内で、ELKは交差するエッジの数を最小化するようにノードを並び替えます。レイヤースイープと呼ばれる手法を使用します——レイヤーを繰り返し通過し、交差数が安定するまでノード位置を入れ替えます。交差が少ないほど、よりクリーンで読みやすい図になります。

ノード配置

レイヤーと順序が決まると、ELKは実際のx/y座標を計算します。Archylはバランスの取れたアライメントを持つBrandes-Koepfアルゴリズムを使用し、接続されたノードが可能な限り垂直（または左から右モードでは水平）に整列するコンパクトなレイアウトを生成します。これにより、関連する要素間に気持ちの良いまっすぐな矢印が作られます。

エッジルーティング

ELKはスプラインパスを使ってエッジをルーティングし、Archylは最終的なノード位置に基づいて各リレーションシップの最適な接続ハンドル（上、下、左、右）を再計算します。システムがコンテナの上にある場合、リレーションシップはシステムの下部からコンテナの上部に接続されます。横に並んでいる場合、接続は左から右になります。

複合グラフのサポート

アーキテクチャ図はフラットではありません。コンテナはシステム内に存在します。コンポーネントはコンテナ内に存在します。オーバーレイは関連する要素をグループ化します。オートレイアウトはこれらすべてのネスト関係を処理します。

システムが図上でコンテナを含む場合（複合グループノードとして表示）、ELKはそれを内部の子を持つ複合親として扱います。子は親内にレイアウトされ、親は収まるようにリサイズされます。内部レイアウトはトップレベルと同じアルゴリズム——層状、交差最小化、アライメント——を使用するため、システムグループ内部の構造は外部と同じくらいクリーンです。

オーバーレイも同様に動作します。オーバーレイに設定された要素がある場合、それらの要素はレイアウト中にオーバーレイの子として扱われます。オーバーレイは適切なパディングでメンバーを包含するようにリサイズ・再配置されます。明示的な要素割り当てのない「フローティング」オーバーレイも処理されます：オートレイアウトはオーバーレイの境界内に視覚的にあるノードを検出し、一緒に保ちます。

ポストプロセス：アライメントとグリッドスナップ

生のELK出力は良いですが完璧ではありません。Archylは2つのポストプロセスパスを適用して洗練させます。

チェーンアライメントは、垂直軸上でほぼ整列している接続されたノードを見つけ、正確に同じ中心線に強制します。Union-Find構造を使って接続されたノードのチェーンをグループ化し、中央値を計算してチェーン全体を整列させます。結果は、接続された要素間の完全にまっすぐな矢印です——もう「ほぼ垂直」の見苦しい線はありません。

オーバーラップ解消は、アライメント後に近すぎるノードを検出し、押し離します。最大5パスまで反復的に実行され、1つのノードを移動して別のノードとの新しいオーバーラップが生じるカスケーディングシフトを処理します。

両パスの後、すべての位置はReact Flowの背景に一致する20ピクセルグリッドにスナップされます。これにより要素がグリッド線に正確に整列し、洗練された意図的な外観が生まれます。

方向トグル

オートレイアウトは2つの方向をサポートします：トップダウンと左から右。オートレイアウトボタンの隣のトグルで切り替えられます。

トップダウンがデフォルトで、ほとんどのアーキテクチャ図に適しています——外部アクターが上、システムが中央、インフラが下。左から右はパイプラインスタイルのアーキテクチャや、データが処理ステージを水平に移動するフロー指向のビューに適しています。

方向はすべてに影響します：レイヤー割り当て、交差最小化、アライメントチェーン、ハンドル計算。方向を切り替えると、図全体が再方向付けされます。

永続化される内容

オートレイアウトは単なる視覚的なトリックではありません。アニメーション完了後、計算されたすべての位置がサーバーに永続化されます。ノード位置、オーバーレイ境界、複合グループ寸法、エッジハンドルがすべて保存されます。ブラウザを閉じ、明日戻ってきても、レイアウトはオートレイアウトが残したとおりです。

エッジハンドルの更新は効率のために単一のAPIコールにバッチ処理されます。オーバーレイのリサイズは個別に永続化されます。ノード位置は一括送信されます。何も失われません。

グローバルアーキテクチャビュー

オートレイアウトはグローバルアーキテクチャページでも動作します——個別のプロジェクト内だけではありません。組織全体のシステムを数十のクロスプロジェクトリレーションシップとともに見ている場合、手動レイアウトは特に辛いです。オートレイアウトはグローバルビューにも同じワンクリック整理をもたらし、システムグループがコンテナを含む同じ複合グラフサポートを備えています。

いつ使うか

オートレイアウトは3つのシナリオで最も有用です：

AI発見の後。 ArchylのAIがリポジトリを分析してC4モデルを生成したとき、初期位置はアルゴリズムで計算されますが、あなたが選ぶレイアウトを反映していないかもしれません。オートレイアウトがクリーンな出発点を提供します。

大きな変更の後。 5つの新しいコンテナを追加し、リレーションシップを再編成し、システム間でコンポーネントを移動した。図が乱雑になった。オートレイアウトがすべてを一から再計算します。

新しいプロジェクトを探索するとき。 プロジェクトに参加し、アーキテクチャを理解したい。図は他の誰かのメンタルモデルに合わせてレイアウトされていた。オートレイアウトが構造を明確にする標準的で読みやすい配置を生成します。

オートレイアウト実行後はいつでも個別の要素を調整できます。出発点であって、制約ではありません。

はじめかた

オートレイアウトは現在、すべてのプランとすべての図（プロジェクトレベルおよびグローバル）で利用可能です。任意の図を開き、ツールバーのオートレイアウトボタンをクリックして、アーキテクチャが自動的に整理されるのをご覧ください。

あなたのアーキテクチャは読みやすくあるべきです。オートレイアウトが図の邪魔をしないようにします。

効果的なアーキテクチャ図の構築についての詳細は、C4モデル入門をご覧ください。オートレイアウトがクロスプロジェクトビューとどう連携するかは、リアルタイムコラボレーションとグローバルアーキテクチャを探索してください。オートレイアウトが配置するリレーションシップを分析するには、インパクトレーダーをお試しください。