システムをチームで開発していく時、情報を整理するためにクラス図などを作成する場合があるかと思います。
今回はそのクラス図など図形を作成するのに便利なDraw.ioがVisual Studio Codeの拡張機能として使えることがわかったので、その導入方法の備忘録になります。
では、始めます。
１：そもそもDraw.ioとは
Draw.ioとは、ログインなどすることなくブラウザ上でクラス図などの図形を作成できるサービスのことです。
現在は「diagrams.net」という名前に変わっていますが中身は同じで、以下のページにアクセスして「start」をクリックすると、ブラウザ上で図形を作成、編集できます。
作成した図形をpng画像としてローカルに保存できますし、xmlファイルとしてダウンロードしておくと再度そのxmlファイルをアップロードすると前の状態から編集を続けることもできます。
このように便利なDraw.ioがVisual Studio Codeの拡張機能として使えるようになっています。
２：Visual Studio CodeにDraw.ioをインストールする
では実際に拡張機能としてDraw.ioをVisual Studio Codeにインストールしていきます。
Visual Studio Codeを開き、拡張機能のアイコンをクリックしてマーケットプレイスを開き、検索欄に「draw.io」と入力して出てきた「Draw.io Integration」の「インストール」ボタンをクリックします。
クリックしてインストールが終わると以下のような画面が開きます。「無効にする」と「アンインストール」のボタン表示になっていればインストール完了です。
インストールが終わったら、念のためVisual Studio Codeを再起動させます。
これでVisual Studio CodeでDraw.ioが使えるようになりました。
３：Visual Studio CodeでDraw.ioを使ってみる
では実際にDraw.ioを使ってみます。
Visual Studio Codeを開いたら、メニューの「ファイル」→「新規ファイル」を選択して新規ファイルを作成します。
以下のように空のファイルが作成されるので、このファイルを開いた状態で「Ctrl + S」キーでファイルを保存します。
保存ファイル名は拡張子の種類を「拡張子なし」に、ファイルの拡張子を「.drawio」にして保存します。
拡張子「.drawio」のファイルが読み込まれると、以下のように図形のエディタ画面が表示されます。
あとはエディタを使って図形を書いていくことができます。
png画像などに書き出したい場合は、図形エディタ画面にある「ファイル」→「Export」を選択します。
すると上部に保存ファイル形式のプルダウンが出てくるので、保存したい形式を選択してクリックします。ここではpngにしました。
実際に書き出したpng画像は以下になります。白黒が反転しているのは、Visual Studio Codeをダークモードで使っているからだと思います。
これで大体の使い方がわかったと思います。
４：.drawioファイルの中身と編集
拡張子.drawioファイルの中身を見てみると、xmlファイルになっていることがわかります。
つまりテキストデータに従って図形が描写されているため、直接ファイルの中身を書き換えたりgitなどで管理がしやすい形式になっています。
図形エディタで編集していくのも良いですが、xmlファイルを直接いじった方が速い場合もあるのでVisual Studio Codeで図形エディタとxmlの両方同時に編集する手順も説明しておきます。
まずは普通に.drawioファイルを開きます。
開いたらVisual Studio Code画面の右上にある「エディターを右に分割」ボタンをクリックします。
左右で同じファイルが開きます。
どちらか一方のファイル名タグ部分を右クリックして「エディターを再度開くアプリケーションの選択」をクリックします。
Text Editorで開くかDraw.ioで開くか選択できるので、「Text Editor」の方を選択します。
すると以下のように片方だけxmlファイルで表示されます。
ちなみに両方とも同じファイルを編集しているので、片方を修正するとリアルタイムでもう片方も修正されます。
なのでどちらでも好きな方法で同時に修正することができます。
以上がVisual Studio CodeでDraw.ioを使う方法になります。
Draw.io自体は時々使っていたのですが、Visual Studio Codeの拡張機能として使えるようになったのでオフラインでも図形を編集できるので便利です。
ただまだWeb上で使えるものと完全互換というわけではないようですので、不満がある場合はWeb上の「diagrams.net」を使用するのが良いかと思います。
・参考資料
