こんにちは．M1 の藤原です． 今回は，VSCode で draw.io を使う方法についてご紹介します．
draw.io とは#
draw.io は，フローチャートやネットワーク図，クラス図などの図を作成するための無料の図表作成ツールです． デスクトップアプリはもちろん，Web ブラウザ上でも利用可能で，資料や論文などに含める図の作成に重宝しています．
draw.io と VSCode の連携#
これまでは，draw.io を Web ブラウザ上で利用していたのですが，先日，VSCode で draw.io を利用できる拡張機能を発見しました．
Draw.io Integration という拡張機能です．
この拡張機能をインストールし，ワークスペースで .drawio ファイルを作成し，開くだけで利用可能です．
実際の利用画面
draw.io を VSCode で利用する理由#
VSCode で draw.io を利用するのと Web ブラウザ上，デスクトップアプリから利用するのでは，あまり変わらないのではないかと思いますよね． ここで，draw.io を VSCode で利用するメリットをご紹介します．
- AI の力を借りられる
- VSCode で資料作成が完結する
AI の力を借りられる#
VSCode を用いる人の大半は，GitHub Copilot を利用していると勝手に思っています． この GitHub Copilot を利用しているときに，図をもちいて説明してほしい場合があります． 例えば，「ここの処理フローはどうなっているの？図を用いて説明して」や，「現在の実装を基にシーケンス図を作成して」というプロンプトをあたえます． その際に，大抵，Copilot は 「 | –> | –> | 」のように，矢印と線を組み合わせたテキスト形式の図を作成し返答してきます． 一方で，「個々の処理フローはどうなっているの？ draw.io 形式の図をもちいて説明して」とコンテキストを与えると，draw.io 形式の図を出力してくれます． この図を VSCode で直接プレビューし，自身でその図を編集することもできます．さらに，自身が作成した図を Copilot を用いてアップデートすることもできます．
VSCode で資料作成が完結する#
これは，日々 VSCode でドキュメントを作成している人にとっては嬉しいことだとおもいます． 我々は，普段の打合せ資料や論文執筆で LaTex を用いています． 私が普段ドキュメント作成をするときの画面はこのような感じです．
VSCode を全画面表示し，左半分で LaTex のソースコードを編集，右側でコンパイルされた PDF をプレビューしています．
また，コンパイルの詳細は Makefile を用いてまとめており，make コマンド1つでコンパイルされます．
さらに，VSCode の設定で，保存時に make コマンドが実行されるように設定しているため，ctrl + s を押して保存する度に自動でコンパイルされます．
このように，基本的には VSCode の中で完結しています．
一方で，図を作成し，資料に含める際には，以下のような手順をおこなっていました．
- draw.io デスクトップアプリで，図を作成する
- draw.io デスクトップアプリで，図を PDF 形式にエクスポートする
- VSCode に切り替え，コンパイルし，図を挿入する
いちいちアプリを切り替えるのがめんどくさいのに加えて，少し図を編集しようとした際にも，同様の手順をおこなう必要がありました． アプリ間をいったりきたりするのは疲れます． そのため，VSCode 上で draw.io を編集できると，これらの負担が減ります． 私は，左側で draw.io の図を編集し，右側で PDF のプレビューを確認しながら，図の大きさやバランスなどを調整するという使い方をよくします．
ちょっと不便なところ#
Draw.io Integration では，draw.io 形式 (.drawio)で作成したファイルを PDF 形式にはエクスポートできません．
Web ブラウザ上やデスクトップアプリを利用する場合にはできます．
せっかく VSCode 内で作成しても，PDF 形式にエクスポートする際にはアプリを開かなければいけない… と思ったのですが，draw.io のデスクトップアプリに付属する CLI を使えば，コマンドでエクスポートできます．
$ draw.io --crop -xf pdf -o test.pdf test.drawio
私は，このコマンドを Makefile に書いておいて，save 時に自動でエクスポートするようにしています．
気になったら聞いてください． ありがとうございました．