This page looks best with JavaScript enabled

[VSCode] Draw.io Integration で AWS 構成図を作成してみた

 ·   ·  ☕ 2 min read  ·  ✍️ Inomaso

AWS構成図をMacBookで作成したくなったのですが、Infra Study Meetup #2のLTでハマコーさんが、VSCodeのdraw.ioを紹介していたなーと思い出したので試してみました。

ローカル環境


  • macOS Catalina 10.15.6
  • Visual Studio Code 1.49.0
  • Draw.io Integration 0.7.2

draw.io セットアップ


1. Visual Studio Code インストール


Download Visual Studio Codeページから、パッケージをダウンロードしインストールします。

2. Draw.io Integration インストール


Visual Studio Code の拡張機能でDraw.io Integrationをインストールします。

draw.ioで構成図作成


  1. VSCodeのワークスペースを開きます。
  2. ワークスペース上でNew Fileをクリックします。
  3. ファイル名の拡張子は.drawio.dio.drawio.svg.drawio.pngのいずれかで作成します。
  4. 作成したファイルを開くと、drawioのUIが起動されます。
    drawio-initial-display
  5. EC2アイコンを追加したい場合は、検索図形という入力ボックスから探すことができます。
    search-ec2

Draw.io Integration エクスポート有効化


作成した構成図を提案資料用にJPEG等でエクスポートしたかったのですが、デフォルト設定だとエクスポートできませんでした。
そこで、こちらの記事を参考にしながら有効化しました。

  1. Draw.io Integration拡張機能の設定を開きます。
    drawio-extension-settings
  2. ユーザタブのOffline設定のチェックを外しします。
    offline-settings
  3. ファイルを開き直して、エクスポートメニューが表示されることを確認します。
    export-menu

まとめ


VSCodeのdrawioだと図形検索ができるので、短時間でAWS構成図を作成することができました。
ハマコーさんのスライドにある通り、Github等でSVGは図として表示されるため、IaC等で活用するとレビューが捗ると思います。
aws-diagram

Share on

comments powered by Disqus