メソッド、クラスを表すテキストボックスを作成する。

auto align機能を使ってテキストボックスを配置する。 テキストボックスを移動している時に、隣の図形に整列すると赤い点線が表示される。 この点線が表示されているうちにマウスボタンを離すと、隣の図形と正確に整列して配置することができる。

2つのテキストボックスを接続する直線、折れ線を作成する。 直線、折れ線を作成する時にマウスを他の図形の特徴点、または境界に近づけると、マークが表示される (コネクターの作成)。

: 水平/垂直のコネクター
コネクターの直線セグメントを水平または垂直にするためには、Shift/Ctrlキーを押しながらマウスをドラッグする (直線の作成, 折れ線の作成)。 または直線または折れ線の端点を、Shift/Ctrlキーを押しながらドラッグすると水平線/垂直線にすることができる (直線の端点移動, 折れ線の端点移動)。

: マーク =>接続点マーク
通常の操作では接続点マークが複数表示されることはない。 現在表示中のマークは次のマークが表示される前に消去される。 下図は、分かり易さのために接続点マークを複数表示している。

図(a)

コネクターは他のコネクター(直線/折れ線)に接続できる。下図はコネクターとコネクターの接続例。

図(b)

ステップ4 レイアウトの変更.

図(c)は左の2つのブロックをグループ化して右側に動かしている。小さなカラーマークは接続点で、 左の2つのブロックを動かしても接続が多摩たれていることを示している。最終的に図(d)を得て完了。 なおカラーマークの色は、グラフとして接続関係を見たときに、動かされる図形からの距離(深さ: depth)を示している。

図(c)

図(d)

下図の表を直線と矩形(丸み付き矩形)を使って作成する。 水平線/垂直線は、Shift/Ctrlキーを押しながらマウスをドラッグして作成する (直線の作成)。 : マーク =>接続点マーク
通常の操作では接続点マークが複数表示されることはない。 現在表示中のマークは次のマークが表示される前に消去される。 下図は、分かり易さのために接続点マークを複数表示している。

右端の線をShift/Ctrlキーを押したまま、右へドラッグする。 小さなカラーマークは接続点を表しており、 右端の線の線を動かしている間表示され、接続点が保持されていることを示している。カラーマークの意味は例1ステップ4と同じ。

下端の直線をShift/Ctrlキーを押したまま、下へドラッグし、水平線/垂直線を追加して完了。

下図はコネクターが他のコネクターに接続している例である。 カラーマークは接続点を表し、カラーはグラフとして図形を見たときの選択された図形からの距離(depth)を示す。
=> コネクターのAuto trackingオプション

(a) 元の図形		(b) 選択した矩形を下方へ動かす。 auto tracking option="free direction"		(c) 選択した矩形を大きく下方へ動かすと直線コネクターが折れ線コネクターに変わる。 auto tracking option="keep x/y direction"
(d) 選択した直線コネクターの端点を動かす。選択した直線コネクターに接続するコネクターも動く。 auto tracking option="keep x/y direction"		(e) 選択した矩形を大きく上方へ動かすと直線コネクターが折れ線コネクターに変わる。 auto tracking option="keep x/y direction"		(f) 選択した矩形を右へ動かすとそれに接続するコネクターも動く、 auto tracking option="keep x/y direction"

下図は表のような図形を、外側の丸みつき矩形をリサイズして変更する例を示す。 またコネクターのauto trackingオプションの"free direction" と "keep x/y direction"の違いも示す。

=> Auto trackingオプション

(a) 元の図形	(b) 外側の丸みつき矩形を選択し、 そのNW(North West)リサイズハンドルを右上へ動かす。 auto tracking option="free direction"
(c) 外側の丸みつき矩形を選択し、 そのNW (North West)リサイズハンドルを右上へ動かす。 auto tracking option="keep x/y direction"

外側のコーナR矩形のNW (North West)リサイズハンドルを動かしてリサイズ

(3)表に類似の図形のリサイズ 不都合な例

下図は(2)と同じ図であり、内側へリサイズすると正しく処理されない例を示す。 一般的に言って、外側の図形が内側の図形と交差するほど大きくリサイズしてしまうと、 リサイズマークを外側に動かし元の位置に戻しても、 図形自体は元に戻らないことがある。この場合undoボタンをクリックして元に戻すしかない。

(a) 外側の丸みつき矩形を選択しそのN (North)リサイズハンドルを右内側 (下へ)動かす。 auto tracking option ="free direction"	(b) 外側の丸みつき矩形を選択しそのN (North)リサイズハンドルを内側 (下へ)動かす。 auto tracking option ="keep x/y direction"	(c) 外側の丸みつき矩形のN (North)リサイズハンドルをさらに内側 (下へ)動かす。 auto tracking option=BR>"keep x/y direction"
(d) 外側の丸みつき矩形のN (North)リサイズハンドルをさらに内側 (下へ)動かす。 auto tracking option ="keep x/y direction"	(e) 外側の丸みつき矩形のN (North)リサイズハンドルを外側 (上へ)動かす。 auto tracking option ="keep x/y direction"	(f) 外側の丸みつき矩形のN (North)リサイズハンドルを元の位置に戻しても元の図形には戻らない。 auto tracking option ="keep x/y direction"