VSCodeのdraw.ioを使用してAWS構成図を簡単に作成する

## はじめに
会社でAWSの業務に関わることが多くなり、
構成図を作成する機会が増えた結果、VSCodeでdraw.ioを利用した作成方法に辿り着きました。

下記のようなAWSの構成図を書いてみます。
必要なツールはVSCodeのみで、すぐに描き始めることができます。
※VSCodeが入っていない方は「VSCode インストール」などで検索すれば無料ですぐにインストール可能です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/b8844aeb-d91d-8df9-3e60-9f143a280801.png" width="500">


## 1.Draw.ioの拡張機能をインストールする
VSCodeの拡張機能検索画面から「draw.io」で検索し、インストールを押下します。
![a_drawio拡張機能インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/0e982ed5-5373-5dd1-08d4-5041c8f5ba6c.png)


## 2.Draw.io用のファイル作成
拡張子「.drawio」のファイルを作成します。（作成すると自動で作図画面が表示されます。）
![b_drawioファイル作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/002b08ac-605d-14cc-8314-67d85feeb3e5.png)


## 3.AWS図形の追加
作図画面が表示できたら、左下の「+その他の図形」を選択し、
![c_その他の図形選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/82ad01a3-3a77-ab19-ff28-f10d44a87bfa.png)
左側メニューの一番最新のAWSアイコンの「AWS19」にチェックして、「適用」をクリックします。
![d_AWS19選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/80c8759c-68ff-3f6c-c3c9-d387ddc4f609.png)
AWSアイコンのメニューが表示されるようになります。
![e_AWSメニュー選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/a25ba590-15cd-2048-2e43-83e3c65b86fb.png)


## 4.背景色を白に設定する（推奨）
背景が黒だとグループなどが見づらいため、VSCodeの背景をLightに変更します。
「Code」メニューから「基本設定」 > 「設定」をクリックします。
![f_VSCode設定変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/226acc70-4550-3846-4003-386c3169b7e9.png)
設定の検索画面から「color theme」で検索します。
「Color Theme」のプルダウンから「Light+」を選択します。
![g_colorTheme.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/9a1f06ec-a4da-8e8e-0cac-cb4b3909de14.png)
Lightだと、こんなかんじの画面になります。
![h_light画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/f91f1407-3e3d-c53b-105b-e439ef13feee.png)


## 5.グループの作成
最初にグループを書きます。
左側のメニューの「AWS/Group」から必要なものを選んでグループを一通り作成します。
グループ枠の名称はダブルクリックすることで変更可能です。
![i_Group作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/528d5b8f-d99b-2c07-8ed2-9573e905b2c6.png)


## 6.アイコンの設置
左側のメニューから、設置したいアイコンを選んで設置します。
![j_アイコンの配置.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/1cb10c38-7aa1-14b2-496b-075a6ffa7e0a.png)


## 7.矢印の挿入
左側の「AWS/Arrows」から選択して配置するか、
アイコンをクリックした後に表示される水色の矢印をクリックし、接続したいアイコンまでドラッグすることで素早く接続することもできます。
![k_構成図の矢印1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/8437a402-ac6a-b2fb-4a53-808d7b199c5b.png)
接続するとこのようになります。
![l_構成図の矢印2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/9d8b63d7-47c4-2293-d1ee-815c34c43f90.png)


## 8.テキストの挿入とフォント変更
draw.ioのメニューの「+」印からテキストを挿入することができます。
![m_テキスト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/d8e83517-1c8f-ccc5-442b-a14c968d2ffb.png)
draw.ioのメニュー右上のサイドバー切り替えボタンからサイドバーを表示させ、アイコンにあったテキストの色を選択して配置すると、
![n_テキスト色変更.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/56353b4a-d6c9-b709-d457-0746ec88686a.png)
このような構成図が完成しました。
![o_構成図の作成完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/9db19fd6-b3f6-7fe5-89b1-03fb006ef159.png)



## 9.pngファイルの出力
ExcelやPowerPointなどに挿入して使用することがほとんどだと思うので、エクスポートの方法です。
draw.ioのメニューの「ファイル」 > 「Export」と選択し、VSCode画面上部から「.png」を選択すれば画像として保存可能です。
![p_pngで出力.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/1df545b8-3de4-962b-cce2-9287d44bf874.png)
画像として出力することができました。
![q_pnd保存完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630487/b9643a3e-0400-0107-bec9-ce248cd17615.png)


## おわりに
AWS構成図作成に困っている方の一助になれば幸いです。
最後まで読んでいただきありがとうございました。