当記事では、VSCode上でAWS構成図を描くツール「draw.io」を紹介します。
- VSCodeでAWS構成図を描く無料ツールを探している
- VSCodeで設計から開発まで完結したい
- VSCodeでdraw.ioを使いたい
最近は、VSCodeのプラグインが充実してきて、開発作業はVSCodeで完結しているという方もいるのではないでしょうか。
VSCodeは、プラグインを入れること色々な言語の開発環境になり、プログラミングしやすいツールです。
しかし、システム構成図などの設計はExcelなどの別ツールを使っていませんか。
システム開発では、システム構成図やフローチャートなどの設計が欠かせません。
どうせなら、システム構成図やフローチャートの作成もVSCodeで完結させたいですよね。
本記事で紹介するdraw.ioを利用すると、VSCodeでシステム構成図やフローチャートなどの図を簡単に作成できます。
昨今トレンドであるAWSで構築されるシステム構成図も簡単に作成することができます。
VSCodeでdraw.ioを利用するための導入手順から操作方法まで解説しています。
ぜひ最後までご覧ください。
draw.ioとは
draw.ioは、フローチャート、ネットワーク図、組織図など多種多様な図を簡単に作成できるオンラインツールです。無料で利用できます。
基本的にはブラウザで利用するツールですが、VSCodeでも利用することができます。
ブラウザ版はこちら(draw.io)から利用できます。
VSCodeでdraw.ioを利用するための設定
VSCodeでdraw.ioを利用するための設定を順番に解説します。
draw.ioのプラグインの導入
draw.ioはVSCodeのプラグインが提供されています。
このプラグインをVSCodeに導入します。
- Step1VSCodeの左側のメニューで「拡張機能」を選択
- Step2検索バーで「Draw.io.integration」と入力
- Step3以下画像アイコンのプラグインを選択し「インストール」
draw.ioプラグインの使い方
draw.ioプラグインの使い方を解説します。
プラグインの利用は特別な手順は必要ありません。
拡張子が.drawio、または、.dioというファイルを開くと、VSCodeでdraw.ioが利用できます。
利用時はこのようになります。
作図に利用するアイコンの多くは最初から用意されていますが、AWSやAzureなどのアイコンはありません。「＋その他の図形」ボタンをクリックして追加してください。
AWSのアイコンは「AWS17」,「AWS18」,「AWS19」があります。後ろの数字は年を表している（AWS17は2017年）ので、一番新しいAWS19を選択し適用します。
適用後、AWSメニューが追加され、AWSのアイコンが利用できるようになります。
draw.ioを使ってみる
draw.ioを使って、VSCodeでAWSで構成されたシステム構成図を書いてみます。
作成対象のアプリケーションは、一般的なモダンアプリケーションを想定して記述します。
利用したいアイコンを選択し、好きな場所にドラッグアンドドロップして図を書いていきます。書いてみるとこんな感じになります。
今回作成したアプリケーションは簡単なものであるため、シンプルな構成図となりましたが、それでも全体が視覚化されることでアプリケーションの構成がわかりやすくなります。
初めてdraw.ioを触りましたが、10分程度で上の図を書くことができました。使い方に迷うことなく、使いやすいツールです。
まとめ
この記事のまとめです。
- draw.ioでVSCodeでシステム構成図などの図が簡単に作成できる
- draw.ioは使いやすく使い方も簡単
- 設計の成果物をdraw.ioにすることで設計から開発までVSCodeで完結できる
本記事では、VSCodeでdraw.ioの導入手順から使い方まで解説しました。
実際にAWSのシステム構成図を書いてみましたが、使い勝手も良く操作も簡単でした。
Excelなどで設計書を書くとOfficeを購入が必要ですが、draw.ioを利用することで有償ソフトウェアが不要になります。
なにより、VSCodeだけで設計から開発まで完結できるのは楽です。
筆者は、今後もこのツールを使っていこうと思います。
本記事が皆様の参考になりましたら幸いです。
関連記事 :pythonでexeを開発する！開発時の考慮事項とexeの作成方法を解説！
コメント