仕事でUML図（クラス図やシーケンス図など）を書くことがあります。
以前はExcelを使ってUML図を作成していましたが、かなり面倒な作業でした。たとえばクラス図を作る際には、セルの横幅を調整したり矢印でつなげるために背景色を透明にした図形を用意したりと、手間がかかっていました。
そんなとき、先輩社員が「Visual Studio Code + Draw.io」を使ってクラス図を作成しているという情報を得ました。試しに使ってみるとExcelよりも圧倒的に作りやすく見やすいことに驚きました。
ただ1点デメリットがありまして。。。それはファイルの共有がしにくい ことです。「Visual Studio Code + Draw.io」で作成したファイルを開くには、Visual Studio Codeがインストールされている必要があるのです。
でもそんな不便さがありながらも、サクッとクラス図を描いて共有するにはExcelなんかよりも「Visual Studio Code + Draw.io」を使った圧倒的にラクだと思います。
というわけで今回はクラス図を例として、「Visual Studio Code + Draw.io」を使ってUML図を描く方法について紹介してみたいと思います。
準備：各種インストール
「Visual Studio Code + Draw.io」を使ってUML図を描くためには、（当然のことながら）「Visual Studio Code」と「Draw.io」をインストールする必要があります。
ちなみに「Draw.io」は「VisualStudioCode」のアドオン（追加機能）です。
VisualStudioCodeのインストール
まずはVisualStudioCodeをインストールしましょう。
もしかしたら「VisualStudio2022 インストールしてあるよ！」という状態かもしれませんが、VisualStudioCodeはVisualStudioとは別物なので、別途インストールする必要があります。
VisualStudioCodeは以下のリンクからダウンロードできます。
リンクをクリックすると以下のような画面が出てくると思いますので、「Download for Windows」をクリックしましょう（Windows以外の場合はボタンのテキストが違うかもです）。クリックするとダウンロードが開始されます。
ダウンロードしたファイル（私の場合は「VSCodeUserSeetup-x63-1.98.2.exe」でした）をダブルクリックして、セットアップを開始します。
セットアップ用のウィンドウが出てきます。
とくに難しい項目は無いと思いますが、よくわからない場合はすべて「OK」で進めて大丈夫です。
Draw.io拡張機能のインストール
VisualStudioCodeがダウンロードできたら次は「Draw.io」拡張機能のインストールです。
まず、VisualStudioCodeを起動します。
起動ができたら、下の手順でDraw.io拡張機能をインストールします。
- 左側にある「拡張機能」アイコンをクリック
- 出現したタブの上部にある検索窓に「draw」と入力
- 検索結果に表示される「Draw.io Integration」をクリック
- 「インストール」をクリック
少し待って「アンインストール」などのボタンに変われば、インストールが完了です。
クラス図を描いてみる
Draw.io用ファイルを作成（.drawio）
Draw.ioを使ってクラス図を描くには、専用のファイルを作る必要があります。
まず、VisualStudioCodeにて、ファイルを作成するフォルダを選択します。左上にある「ファイル」をクリックし「フォルダを開く」をクリックして、ファイルを作成するフォルダを開きましょう。
フォルダを開いたら、フォルダを右クリックして「ファイルを作成」をクリックします。
新しくファイルが作成されるので、ファイル名前を入力してEnterを押します。このとき拡張子は必ず「.drawio」にしてください。これによりDraw.io用のファイルであることが認識されます。
ちゃんとファイルが作成できれば、下の画像のように、右側になにやら変わった画面が表示されます。
クラス図を描いてみる
（執筆中…）
左側にある「一般」タブから中央の方眼紙に図形をドラッグ＆ドロップすると、いろいろと配置できます。
完成したらファイルを、ファイルサーバーやメールに添付して渡せばOKです！（見せるだけならスクリーンショットのほうが受け取り側は確認が楽かも？？）
コメント