技術とか戦略とか

SIerで証券レガシーシステムを8年いじってからSESに転職した普通の文系SEによる技術ブログ。

Visual Studio Codeでdraw.ioを使う

フローチャートやネットワーク図等は、フリーの作図ツール「draw.io」を使うと楽に記述できます。
Excelでも記述はできますが、draw.ioでは各々の図の記述に適した素材が提供されているという特徴があります。
また、draw.ioはブラウザ上での使用が想定されていますが、フリーのコードエディタである「Visual Studio Code」を用いるとローカル上で編集が可能になります。
 
今回は、使用手順を簡単に紹介していきたいと思います。
 
1.draw.ioのホームページにアクセスする。
https://app.diagrams.net/
 
2.ファイルの保存方法を選択する。
今回は「Device」を選択します。これで図がローカルに保存できるようになります。
また、選択後、新規にファイルを作成するかどうか聞かれるので、新規にファイルを作成する(Create New Diagram)を選択します。

f:id:akira2kun:20210520025533j:plain
 
3.どのような図を作成するか選択する。
今回は「Flowchart」を選択します。

f:id:akira2kun:20210520025940j:plain
 
4.ブラウザ上でファイルを編集してみる。
例えば、図形を追加する場合は、「Shapes -> General」から追加することができます。
また、図形の中に文字を入力したい場合は「右クリック -> Edit」で入力できます。
図を保存したい場合は、画面上部の「Click here to save.」から保存できます。

f:id:akira2kun:20210520025901j:plain

f:id:akira2kun:20210520025916j:plain
 
5.Visual Studio Code拡張機能を入れる。
ローカルでVisual Studio Codeを開き、拡張機能の検索画面を開きます。
そして、「draw.io」を検索し、「Draw.io Integration」をインストールします。

f:id:akira2kun:20210520030006j:plain
 
6.4でローカルに保存したファイルをVisual Studio Codeで開く。
すると、以下のように、ローカルでdraw.ioの図を編集できるようになります。
図形の追加は「General」から、文字編集は図形をダブルクリックすることで可能です。

f:id:akira2kun:20210520030025j:plain