🐻‍❄️

VSCodeからdraw.ioを使ってAWS構成図を作成する

2023/10/30に公開

VSCodeからdraw.ioを使ってAWSの構成図を描く方法

こんにちは！DELTAの馬場です。
今回はAWSの構成図を書く際にはおなじみになっているdraw.ioをVSCodeから利用してみたときの体験を記事にします。

早速draw.ioをVSCodeから利用できるようにしていきます。
（既に手元にVSCodeがインストールされている前提で記事を書かせていただきます。）

「Draw.io Integration」 のプラグインをインストールします。
拡張機能(Ctrl+Shift+X)を開き、「Draw.io Integration」を検索してインストールします.

draw.ioは以下の拡張子に対応しているようです: *.drawio, *.dio, *.drawio.svg, *.drawio.png
これを利用して、test.drawio というファイルを作成します。

ファイル > 新しいファイルから 「test.drawio」 というファイルを作成します.
すると、見覚えのある画面が表示されます！ (背景真っ黒なのはVSCodeのテーマのせいです。)
AWSの構成図を作成する際に利用するコンポーネント群も、ブラウザ版と同じように利用できます.

使い心地はほぼ完璧にブラウザ版と同じでした。
ECSのFargate taskの（雑な）説明資料を作成する機会があったので、その資料を作ってみました.
サンプルAWS構成図

VSCodeからdraw.ioが利用できるようになったことで、いちいちブラウザから検索して行っていたアーキテクチャ図の作成がいつものツール上から変わらないUIで行えるようになりました！
便利！！