詳細なdraw.ioセクションには折りたたみ可能なコンテナを使い、概要のコネクタをそのコンテナに接続します。これにより、外部の図形同士に直接の接続を作り出す折りたたみ動作に頼らず、折りたたんだビューでも意味のある接続先を示せます。

このガイドは、Macのdraw.io Desktopで図を編集し、概要を読みやすく保ちながら、1つのセクション内の詳細を表示したり隠したりしたい人向けです。draw.ioの公式ドキュメントでは、スタンドアロンのデスクトップアプリケーションがmacOSに対応していることが確認できます。draw.ioをオフラインで実行する

折りたたんだセクションが何を表すか決める

まず、小さな架空の例を用意します。外部の図形にInput A、セクションにSection B、もう1つの外部図形にOutput Cというラベルを付けます。Section Bの中には、B1、B2、B3というラベルの詳細図形を3つ配置し、順番につなぎます。

意図する概要はシンプルです。Input AからSection Bへ、Section BからOutput Cへ接続します。セクションを展開すると、内部の3つのステップがどう関係するかを確認できます。詳細が隠れていても、セクションは概要の中で意味のある要素として残ります。

この構成は、ドキュメントに記載された2つの機能に基づいています。コンテナは他の図形を格納して折りたたむことができ、コネクタはコンテナの境界をまたいで接続できます。ただし、コンテナのドキュメントには、任意の図形の連なりを折りたたむと、外部の隣接図形同士に新しい直接接続ができるとは記載されていません。折りたたみは詳細を表示または隠す機能として使い、概要の関係は明示的に定義してください。コンテナ図形の折りたたみ／展開機能を有効または無効にする

読者が理解する必要のある内容に合わせて、構成を選びます。

読者が知りたいこと 推奨する構成 概要で保たれる意味
どのセクション同士がつながっているか？ 外部の図形をセクションコンテナに接続する。 セクションが全体の流れに参加している。
外部とつながる内部のステップは具体的にどれか？ その内部図形への接続を残し、関係を明確にラベル付けする。 詳細な接続先がモデルに残る。折りたたんだ状態と展開した状態の両方を確認する。
セクション全体を隠し、外部同士を結ぶ1本の矢印だけを残せるか？ その関係が正しい場合は、概要用の表現を明示的に描く。 直接の関係は、折りたたみの結果として想定するものではなく、作成者が意図して要約したものになる。

この判断ガイドは、ドキュメントに記載された機能をもとにした図の設計上の推奨事項です。図形が見えなくなっただけで、コネクタに新しい意味を持たせてしまうことを避けられます。

Macで折りたたみ可能なセクションを作る

既存の図の構成を変更する場合は、コピー上で作業します。新しい図を作る場合は、まず小さな例を作り、同じ配置を大きなセクションにも適用します。

詳細を追加する前にコンテナを作る

長方形を追加し、内部の図形3つが収まる大きさにします。その長方形だけを選択してCmd+Gを押します。公式のコンテナガイドには、図形をコンテナにするMac用ショートカットとしてこの操作が記載されています。Extras > Collapse/Expandを有効にします。チェックマークが付いていれば有効です。Minimalテーマでは、右クリックしてOptions > Collapse/Expandを選ぶ手順がドキュメントに記載されています。コンテナの設定と折りたたみ操作

コンテナにSection Bというラベルを付けます。概要表示でもセクションを識別できるよう、短い名前にします。タイトルの近くには折りたたみコントロール用のスペースを確保し、その場所に詳細図形を重ねないようにします。

B1、B2、B3をコンテナ内に追加し、順番につなぎます。Input AとOutput Cは外側に配置します。これらの名前と配置は説明用です。親セクションとその内容を簡単に見分けられるようにすることが目的です。

既存の図形と内部コネクタのまとまりについては、それらをまとめて選択し、Arrange > Groupを選ぶか、Cmd+Gを押す方法もdraw.ioで使えます。その際は内部コネクタも選択に含めます。外部の図形はグループに含めないでください。図形とコネクタをグループ化／グループ解除する

セクションが折りたたみ可能であることを確認する

セクションの折りたたみコントロールをクリックして折りたたみ、もう一度クリックして展開します。現在のグループに関するドキュメントでは、折りたたみ可能なセルに−/+コントロールが表示され、セルを折りたたみ可能にするスタイル設定としてcollapsible=1が挙げられています。グローバルオプションを有効にしても通常のグループにコントロールが表示されない場合は、図を何度もグループ化し直すのではなく、選択したセルの設定を確認してください。ドキュメントに記載されたスタイル設定は、Edit Style…またはArrangeタブのPropertiesセクションから利用できます。グループを折りたたむ／展開する

概要コネクタを追加する前に、セクションを折りたたむと意図した詳細が隠れ、名前は読める状態に残ることを確認します。折りたたんだセクションの外に何かが残る場合は、見た目が重なっているからといってコンテナに含まれていると決めつけず、所属を確認します。

概要の接続をセクション自体に付ける

例では、Input AからSection Bの境界にコネクタを1本引き、もう1本をSection BからOutput Cへ引きます。この2つの接続は、全体図におけるセクションの位置を表します。内部のB1–B2–B3という連なりは、セクションの詳細を表します。

正確な接続位置が重要でない場合は、フローティング接続を使います。ソース図形上の方向矢印からコネクタをドラッグし、ターゲットの輪郭が青くなったときにその上で離します。図が変更されると、フローティング端点は図形の周囲を移動する場合があります。接続位置を固定する場合は、緑色で強調表示された接続点から開始し、そこで終点を設定します。固定端点はその接続点にとどまります。固定コネクタとフローティングコネクタの違いを見る

この概要では、どのセクションがつながっているかが重要なため、フローティング端点から始めるのが妥当です。特定の辺や接続位置に意味がある場合は、固定端点を選びます。どちらを選んでも、折りたたんだ状態と展開した状態の両方を確認する必要があります。

矢印だけでは意味が不明確な場合は、Input to BやOutput from Bなどのラベルを追加します。ラベルを表示したい位置でコネクタをダブルクリックします。ラベルの位置を変えるには、ラベルを選択してひし形のハンドルをドラッグします。コネクタにラベルを付ける

関係が実際にはB2に属する場合は、その詳細な接続を残します。より広い意味での説明も正しいのでない限り、コンテナへの接続に置き換えないでください。たとえば、Input to B2というラベルを付け、概要でもわかるセクション名を併記できます。公式ドキュメントではコンテナの境界をまたぐ接続が可能とされていますが、それだけでは、折りたたんだ後にあらゆる詳細な接続先がどれほど明確に示されるかは保証されません。その図を折りたたんだ状態と展開した状態の両方で確認してください。コンテナ境界をまたぐ接続

透明なレイアウトコンテナの落とし穴を避ける

Arrange > Insert > Layoutから作成するコンテナは、接続可能な境界を持つセクションとは別の選択肢です。公式のレイアウトガイドによると、挿入されたこれらのレイアウトコンテナの境界は透明で、コネクタを接続できません。コネクタは内部の図形に接続する必要があります。また、ガイドでは、コネクタを接続できるスイムレーンで囲まれたAdvancedレイアウト図形も区別されています。Advancedレイアウト図形とレイアウトコンテナ

概要の矢印をセクションの境界に接続する必要がある場合は、接続可能なコンテナまたはスイムレーンを使います。内部の図形の自動配置を優先し、それらの図形への接続で図の要件を満たせる場合は、透明なレイアウトコンテナを選びます。

コネクタの経路を調整する前に両方のビューを確認する

例を作ったら、次の順序で確認します。曲がりや間隔を整える前に、概要で意図した関係が伝わるかを確かめます。

  1. Section Bを展開し、内部の連なりを確認します。
  2. 2本の概要コネクタが、輪郭の近くで終わっているだけでなく、セクションに接続されていることを確認します。
  3. セクションを折りたたみ、見えている名前とコネクタラベルだけを使って図を読みます。
  4. 見えている矢印がすべて、正しい内容を表しているか確認します。
  5. もう一度展開し、内部のコネクタとラベルを確認します。
  6. 隣接するセクションを1つずつ、次にまとめて折りたたんで、同じ手順を繰り返します。

折りたたんだときに余白が大きくなりすぎる場合は、配置を意図的に調整します。グループのドキュメントでは、折りたたみコントロールをShiftキーを押しながらクリックすると、サイズの変化に合わせて兄弟セルを右または下へ移動できると説明されています。これは特定の折りたたみ動作であり、任意の図を自動的に再構成する機能を保証するものではありません。折りたたみと隣接セル

コネクタに不自然な迂回がある場合は、それを選択して経路を調整します。青いポイントをドラッグするか、コネクタを右クリックしてAdd Waypointを選びます。手動でウェイポイントを変更すると、そのコネクタでは自動ルーティングの直交スタイルが無効になるため、両方のビューを改善する場合にだけ曲がりを追加してください。不要になった経路を取り除くには、右クリックしてClear Waypointsを選び、結果の経路を確認します。コネクタの経路を変えるウェイポイントの使い方

経路を変えた後は、ラベルも個別に確認します。手動で位置を調整したラベルは、再調整が必要になる場合があります。ラベルをコネクタ上の元の位置に戻すには、コネクタまたはラベルを選択し、ArrangeタブのResetを選んでからLabel Positionsを選択します。コネクタのラベル位置をリセットする

見た目を整える前に構造の問題を解決する

症状 確認すること 次に行う操作
折りたたみコントロールが表示されない グローバルの折りたたみオプションと、選択したセルの折りたたみ可否 Extras > Collapse/Expandを有効にし、必要に応じてcollapsible=1を確認する。
折りたたんでも詳細が表示されたままになる その図形がセクションに属しているか 見た目の位置ではなく、コンテナまたはグループへの所属を確認する。
セクションの境界にコネクタを接続できない 挿入した透明なレイアウトコンテナかどうか 境界レベルの接続には、接続可能なコンテナまたはスイムレーンを使う。
折りたたんだ矢印の意味が曖昧 意味が内部の接続先に依存しているか 関係にラベルを付けるか、セクションレベルの接続を明示的に作成する。
線に不要な曲がりが残る 既存のウェイポイント ウェイポイントを調整またはクリアしてから、ラベルを再確認する。

この確認方法は、ドキュメントに記載されたコンテナの操作、グループ設定、レイアウトコンテナの境界、ウェイポイントツールを組み合わせたものです。どの関係を示すかは、図についての編集上の判断です。

役に立つ折りたたみ図では、すべての詳細を開かなくても、各セクションを識別し、見えている接続を理解できます。まず概要を明示的に作り、折りたたみは詳細な構造を表示するために使います。セクション全体を飛ばす直接接続が必要な場合は、その要約を意図的に描き、内部の関係が重要な箇所では詳細表示も残してください。

出典