Draw.ioが VSCodeに対応。機能をご紹介

Draw.io は、「diagrams.net」というところがやっている、ウェブ上で無償で図などを作成できるサービスです。料金に関しては確認できませんでしたが、基本的には無料で使うことができます。

早速、使ってみましょう。

  1. diagrams.net」というウェブサイトにアクセス、「Start」ボタンをクリックします
  2. 保存先を指定するためにGoogleドライブなどに連携するためのメニューが出てきます
  3. 「Create New Diagram」をクリックすると、テンプレートを選ぶ画面になります

ここで、以下のようなカテゴリーが表示されます。

  • Basic(ベーシック)
  • Business(ビジネス)
  • Charts(チャーツ)
  • Cloud(クラウド): AWSのサーバー構成を作ったりするための図
  • Engineering(エンジニアリング):電気系統の図を描いたりするもの
  • Flowcharts(フローチャート):プログラミングをする時の考えをまとめるもの
  • Layout(レイアウト):画面設計
  • Maps(マップ):マインドマップなどを作る
  • Network(ネットワーク図)
  • Other(アザー):ビジネスの思考ツールなどに使えるもの
  • Software(ソフトウェア):ソフトウェアのデータベースの設計とかをする時に使えるもの
  • Tables(テーブル):表組み
  • UML(ユーエムエル):ソフトウェア開発に使われる仕様書を書くための技法
  • Venn(ベン図)

ほかにもURLからテンプレートを読み込むこともできます。

実際にグラフを描いてみよう

では「Charts」を使って、グラフを描いてみましょう。

好きなテンプレートを選ぶ

作りたいグラフを選んで「Create」ボタンをクリックします。今回は棒グラフを選びます。エクセルで作ったようなグラフを描くことができるので、グラフを簡単に変更して図を作っていくことができます。

機能も本格的に作られていますが、Illustratorのような図の描画ツールを使ったことがある方なら、戸惑うことなく使えるかと思います。

自由に図を追加する

選んだ棒グラフに、図を差し込むこともできます。今回は円を追加してみます。

大きさを変えたり、さらに図を追加したり、図と図とをつないだりと、自由に描くことができます。人のマークのようなものもあり、いろいろな図を作ることができます。

保存方法も自由に選べる

作った図は、このままGoogleドライブなどに保存できます。

保存形式も「Export as」でPNG形式、JPEG形式、SVGにも吐き出すことができます。SVG画像で吐き出して、プログラムでグラフの描画部分を変更して、実際のデータを反映することも可能です。他にもいろいろな機能が用意されています。

それでは本題に戻ります。今回は、Visual Studio CodeがこのDraw.ioというサービスに対応したという話です。

Visual Studio CodeでDraw.ioを使う方法

では早速やっていきましょう。

Visual Studio Codeから「Draw.io Integration」という拡張機能にアクセスしていきます。サーチのところで「Draw.io」などで検索をかけると出てきます。

インストールボタンをクリックし、ソフトを再起動するとインストールできます。

Visual Studio CodeでDraw.io Integrationを使う方法

使い方については2通りあります。

1.別で対応ファイルを作成して開く方法

Draw.io Integrationを使うには以下3つのどれかの拡張子のファイルを作る必要があります。

対応している拡張子.drawio/.dio/.drawio.svg

たとえば、Draw.io本体でデータを作成しセーブして「Save as」から「.drawio」という形式のファイルを保存します。それをVisual Studio Codeに読み込ませて開く方法です。

2. Visual Studio Code内で新しく作る方法

Draw.io Integrationでファイルを新しく作ることもできます。

以下のような時に便利です。

  • ウェブサイト作成でプログラミングをしていて、サイトの設計が必要になったとき
  • データベースの設計やシステムの設計書が必要になったとき
  • フローチャートが必要になったとき

フローチャートなどは、通常はある程度考えてからプログラムを作るものです。ですが、作っている途中で「やっぱり考え方が変わったから、ちょっとフローチャートを変更したいな」という時にも使えます。

プログラムだけを変えてしまうとフローチャートと考えが分かれてしまうので、フローチャートの方も直す必要が出てきます。

そういう時には、新しいファイルを開いて「spec.dio」などで保存しておきましょう。「.dio」という拡張子を付けると、自動的にDraw.ioが起動します。ここで仕様書などを作っていくことができます。

例えば「Flowchart」とかを選んでフローチャートを描くこともできます。最近はあまりフローチャートを使わないので、UMLのフロー図を使うことが多いかもしれませんが、フロー図もここで設計していくことが可能です。「Basic」で図を描くこともできます。

ただし残念ながらDraw.ioの全ての機能がここに盛り込まれているわけではありません。簡単な図を描くことができるのと、Draw.ioで作ったファイルをVisual Studio Codeで見ることができるという2点を覚えておいてください。

Visual Studio CodeでDraw.ioを見る方法

Draw.ioで作ったファイルをVisual Studio Codeで見ようとすると、文字が見えなくなる、色が異なって表示されてしまうといったことがあります。

これはテーマを変更することで解決できます。

Visual Studio Codeで設定されているテーマがDraw.ioのテーマと合っていないことが問題なので以下の設定で変更していきます。

ファイルメニュー → 設定(「Preferences」)→「Settings」→「Extensions」→「Draw.io Integration」→「Theme」

最初は「automatic」になっているので、例えば「atlas」にすると明るいテーマになります。設定画面を一度閉じて、再度ファイルを開きます。

先程と画面の見え方が変わっています。明るいテーマになっており、多少色が異なるかもしれませんが、キャンパスの部分の白い所は一緒になりました。

Visual Studio Codeで作ったファイルをエクスポートしたいとき

最後にDraw.io Integrationで作ったファイルを保存する方法です。残念ながらこの拡張機能からはエクスポートができません。SVGに変更したり、PNG形式で保存したりということができず、あくまでもセーブまでしかできません。

ただし、少し工夫をして、「Save & Exit」で保存したものをDraw.ioで開いてから保存する方法があります。

Draw.ioの「Device」からオープン・フロムということで該当ファイルを開くと、Draw.io Integrationで保存した内容が反映されます。ここからSVGにエクスポートすることもできます。

Draw.ioがVisual Studio Codeに対応:まとめ

いかがでしたでしょうか?

なかなか機能の全てがVisual Studio Codeは盛り込まれていないので、使いどころが難しいかもしれませんが、ただ非常に面白いアプローチだと感じています。

Visual Studio Codeは、基本的にはエディタソフトですので、今回のようにビジュアルで使えるソフトがエディタソフトの中に入っていくというのは、ちょっと考えにくいかもしれません。ですが、Visual Studio Codeというのはプラットフォームなので、拡張機能の機能を使えば「こんなこともできちゃうんだぞ」という可能性がひとつ広がった感じです。

今後Visual Studio Codeがもっともっといろいろな進化を遂げていくのではないかな、というのを垣間見させてくれる面白い拡張機能だと思いました。