Draw.ioをVSCodeで使う

当記事では、Draw.ioというツールを使って、アプリケーションの構成図を作成する方法をご紹介していきます。

Z-A-K-I

VSCodeでAWSの構成図とかかきたいなー

構成図を書くのに無償で利用できるツールがないかなー

と、思ってる方におすすめです。

この記事では、以下のことを紹介してます。

Draw.ioは、Webのサービスでブラウザで利用する方法が有名ですが、VSCode上でも利用することができます。今回はVSCodeを利用してDraw.ioを利用する方法をご紹介します。

Draw.ioとは

Draw.ioは、フローチャートや組織図、ネットワーク図など作成することができる無料のオンラインツールです。直感的な操作で簡単に図を作成できるツールとなります。

公式サイトは以下となります。

VSCodeでDraw.ioを利用するための方法を手順を追って紹介していきます。

VSCodeのプラグインが提供されているので、導入します。
VSCodeの拡張機能のメニューを選択し、「Draw.io.integration」と検索します。
以下画像アイコンのプラグインをインストールします。

VSCode上でDraw.ioを作成、編集する方法です。

特別な手順は必要なく、拡張子が.drawio、もしくは、.dioというファイルを開くと、Deaw.ioが利用できます。

以下のようになります。

一般的な図形は最初から用意されていますが、AWSやAzureなどのアイコンを利用したい場合、「＋その他の図形」ボタンをクリックして追加することができます。

Draw.ioを使って、実際にAWSの構成図を書いてみます。
以下の記事で作成したアプリケーションを対象とし、書いてみます。ReactとAWSのサーバーレスサービスで構築したアプリケーションです。

アプリケーションについて詳しく知りたい方は、こちらの記事を参照ください。

Draw.io上でAWSのアイコンを利用したいので、図形を追加します。

AWSのアイコンは「AWS17」,「AWS18」,「AWS19」がありますが、AWSのアイコンの後ろの数字は年を表している（AWS17は2017年）ので、一番新しいAWS19を選択し、適用します。

これでAWSのアイコンを利用することができるようになりました。

利用したいアイコンを選択し、好きな場所にドラッグアンドドロップして図を書いていきます。書いてみると以下のようになります。

今回対象のアプリケーションは簡単なものであるため、シンプルな構成図ですが、それでも視覚化されることでアプリケーションの構成がわかりやすくなります。上記はVSCode上の編集画面ですが、画像としてエクスポートすることもできます。

本記事では、VSCode上でDraw.ioを利用しAWSの構成図を書く方法を紹介しました。

Draw.ioを筆者は初めて触りましたが、使い方に迷うことなく１０分程度で簡単な構成図を書くことができました。Officeなどの有償ソフトウェアが不要で構成図を書くことができるため、今後も使っていこうと思います。

今後も開発に便利なソフトウェアがあれば実際に利用して紹介していきます。

皆様の参考になりましたら幸いです。