Draw.ioとは

そもそもDraw.ioとは何かというと、無料で利用できる高機能作図ツールです。

特徴としては、ブラウザ上で利用でき、様々な種類のテンプレートを参考にしながら、 マウス操作などで簡単に作図ができるというのが最大の特徴になっています。

また、GoogleDriveやGitHub、ローカルなど保存先を選ぶことができ、 シェア用のURLを発行したり、画像を出力したりして関係者に共有することもできます。

VSCode Draw.io Integration

「VSCode Draw.io Integration」は、エディタであるVSCode上でDraw.ioを使用できるようする拡張機能です。

VSCode上に、Draw.io Integrationをインストールすることにより、ブラウザ上でのDraw.ioと同じような形で作図をすることができます。

インストールはこちらから。

何が嬉しいの？

「VSCode Draw.io Integration」をインストールすることによるメリットは下記があげられるかと思います。(僕目線)

インフラ構成の変更 + ドキュメントの変更が楽

プロジェクトの初期は細かいところでインフラ構成の変更が頻繁に起こると思います。

その際、「VSCode上でIaC化したコードを変更する」 → 「別の場所に保存してあるインフラ構成図を書き直す」というプラットフォームの移動が生じます。

しかし、「VSCode Draw.io Integration」を使えばVS Codeから一切離れなくて良いということになり、移動の手間がなくなり混乱も生まれにくくなります。

新メンバーへのインフラ構成共有が楽

プロジェクトに新たにメンバーが加わるときに困るのが、ドキュメントの共有です。

例えば、インフラ担当として引継がれるときにIaC化したGitHubリポジトリと別に、GoogleDriveにインフラ構成図がある、、、みたいなことってありますよね。

時間が経つと「あのドキュメントはどこにあるんだっけ」という状態になります。

それが「VSCode Draw.io Integration」を使えば、svgファイルとして管理することができるので、 Terraformで作成したインフラコードのリポジトリに一緒に保管しておくことができます。

引き継ぐ方もこのリポジトリ見といて！で済むから楽です。

またGitで管理するので変更履歴も管理することができます。

という形でメリットを説明したところで、早速、基本的な機能から解説していきます。

基本的な機能

まずは基本的な機能からですが、「VSCode Draw.io Integration」を使うとブラウザ版Draw.ioと同様の操作で図の作成ができます。

使い方は簡単で、まずVSCode上で.drawio、.dio、.drawio.svg、.drawio.pngいずれかの拡張子でファイルを作成します。

作成後、作成したファイルを開くとブラウザ版Draw.ioと同様の作図画面が出てきますので、そこで図の作成をすることができます。

作成した図はREADME.mdへパスを記載すれば、README.mdのプレビューで閲覧することができます。

追加された機能

VSCode LiveShareでの共同作業

VSCode LiveShareという複数人でソースコードを閲覧、編集できる拡張機能がありますが、 そのLiveShareを通して、Draw.io Integrationの操作ができるようになりました。

これにより、ペアプロ的にインフラ構成図を作成できるようになり、便利そうです。

※本来はカーソルの動作も含めて、参加者が確認できるような機能としてリリースされているようですが、私の環境では確認できませんでした...

コードリンク機能

VSCode画面下部にあるステータスバーにCodeLinkという部分をクリックするとコードリンク機能を有効/無効できます。

有効にすると、図中の文字の先頭に#を書くことによって、コード内の該当する部分に遷移してくれるようになります。

これにより、クラス図を作成していた場合にスムーズに全体像とコード詳細の行き来ができるようになります。

新しく入ったメンバーがアプリケーションの理解をスムーズに進める際に便利そうです。

その他の機能

svgで編集して検索、一括置換

Draw.ioのグラフィカルな状態だけでなく素のsvg状態で表示、編集することもできます。

これにより特定の文字を検索、一括置換することができます。

まとめ

いかがだったでしょうか。

VSCode Draw.io Integrationをうまく活用すれば、GitHubのリポジトリ上にモデル図を集約することができ、引継ぎ作業等々も楽になるのではないでしょうか。

機会があれば是非使ってみてください。