ドローイングツールの使い方を知りたい

この記事ではシステムデザインの問題を解く際に使用するドローイングツールの使い方を説明します。

オブジェクトの操作

オブジェクトとはVMインスタンスやロードバランサーなどのシステムを構成するコンポーネントやテキストといった描画エリア内に配置できる要素を指します。

探す

配置したいオブジェクトを探すときは、該当するカテゴリで一覧を確認するか、検索バーに関連するキーワードを入力します。

配置する

サイドバーに表示されているアイコンを右の描画エリアにドラッグ&ドロップすることで任意の場所にオブジェクトを配置することができます。また、アイコンをクリックすると描画エリアの中央にオブジェクトが配置されます。

移動する

選択状態でドラッグするか矢印キーを操作することでオブジェクトを任意の場所に移動することができます。

削除する

選択状態でDeleteキーを押すか、詳細設定の削除アイコンをクリックすることでオブジェクトを削除することができます。

ネットワークの大きさを調整する

VPCやサブネットなどのネットワークは選択時に周囲に表示される小さな正方形をドラッグすることで大きさの調整が可能です。

設定を変更する

• オブジェクトを選択すると描画エリア右上に詳細設定のポップアップが表示されます。
• 各オブジェクトにはデフォルトで種類に応じた名前（VMインスタンスやSQLなど）が設定されていますが、課題要件を満たすシステムを表現する上でわかりやすい名前に変更することができます。
• また名前以外に固有の設定項目を持つオブジェクトが存在します。例えばVMインスタンスの場合、自動スケールをONにすることでスケーリングを表現することができます。

※オブジェクト固有の設定項目一覧

矢印の操作

オブジェクト同士を矢印で繋げることでリクエストやレスポンスなどのデータフローを表現することができます。

他のオブジェクトと繋げる

• オブジェクト選択時に表示される小さな円を起点にドラッグして矢印を伸ばします。
• 接続可能なオブジェクト上にカーソルが移動するとそのオブジェクトの周囲が青く表示され、ドロップするとオブジェクト同士が接続されます。

一度接続した矢印を繋げ直す

矢印を選択した際に始点と終点に表示される小さな円をクリックした後、他のオブジェクトの上でもう一度クリックをすると矢印の接続箇所を変更することができます。

矢印を双方向にする

矢印は有向グラフであり初期状態では始点と終点を持ちますが、詳細設定のセレクターから向きを双方向に変更することができます。

テキストの操作

• テキストも他のオブジェクト同様サイドバーから描画エリア内に配置することができます。
• 配置されているテキストをダブルクリックするとテキストエリアが表示され、自由にテキストを編集できます。
• テキストエリア以外の場所をクリックすると編集内容が保存されます。

描画エリアの操作

拡大・縮小する

描画エリア右下に表示されている+-ボタンを押すことで領域全体を拡大または縮小することができます。マウスの場合はcmd + ホイール操作、トラックパッドの場合はピンチイン・ピンチアウトジェスチャーでも同様の操作が可能です。

表示領域を動かす

表示領域は自由に動かすことができます。マウスの場合はセンターボタンを押した状態、トラックパッドの場合は二本指を触れた状態でカーソルを動かすと、カーソルの動きと合わせて表示領域全体が移動します。

ミニマップ

描画エリア右下にミニマップが表示されます。ミニマップを表示したくない場合は×ボタンを押すことで収納することができます。

ショートカット一覧

※WindowOSの場合はcmdキーの代わりにctrlキーを使用します。

以上でドローイングツールの操作についての説明は終わりです。