Draw.ioでAWSの構成図を描く

# はじめに
AWSの構成図を描く機会があったので、Draw.ioというツールを使って描いてみました。
結構きれいに書けたので、簡単な完成イメージを用いて描き方を紹介します。

# 完成イメージ
本記事を読めばこのようなイメージで簡単に構成図が描けるようになります。
![Cursor_と_AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/5af0f44e-523b-30af-f0e4-e56e280e5177.png)


# 手順
Draw.io使ったことある方は[2. 描き方](#2-描き方)からどうぞ。

## 1. Draw.ioの初期設定
### Draw.ioにアクセス
下記にアクセスします。
https://app.diagrams.net/

### 保存先・新規作成／読み込み設定
アクセスすると保存場所を聞かれるので適当に選択します。
本記事ではDeviceを選択します。
![diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/e1a8c82a-8fad-504c-f61c-9d91212ef37a.png)

新規作成か読み込みか聞かれるので適当に選択します。
本記事では新規作成を選択します。
![diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/7c9a3a4f-012e-d2ec-7d01-3cab85eda15f.png)

いろんなテンプレートがあるので作りたいものとイメージが近いものを選択します。
本記事ではテンプレート無し選択します。
![diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/fa3fd6ec-13b8-a4f8-0adf-4f42894b60e5.png)

ちなみに、AWSのテンプレートもあります。
`Cloud>AWS`
![Cursor_と_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/877e712f-56fa-24a1-f9bd-fc86caf699e3.png)

## 2. 描き方
### AWSのシェイプを表示
デフォルトの状態だとAWSのシェイプが表示されていません。
（AWSのテンプレート選択したときは表示されてます。）
左下の`More Shapes...`をクリックすると表示するシェイプの設定ができるので、AWSにチェックを入れて保存します。
![AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/1cb186a3-0a09-76a0-b8c2-76502104a80a.png)

`Networking > AWSxx`
いくつかありますがAWS19が良さげです。
![AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/8b2276df-5f22-d2a5-e34e-06a0b9122843.png)

画面左の枠にAWSのシェイプが表示されました。
![Cursor_と_AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/a2f021de-5ae1-6fa6-2245-d99cb2091bf7.png)

### 大枠（Groups）
まずは大枠を描いていきます。
クリックorドラックで設置します。
マウスオーバーでプレビューが表示されます。

`Groups > AWS Cloud`
![貼り付けた画像_2022_03_14_21_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/74a55562-120f-bee9-41bb-4a74159440cc.png)

サイズを調整します。
![AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/f22653e9-ff26-aba2-0b64-1cf5b4b2dd0b.png)

右型のTextタブから文字を調整します。
今回は文字サイズ18px、ボールドを選択します。
![AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/def0d6b6-acbb-b225-c930-672900874e66.png)

同様に各グループを追加していきます。
`Groupds > Region`
![貼り付けた画像_2022_03_14_22_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/5f017288-497a-92e8-4acd-1b4b3adbc394.png)

`Groupds > Availability Zone`
![貼り付けた画像_2022_03_14_22_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/b9df0955-f4d6-adac-8699-ee9aa01ec323.png)
`Groupds > Public subnet`
![貼り付けた画像_2022_03_14_22_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/e4092656-70f9-9a1f-5322-c42b98806726.png)
`Groupds > Private subnet`
![貼り付けた画像_2022_03_14_22_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/4401743f-ecf2-be5d-7dca-2ae75e1b2307.png)

各サイズを調整します。
AvailabilityZoneはTextタブで左寄せしてます。
![Cursor_と_AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/7597e894-f5d9-5925-bcbe-07985a9ba311.png)

### 各サービス設置
■Compute
`EC2`
![貼り付けた画像_2022_03_14_22_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/03dfc439-7375-79d4-6172-7857120ec8fe.png)

■Database
`RDS`
![貼り付けた画像_2022_03_14_22_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/fe73e6ea-455d-fda1-985e-489dbdcdc743.png)

`ElastiCache`
![貼り付けた画像_2022_03_14_22_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/dd73758d-2814-dd72-53fb-351698523e88.png)

■Strage
`Simple Storage Service(S3)`
![貼り付けた画像_2022_03_14_23_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/37c5f5d9-8992-ea2b-271e-e33824491620.png)

■Network & Content Delivery
`NAT Gateway`
![貼り付けた画像_2022_03_14_22_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/0aed375c-500d-820c-9c36-e6f0bd0d1897.png)

`Cloud Front`
![貼り付けた画像_2022_03_14_23_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/56b4dd03-82d0-2e81-d074-601b2f75f0e0.png)

`Elastic Load Balancing`
![貼り付けた画像_2022_03_14_22_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/4d5f26aa-cb4f-c67c-46c9-3a986f995351.png)

■Security, Identity & Compliance
`WAF`
![貼り付けた画像_2022_03_14_23_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/1980a575-5d82-9215-8cca-1ebba2f26840.png)

### テキスト入力・調整
設置した際、文字が表示されないのでダブルクリックで入力します。
文字の位置は`Textタブ > Position`で変更可能です。
![AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/be65f711-099c-921b-de22-83e2cbee69fc.png)
いろんなPositionが選択可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/eaa1d689-a86e-7302-cc4a-e12ca17ae3a7.png)

## 完成
![Cursor_と_AWS構成図_drawio_-_diagrams_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/a10966a1-84e1-ae91-e2c4-a657c24a5e0b.png)

## 保存
任意のファイル形式で保存できます。
`File > Export as`
![貼り付けた画像_2022_03_14_23_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531728/4f495233-658c-2fa8-6751-cec8ff88d6ce.png)


# Draw.ioで作ってみた感想
### 使いやすかった点
* もともとシェイプが用意されているので便利
* シェイプを移動させる際に中央線などのガイドが表示されるのできれいに配置できる
* 自動で保存してくれるので急にブラウザが落ちても安心

### 使いにくかった点
* シェイプ選択する際に意図しないシェイプが選択されることが多く、コツが必要
* シェイプ設置した際にサービスのテキストが表示されない

# 参考
https://aws.amazon.com/jp/cdp/ec-scaleup/