draw.io でクラス図を作成してみよう

こんにちは。フロントエンドエンジニアの辻です。
前回は作図ツールの draw.io を紹介に加えて、シンプルなフロー図を作成しました。
今回はもう一歩踏み込んでクラス図を作成してみたいと思います。

作成するクラス図の概要

今回は基底クラスの「車」と派生クラスの「バス」と「消防車」を作図していきます。
各クラスの詳細は以下の通りです。

基底クラスの「車」

• プロパティ
  • 全長
  • 全幅
  • 全高
  • 重量
  • 排気量
• メソッド
  • 加速する
  • 減速する
  • 曲がる

派生クラスの「バス」

• プロパティ
  • 乗車人数
• メソッド
  • アナウンスする
  • 自動ドアを開ける
  • 自動ドアを閉める

派生クラスの「消防車」

• プロパティ
  • 放水量
• メソッド
  • サイレンを鳴らす
  • 放水する
  • はしごを伸ばす

draw.io でクラス図を作成してみる

それではクラス図を作成していきましょう。
今回も Web ブラウザ版の draw.io で作業していきます。
draw.io ファイルの新規作成方法は、前回の「draw.io のはじめ方」と同様ですのでスキップします。

基底クラス「車」を作成する

新規ファイルの編集画面が表示されましたら、画面左側の「一般」のうち、「リスト」をクリックします。

すると、画面右側のキャンバスにリストが1つ挿入されました。

挿入されたリストのテキスト部分をダブルクリックして、編集していきます。
まずはクラス名とプロパティを埋めていきます。

すぐにプロパティの枠が埋まってしまいました。
こんな時はプロパティの枠に行を新規追加しましょう。
編集画面右上の 3 つ並んだアイコンのうち、真ん中のアイコンをクリックします。

すると、画面右端に新たなパネルが表示されました。
このパネルから選択中の要素の見た目や情報を編集できます。

では、プロパティの枠に新たな行を追加しましょう。
「全高」をクリックした状態で、画面右端のパネルの「配置」タブを選択します。
「テーブル」の項目にボタンが 3 つ並んでいるので、真ん中の「行を下に挿入」ボタンをクリックしましょう。

これで「全高」の直下に行を新規追加できました。
同じように行を追加していき、残りのプロパティを入力していきましょう。

「排気量」まで入力できたら、プロパティは完成です。
次にメソッドを作成していきます。

まず「排気量」の下に空白行を 1 行追加します。
その後、画面左側の「その他」から「Horizontal Line」をドラッグ＆ドロップします。

ドロップ先は「排気量」と空白行の間です。
うまい具合の位置にマウスカーソルが配置すると、下記キャプチャのように「車」クラスがハイライトされます。
このハイライトが表示されたタイミングでドロップします。

すると、「排気量」と空白行の間に区切り線を配置できました！

プロパティ同じく、メソッドも埋めていきましょう。
ここまでくれば「車」クラスは完成です。

派生クラス「バス」と「消防車」を作成する

次に基底クラス「車」を元にした派生クラス「バス」と「消防車」を作成します。

…といっても、やる事は先程と変わりません。
画面左側の「一般」の「リスト」から作成していくだけです。
作成済みの「車」クラスをコピー&ペーストしても OK です。

次に「バス」と「消防車」クラスから、「車」クラスに向けて汎化を表す矢印をひきましょう。

「バス」クラスの左側中央付近にマウスカーソルを置くと、半透明の緑色の円が表示されます。
この円をクリックして、「車」クラスの右側中央までドラッグします。

うまくいけば、下記キャプチャのように2つの図形間に線が配置されます。

次に図形間の線のスタイルを編集していきます。
「車」クラスと「バス」クラスの間に配置した線をクリックして選択状態にします。
その後に、画面右側の「スタイル」タブの「線」から始点と終点のスタイルを更新しましょう。
今回は汎化を表したいので、始点を「なし」に。終点を「白抜き矢印」にします。

「バス」クラスと同じように「消防車」クラスにも汎化の線を配置すれば、クラス図の完成です！

最後に、画面右上の「ファイル」から「保存」もしくは「名前を付けて保存」をクリックして、ファイルを保存しておきましょう。

最終的な完成図はコチラです！

まとめ

今回は draw.io を使ってクラス図を 1 から作成してみました。
draw.io にはクラス図の他にも様々な作図が可能ですし、初期テンプレートも豊富に用意されています。

また機会がありましたら、draw.io の機能を紹介します！