Visual Studio CodeにDraw.io Integrationを追加してみた

スポンサーリンク

はじめに

昨日、AWSの構成図を書くなら「draw.io」が便利の記事をアップしました。

ブラウザ上でも便利に使用できるのですが、VS Code上でも使用できるという情報を見つけたのでやってみました。

VS Codeのダウンロード

Microsoftのサイトにアクセスします。
https://www.microsoft.com/ja-jp/dev/products/code-vs.aspx

「Visual Studio Codeの ダウンロード」ボタンをクリックします。そして「Windows x64ユーザーインストーラー」をクリックします。

ファイルは任意の場所に保存します。

VS Codeのインストール

ダウンロードしたファイルを実行します。

追加タスクの選択画面では画像の通りチェックを入れます。

あとはウィザードに沿って進めて完了です。

拡張機能のインストール

Visual Studio Codeを起動します。
左ペインより「拡張機能」アイコンをクリックします。
検索ボックスに「draw.io」と入力します。
「Draw.io Integration」の「インストール」ボタンをクリックします。

インストールが完了したら終了です。

使用方法

Visual Studio Codeを起動します。
左ペインより「エクスプローラ」アイコンをクリックします。
「新しいファイル」ボタンをクリックします。

ファイル名は「test.drawio」にします。Enterキーを押下すると作画できる状態になります。

背景色の変更

環境によって背景が黒になることがあります。

その場合は、画面右下に「Theme:dark」が表示されています。「Theme:dark」をクリックして、「Kennedy Selects Theme "Kennedy"」を選択すると背景が白に変わります。

コメント

タイトルとURLをコピーしました