Macでdraw.ioのコネクタを接続したままにするには、端点を図形に接続し、離す前に接続位置がハイライトされていることを確認します。各端点を特定の位置に固定する必要がある場合は固定接続を使い、図形の周囲で接続位置が移動してもよい場合はフローティング接続を使います。公式コネクタガイド

このガイドでは、Macのdraw.ioで、Node A、Node B、Node Cとラベル付けされた3つの長方形を順につないだシンプルな図を並べ替える方法を説明します。個々のノードを移動しても接続を保ち、必要に応じて線の経路を調整することが目的です。

コネクタの接続位置を維持するかどうかを選ぶ

draw.ioには2種類の接続動作があります。固定接続は図形を移動しても、図形上の特定の位置にとどまります。フローティング接続はつながった状態を保ちますが、図形の位置やコネクタの経路が変わると、図形の周囲で接続位置が移動することがあります。端点ごとに異なる動作を設定できます。固定接続とフローティング接続

変更する前に、図で「接続したまま」が何を意味するのか決めておきましょう。

求める結果 選ぶ接続方法 移動後に確認すること
線をノードに追従させつつ、接続する辺は変更できるようにする フローティング 端点が意図したノードにつながったままであること
線を右辺の中央など、特定の位置に常に接続する 固定 端点がその位置にとどまること
一方のノードには特定の位置で接続し、もう一方では接続位置を変えられるようにする 一方の端点は固定、もう一方はフローティング 端点を個別に確認すること

これらの選択は、draw.ioのコネクタの比較で説明されている接続動作に基づいています。

状況を見分けるには、「端点がその場に残る」「端点の接続位置が別の辺に移る」「線に不自然な曲がりができる」の3つを分けて観察すると便利です。2つ目はフローティング接続の通常の動作である場合があります。3つ目は経路に関する問題です。線の形を整える前に接続を確認すれば、端点をつなぎ直す必要のある線に時間をかけずに済みます。

図形に追従する固定接続を作成する

例では、Node A、Node B、Node Cを横一列に配置します。Node Aの右側の接続点をNode Bの左側の接続点につなぎ、同様にNode BとNode Cをつなぐ想定です。これは説明用の配置であり、アプリケーションでのテスト結果を報告するものではありません。

Macで接続点を表示する

何も選択されないよう、空白部分をクリックします。書式パネルのDiagramタブでConnection Pointsが有効になっていることを確認します。Classicモードでは、View > Connection Pointsも使えます。Macでの公式ショートカットはOption+Shift+Oです。表示の切り替えなので、何度も押さず、表示結果を確認してください。図形にカーソルを合わせ、小さな十字が表示されるか確認します。接続点の表示設定

ハイライトされた接続点を使ってノードをつなぐ

  1. Node Aにカーソルを合わせ、右辺の接続点を探します。
  2. 接続点が緑色にハイライトされるまでカーソルを合わせ、その点からNode Bに向けてドラッグします。
  3. Node Bの左側の接続点にカーソルを合わせます。
  4. その点が緑色にハイライトされたら、マウスボタンを離します。
  5. Node Bの右側の接続点からNode Cの左側の接続点へ、同じようにつなぎます。

これは、固定コネクタを描くための公式手順に沿ったものです。選択中のコネクタでは、固定された端点が緑色の十字で示されます。固定コネクタを描く

次に、Node Bの本体を選択してドラッグし、横一列の配置から外れた下の位置へ移動します。Node AとNode Cはそのままにします。公式の説明によると、固定接続では、図形を移動してもコネクタの端点は選択した接続点にとどまります。この確認では、コネクタのハンドルではなく、図形自体を選択してドラッグしてください。図形を移動して固定接続を確認する

2本のコネクタを個別に確認します。例のとおりなら、一方はNode AとNode Bを、もう一方はNode BとNode Cをつないだままになっているはずです。ノードを1つだけ移動するのは実用的なテストになります。配置全体をまとめて移動すると、各端点がそれぞれのノードに追従しているかどうかを判断しにくくなります。

図形に触れているだけに見える端点を修復する

移動テスト中にコネクタの端点がその場に残った場合は、まずその端点を確認します。コネクタを選択し、端点を目的の図形の接続点までドラッグして、その点が緑色にハイライトされたらマウスボタンを離します。必要に応じて、もう一方の端点でも同じ操作をします。draw.ioの説明では、ドラッグしたコネクタの端点を接続点にドロップすると、図形を接続できます。コネクタの端点を接続点に接続する

フローティング接続では、端点を目的の図形に重ね、図形の輪郭が青くなったらマウスボタンを離します。フローティング接続の端点は青い円で表示されます。線が境界に触れて見えるかだけで判断せず、この視覚的なフィードバックを使ってください。フローティング接続の表示

つなぎ直したら、対象のノードだけをもう一度移動します。端点が追従しつつ接続する辺が変わる場合、その柔軟性が図に適しているか判断します。端点を常に左辺または右辺に置く必要があるなら、対応する固定接続点につなぎます。

標準の接続点が合わない場合はカスタム接続点を使う

図形に適切な接続点がない場合は、コンテキストメニューを開いてEdit Connection Pointsを選びます。Macでの公式ショートカットはOption+Shift+Kです。ビジュアルエディターで、接続点を追加したい位置をダブルクリックします。グリッドスナップが有効な場合は、その位置に影響します。その後、その接続点をコネクタに使います。コンテキストメニューのAdd Connection Pointから直接追加する方法もありますが、公式ドキュメントによると、回転または反転された図形では使用できません。図形の接続点を編集する

この作業では、接続時に修飾キーを押さず、表示されている接続点を使います。公式の接続点ページと修飾キーのショートカットページでは、端点をドロップする際のAltとShiftの説明が食い違っています。Macでは、ショートカットの一覧でAltはOptionに対応しています。表示された接続点を使う手順なら、この食い違いのある説明に頼らずに済みます。接続点の説明、修飾キーの一覧

端点がつながっていることを確認してから曲がりを直す

固定接続で決まるのは、コネクタが図形と接する位置です。中間の経路は、経由点とルーティングで別途制御します。選択中のコネクタには経由点のハンドルが表示され、それを動かすと経路が変わります。固定端点は接続点にとどまりますが、フローティング端点はこうした編集時に図形の周囲を移動することがあります。コネクタの経路と経由点

古い迂回経路が不要になった場合は、対象のコネクタだけを選択します。書式パネルでArrangeを開き、Resetを選んでからWaypointsを選びます。これにより、コネクタはより直接的な経路に戻ります。経由点をリセットしてもコネクタのラベルはそのままなので、後でラベルを確認してください。必要であれば、Reset > Label Positionsを選びます。ロックされたラベルは位置が維持されます。経由点とラベルをリセットする

意図的に経路を形作る場合は、コネクタを選択し、StyleタブのEffectsセクションでFollow Terminalsを有効にします。draw.ioの説明によると、このオプションを使うと、接続された図形を移動したときに手動設定した経由点も移動します。位置を変えた後は経路を確認してください。端点をつないだままにすることと、経路を読みやすく保つことは別々の要件です。接続図形とともに経由点を移動する

他の図形を避けるように経路を自動調整したい場合は、コネクタを選択してStyle > Waypoints > Auto-route around shapesを選びます。公式の説明によると、このルーティングは、接続された図形の移動やサイズ変更に応じて更新されます。コネクタを手動でドラッグして経由点を追加すると、自動ルーティングは無効になります。また、内容を自動配置するコンテナーの内側では、自動ルーティングは効果がありません。自動ルーティングとその制限

別の問題を解決する設定は使わない

Snap to Pointを使うと、図形やコネクタの移動に応じて、最も近い定義済み接続点をコネクタが使うようになります。最も近い接続点は変わることがあるため、選択可能なアンカー位置を使いつつ、端点がその間を切り替わってもよい場合に便利です。端点を特定の接続点に固定するには、固定接続を使います。アンカーポイントへのスナップの仕組み

同様に、公式のArrange > Layout > Orthogonal Routingコマンドはコネクタを一度だけ引き直すもので、継続的な自動ルーティングを有効にするものではありません。一度だけ経路を整えたい場合はこれを使い、以後の移動に応じて新しい経路を作成したい場合はAuto-route around shapesを選びます。一度限りのルーティングと自動ルーティング

最後に、Node Bだけを移動し、4つのコネクタ端点をすべて確認してから、曲がりとラベルを点検します。この手順を終えれば、作業の完了を明確に判断できます。意図したノード同士がつながり、固定端点が選択した接続点を維持し、新しい配置でも経路が読みやすくなっています。

出典