はんなりと、ゆるやかに

アジャイル、スクラムが好きなITエンジニアが日々から学んだことをアウトプット

Visual Studio Code+Draw.io IntegrationでUMLなどの作図を便利にする

Visual Studio Code(VS Code) にDraw.ioの拡張が追加されたと聞いて使ってみました。

marketplace.visualstudio.com

UMLだったり、説明資料だったり、図を書くときにぴったりな機能です。普段からVS Codeを使っていれば環境構築も1分ぐらいで終わるので使ってみてはどうでしょうか。

Draw.ioとは

Draw.ioはUMLやフロー図など様々な作図ができるツールです。オンライン上やデスクトップアプリケーションとして使えます。今回、VS Codeでも使えるようになりました。
www.diagrams.net

操作画面

操作画面は以下のとおりです。VS Code 上でストレスなく作図できます。おどろきです!
f:id:iucstscui:20200528232732p:plain

インストール方法

VS CodeのExtensionsでdraw.ioを検索するとDraw.io Integrationが見つかりますのでインストールするだけです。簡単!
f:id:iucstscui:20200528235314p:plain

使い方

編集のはじめかた

drawiodrawio.svgの拡張子をつけたファイルを作成、編集すると作図画面が表示されます。

シェイプ(図形)の追加

作図で使用するシェイプを追加できます。More Shapes...を選択すると選択画面が表示されるので欲しいシェイプにチェックを入れてApplyで追加できます。
f:id:iucstscui:20200529002208p:plain

図をXMLで編集する

図を見ながらXMLで編集できます。チュートリアルには書いてあったのですが少し詰まりましたので手順をまとめておきます。

1.VS Codeを2画面にする
VS Codeの「View→Editor Layout」から「Split 〇〇」を選択します。(〇〇はDownでもLeftでもお好きな分割で良いです)
f:id:iucstscui:20200529003915p:plain

2.XMLファイルとして開きなおす
右上の「・・・」から「Reopen With...」を選択し、「Text Editor」を選択するとXMLファイルとして開かれます。
f:id:iucstscui:20200529004150p:plain

f:id:iucstscui:20200529004339p:plain

すると以下のように作図タブとXMLタブが同時に編集できます。
f:id:iucstscui:20200529005532p:plain

XMLを修正するとリアルタイムで図が修正されていきます。検索しながら編集したり、同じような修正を何か所も行う場合はXMLで修正したほうが便利ですね。

まとめ

VS CodeでDraw.ioの拡張を試してみました。VS Codeを使っていれば簡単に作図環境が構築できるので便利です。.drawio.pngファイルの編集機能のリリースも予定されていますので、さらに便利になりそうです。(本記事執筆時のDraw.io Integrationのバージョンは0.5.2です)