Draw.ioを使えばUMLやシステム図などのドローイングができます。データは画像やSVGで出力できるので、開発用のドキュメントに使っている人も多いのではないでしょうか。インストールしておくと、利用場面が多いはずです。 そんなDraw.ioをVisual Studio Codeの中に追加してしまうのがDraw.io VS Code Integrationです。Visual Studio Codeを使っている人にとってはとても便利な機能拡張です。

Draw.io VS Code Integrationの使い方

.drawioといった拡張子のファイルを開くと自動認識されます。

左側からパーツを選んでドラッグ&ドロップで配置します。

SVGやPNGで保存もできます。

Draw.io VS Code Integrationを使えばVisual Studio Codeの中から出ることなくドローイングが可能になります。別なツールを立ち上げるというと億劫になりがちですが、拡張子で自動認識してくれるので便利です。できあがったが画像やSVGとして保存すればドキュメントのメンテナンスも簡単です。

Draw.io VS Code IntegrationはVisual Studio用、TypeScript製のオープンソース・ソフトウェア(GPL v3)です。

Draw.io Integration - Visual Studio Marketplace hediet/vscode-drawio: This unofficial extension integrates Draw.io into VS Code.