AWS構成図おすすめツール

AWSの構成図を作成する際に便利なツールを紹介します。

vscodeの拡張プラグイン「Draw.io Integration」です。

### インストール方法

vscodeの左サイドにあるExtensionsをクリックし、検索窓にdrawと入力するとDraw.io Integrationが表示される。そして、Installボタンをクリックするとインストールされる。

![スクリーンショット 2021-02-01 20.45.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/dccedf85-09c0-d9f5-f69d-0cb2698d93ba.png)

### 作画ツールの表示

インストール後に新規ファイル作成ボタンを押し、
拡張子を.drawioにすると自動的にvscode上でdrawioの作画ツールが表示される。

![スクリーンショット 2021-02-01 20.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/a778f5fb-ff54-7abd-f41c-f4aaa61a083a.png)

これを使って簡単なAWSの構成図を描いていきます。

### 構成図

VPCを作成して、その中にパブリックサブネット、EC2インスタンス、インターネットゲートウェイを作成する。

![test_drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/c6ef0215-2ada-275d-a589-84e384d8493a.png)

### 使い方

#### AWSアイコンの追加

下部の+More Shapesを押すと、アイコンのセットが表示される。
ここからAWS 19をチェックしてApplyボタンを押す。
AWS 17とAWS 18があるが17が2017年版、18が2018年版。

![スクリーンショット 2021-02-01 20.50.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/3c615494-ac56-476c-36a1-6648cc0adfd8.png)

![スクリーンショット 2021-02-01 20.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/ba1a4d80-91ff-ac0c-281c-592cf6a46ef2.png)

ちなみにAWS 3Dだと3D表現ができる。

![スクリーンショット 2021-02-01 20.52.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/e12acf2f-aa4f-df23-39f2-50a683684a24.png)

Applyボタンを押すとアイコンがジャンル分けで表示される。
上部の検索窓からキーワード（ex VPC）と入力すると関連するアイコンが表示される。
![スクリーンショット 2021-02-01 22.07.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/d0ec9ef7-9202-10d7-8bf6-4459501a0b72.png)

AWS/GroupsからVPCを選ぶとVPCのアイコンを配置できる。

![スクリーンショット 2021-02-01 20.52.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/aae1571a-e8cb-6c4b-d7cc-13404c6f2b1a.png)

もちろん拡大も可能。

![スクリーンショット 2021-02-01 20.53.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/7b7ae4c3-ab19-20a0-7607-2225d77f541f.png)

同じAWS/GroupsからAvailability Zoneを選択。

![スクリーンショット 2021-02-01 20.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/cd7ee4da-f431-02ed-d827-e70a6e34dacf.png)

![スクリーンショット 2021-02-01 20.54.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/ad6a0711-b5a9-0475-eb39-bd916d8d6d5e.png)

同じAWS/GroupsからPublic subnetを選択。

![スクリーンショット 2021-02-01 20.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/2a426935-9173-1085-3488-8685828bb1ec.png)

AWS/ComputeからEC2を選択

![スクリーンショット 2021-02-01 20.56.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/57d57a98-e07b-6b43-e4ae-f6a61b23776a.png)

アイコンをダブルクリックすると文字を入力できる。

![スクリーンショット 2021-02-01 20.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/f0a88329-e546-aebb-4cf5-296565cb1303.png)

AWS/Network&Content DeliveryからInternet Gatewayを選択

![スクリーンショット 2021-02-01 20.57.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/00fb8825-db3d-6729-bdc6-e5f9b242e574.png)

![スクリーンショット 2021-02-01 20.58.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/67e4db39-0c85-cebd-d245-cbecd2b7fc70.png)

### ファイルの変換

FileタブからExportをクリック。

![スクリーンショット 2021-02-01 21.32.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/af96b58a-10f5-c817-2be2-b07131655816.png)

svg形式、.png形式、.drawio形式の拡張子で取得ができる。

![スクリーンショット 2021-02-01 21.33.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621237/d6755b64-cfac-0faf-fc35-8a90d8fe26fd.png)

以上です！