Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AWS構成図おすすめツール

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

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

インストール方法

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

スクリーンショット 2021-02-01 20.45.29.png

作画ツールの表示

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

スクリーンショット 2021-02-01 20.50.50.png

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

構成図

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

test_drawio.png

使い方

AWSアイコンの追加

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

スクリーンショット 2021-02-01 20.50.50.png

スクリーンショット 2021-02-01 20.51.57.png

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

スクリーンショット 2021-02-01 20.52.11.png

Applyボタンを押すとアイコンがジャンル分けで表示される。
上部の検索窓からキーワード(ex VPC)と入力すると関連するアイコンが表示される。
スクリーンショット 2021-02-01 22.07.57.png

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

スクリーンショット 2021-02-01 20.52.56.png

もちろん拡大も可能。

スクリーンショット 2021-02-01 20.53.32.png

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

スクリーンショット 2021-02-01 20.53.51.png

スクリーンショット 2021-02-01 20.54.34.png

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

スクリーンショット 2021-02-01 20.54.54.png

AWS/ComputeからEC2を選択

スクリーンショット 2021-02-01 20.56.07.png

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

スクリーンショット 2021-02-01 20.56.35.png

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

スクリーンショット 2021-02-01 20.57.25.png

スクリーンショット 2021-02-01 20.58.09.png

ファイルの変換

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

スクリーンショット 2021-02-01 21.32.48.png

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

スクリーンショット 2021-02-01 21.33.52.png

以上です!

nisj
大阪で働いているバックエンドエンジニア。実務でLaravelをよく使います。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away