VSCodeがドローツールになるDraw.io Integrationがいい感じ！macOSでのワークアラウンドを紹介
ブログを書く際に使う図は、普段Graphvizを使って作ることが多いです。
Draw.ioというオンラインのドローツールがIDEのVisual Studio Code（VSCode）上で使えるようになったという報せを聞き及び、使ってみました。
具体的にはDraw.io IntegrationというExtensionがリリースされ、それをインストールするとDraw.ioがVisual Studio Code（VSCode）上で使えるようになります。
筆者は専らmacOSを使っていますので、macOS用のVisual Studio Code（VSCode）にDraw.io Integrationをインストールして使ってみたところ、Draw.io Integrationに関連づけられる.drawio、.dioといった拡張子のファイルを作成してもDraw.io Integrationが起動してこない。
ひょっとして機種依存の問題かとWindows版のVisual Studio Code（VSCode）で試してみたところ、案の定動作が自然なのでmacOS版のみでの現象かもしれません。
テキストとして開かれてしまった.drawio、.dioを強制的にDraw.io Integrationで開く
テキストとして開かれてしまった.drawio、.dioは、Command Palette（Command + Shift + P）から「File: Reopen With…」で強制的にDraw.io Integrationで開けばOK。
Draw.io IntegrationによるWYSIWYG編集と、XML直編集の同時進行
筆者が考えるDraw.io Integrationの最大のメリットは、Draw.io IntegrationによるWYSIWYG編集と、XMLの直編集を横に並べて、行ったり来たりしながら作図できるところ。
XMLの直編集ではテキストの全置換ができたりと、XML直編集ならではの便利さがあるので、筆者は大変気に入っています。
しかし、この横並び状態にする操作が、筆者は初見で分からなかったので手順を紹介します。
- XML形式への変換
- VSCode上で.drawio、.dioを新規作成するとXML形式にならないので、Draw.io Integration上でメニュー「File ＞ Export as… ＞ XML」からXMLに書き出し。書き出されたファイルの拡張子を.xmlから.drawio、.dioに変更
- ファイルの開き直し
- さきほどXMLとして書き出しし、拡張子を.drawio、.dioに変更したファイルをCommand + Oなどから開き直します
- Draw.io Integrationを強制起動
- .drawio、.dioを開いてもDraw.io Integrationが起動してこなかったら、「テキストとして開かれてしまった.drawio、.dioを強制的にDraw.io Integrationで開く」での解説の通りの手順でDraw.io Integrationを強制起動
- 横並びの2画面状態にする
- Draw.io IntegrationはVisual Studio Code（VSCode）とは独立したアプリ内Webブラウザ状態のようで、本体のキーボードショートカットなどが効きません。ウインドウ右端の「Split Editor Right」アイコンをクリックして左右分割
- 片方をXMLモードに
- Draw.io Integration状態でエディタが二つ横並びになるので、片方をXMLモードでの編集にします。例によってキーボードショートカットが効かないので、メニュー「View ＞ Command Palette」でCommand Paletteを起動し、「File: Reopen With…」で「Text Editor」を選択。さらに、Command Paletteで「Change Language Mode」でXMLモードに
- 拡張子の関連付けを変更
- .drawio、.dioをXMLモードに関連付けます。紫色のモードライン上の「XML」をクリックし、「Configure File Association for ‘.drawio’」と出たらXMLを指定。必要があれば.dioでも同様に関連付けを変更
これで、Draw.io Integration側で編集すればXML編集側にもリアルタイムで反映され、XML編集側で編集すればDraw.io Integration側にも反映されるようになります。
ブログの作図は、Graphvizからこちらに切り替えてしばらくやってみようと思っています。
ちなみに、GraphvizもVisual Studio Code上でリアルタイムプレビューができるのでなかなかのものですよ。