概要

VScodeにて拡張機能Draw.ioを追加してシーケンス図を作図する方法を記述。
使用環境：Windows11 Pro、VScode

Draw.ioとは

draw.ioとは、無料で利用できる作図ツールです。Microsoft EdgeやGoogle Chrome、MacのSafariなどのブラウザから開くことができて、Web上で描画できます。
draw.ioは、四角や三角、矢印などの図形を選択して画面上に配置して図表を作成していきます。この作成手順は、ExcelやPowerPointの図形作成ツールとあまり変わりません。
draw.ioがExcelなどと大きく違う点は、図形の素材がとても多いことです。立体的な図形や人型の図形、フローチャートやER、UMLのテンプレートが豊富に用意されています。

draw.ioとは？無料の図版作成ツールの使い方やレイアウト資料の作成について解説！ - Professional Online（プロフェッショナルオンライン）

ブラウザ版
draw.io
VScode版
Draw.io Integration - VScode

Draw.ioを追加

Draw.io Integrationを追加。
ファイルの拡張子を.drawioにすることで、以下のような画面が自動で表示されDraw.ioを使うことができる。

拡張子は.drawio以外にも.dio、.drawio.png、.drawio.svgが使用可能。.drawio.png、drawio.svgを使用することで、SVGやPNGのファイル形式で保存でき、importやexportを必要とせずにそのまま画像としての利用や編集が可能。

プレビューと作図

プレビューと同じものを作成可能。UML以外の作成にも使える。

PlantUMLを使用してプレビューさせたシーケンス図

PlantUMLについてはこちらから

Draw.ioを使用して作図したシーケンス図