自動レイアウト

Diagrammix3 には、ダイアグラム要素を最適な読みやすさで自動的に配置する強力な自動レイアウト機能が搭載されています。レイアウトエンジンは、階層的な有向グラフ向けに設計された Sugiyama アルゴリズムを使用しています。

自動レイアウトを使うタイミング

自動レイアウトは以下のような場合に便利です:

  • Mermaid や他の形式からダイアグラムをインポートした場合
  • 多くの編集を経てダイアグラムが乱雑になった場合
  • 大量の要素をすばやく整理したい場合
  • ラフなスケッチからきれいなレイアウトにしたい場合

自動レイアウト適用前

自動レイアウトの適用

メニューから

  1. 整理したいシェイプを選択(すべて選択するには Cmd+A)
  2. 配置 → 自動レイアウト を実行
  3. 選択した要素が再配置されます

ツールバーから

配置ツールバーの自動レイアウトボタン(グリッドアイコン)をクリックします。

自動レイアウト適用後

レイアウトの方向

レイアウト階層の方向を選択できます:

方向説明最適な用途
上から下ルートが上、末端が下組織図、フローチャート
下から上ルートが下、末端が上デシジョンツリー
左から右ルートが左、末端が右プロセスフロー、タイムライン
右から左ルートが右、末端が左RTL ダイアグラム

方向オプションは 配置 → 自動レイアウト → 方向 からアクセスできます。

自動レイアウトメニュー

レイアウトオプション

間隔

要素間のスペースを制御します:

  • 水平間隔: 兄弟ノード間の距離
  • 垂直間隔: 階層レベル間の距離

レイアウトオプションパネルまたはインスペクタで調整します。

配置

同じレベルのノードの配置方法を選択します:

  • 中央: ノードをレベル内で中央に配置
  • 左/上: ノードを先頭に配置
  • 右/下: ノードを末尾に配置

Sugiyama アルゴリズム

自動レイアウトは Sugiyama アルゴリズム(レイヤード・グラフ描画とも呼ばれる)を使用しており、以下の処理を行います:

  1. レイヤーの割り当て: 接続に基づいてノードを階層レベルに配置
  2. 交差の削減: レイヤー間のエッジ交差を最小化
  3. ノードの配置: エッジの長さを最小化するようにノードを配置
  4. エッジのルーティング: きれいなコネクタパスを作成

このアルゴリズムは以下に最適です:

  • フローチャート
  • 組織図
  • 依存関係グラフ
  • UML クラス階層
  • ステートマシン

より良い結果を得るためのヒント

自動レイアウト実行前

  1. 不要な接続を削除: 余分なエッジが複雑さを増します
  2. 関連アイテムをグループ化: グループは単一ノードとして扱われます
  3. 方向を検討: ダイアグラムに適した方向を考えましょう

自動レイアウト実行後

  1. 位置の微調整: 必要に応じて個々の要素を調整
  2. ラベルの確認: ラベルが読みやすく重なっていないことを確認
  3. 間隔の調整: 要素が窮屈な場合は間隔を広げる

制限事項

  • 循環グラフ: 循環参照のあるダイアグラムは完璧にレイアウトされない場合があります
  • 密なグラフ: 非常に密なダイアグラムではエッジの交差が残る場合があります
  • カスタム位置: レイアウトは手動で設定した位置を上書きします
  • アスペクト比: アルゴリズムはキャンバスのアスペクト比を考慮しません

元に戻す

結果が気に入らない場合は、Cmd+Z を押してレイアウトを元に戻し、以前の位置を復元できます。