<p>Draw.ioはフローチャートやネットワーク図、ER図などを簡単に描画できるサービスで、VSCodeで利用できます。以下の手順に従って導入してみてください。</p>
<h2 id="1%2C-draw.io-integration%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB">
<a class="header-anchor-link" href="#1%2C-draw.io-integration%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 1, Draw.io Integrationのインストール</h2>
<p>VSCodeを起動します。<br>
左端の「プラグイン検索」アイコンをクリックします。<br>
検索ボックスに「draw.io」と入力し、「Draw.io Integration」を選択してインストールします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4f901286c9b0-20240503.png" loading="lazy" class="md-img"></p>
<h2 id="2%2C%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E4%BD%9C%E6%88%90%E3%81%A8%E6%8F%8F%E7%94%BB">
<a class="header-anchor-link" href="#2%2C%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E4%BD%9C%E6%88%90%E3%81%A8%E6%8F%8F%E7%94%BB" aria-hidden="true"></a> 2,ファイル作成と描画</h2>
<p>拡張子を.drawioまたは.dioでファイルを作成すると、VSCode内でDraw.ioエディタが起動します。<br>
描画画面になったら、左側のシェイプから必要なものをドラッグ&amp;ドロップして描画します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/fe59a9153cfd-20240503.png" loading="lazy" class="md-img"></p>
<h2 id="3%2C%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0">
<a class="header-anchor-link" href="#3%2C%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> 3,アイコンの追加</h2>
<p>左側のシェイプの下にある「+ その他の図形」を選択すると、AWSやGCP、Azureのアイコンなどを追加できます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/80b7525e6cca-20240503.png" loading="lazy" class="md-img"></p>
<h2 id="4%2C%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88">
<a class="header-anchor-link" href="#4%2C%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88" aria-hidden="true"></a> 4,エクスポート</h2>
<p>作成した図をエクスポートする際は、上部メニューバーから「ファイル」、「Export...」　、任意の拡張子を選択します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f679a3f0f59f-20240503.png" loading="lazy" class="md-img"></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/80a849b3494f-20240503.png" loading="lazy" class="md-img"></p>
<hr>
<p>簡単ではありますが、以上の手順でVSCodeでDraw.ioを利用できるようになります。</p>
<hr>
<p>参考</p>
<ul>
<li><a href="https://qiita.com/riku-shiru/items/5ab7c5aecdfea323ec4e" target="_blank" rel="nofollow noopener noreferrer">VSCodeでDraw.ioが使えるようになったらしい！<br>
</a></li>
<li><a href="https://webbibouroku.com/Blog/Article/vscode-draw-io#google_vignette" target="_blank" rel="nofollow noopener noreferrer">VSCode で draw.io を使って作図する<br>
</a></li>
<li><a href="https://ideaatoz.com/draw-io-integration/" target="_blank" rel="nofollow noopener noreferrer">エディター内でフローチャートやUML図を作成できるVSCode拡張機能「Draw.io Integration」<br>
</a></li>
</ul>


VSCodeでDraw.ioを使う

1, Draw.io Integrationのインストール

Discussion