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で構成図作成
- VSCodeのワークスペースを開きます。
- ワークスペース上で
New Fileをクリックします。 - ファイル名の拡張子は
.drawio、.dio、.drawio.svg、.drawio.pngのいずれかで作成します。 - 作成したファイルを開くと、drawioのUIが起動されます。
EC2アイコンを追加したい場合は、検索図形という入力ボックスから探すことができます。
Draw.io Integration エクスポート有効化
(2020/11/2記載変更)
バージョンアップによる仕様変更で、オンラインモードではエクスポートできなくなりました。
Draw.io Integration のバージョンダウン等試しましたが、問題は解決しませんでした。
最新バージョン(1.0.3)だとオフラインモードでエクスポートできるようです。
デフォルト設定はオフラインモードですので、新規インストールの場合は特に設定不要でエクスポート可能です。
エクスポートの仕様変更に関しては、こちらの記事が参考になりました。
- Draw.io Integrationの
拡張機能の設定を開きます。
- ユーザタブの
Offline設定をチェックします。
- ファイルを開き直して、エクスポートメニューが表示されることを確認します。
まとめ
VSCodeのdrawioだと図形検索ができるので、短時間でAWS構成図を作成することができました。
ハマコーさんのスライドにある通り、Github等でSVGは図として表示されるため、IaC等で活用するとレビューが捗ると思います。