VSCode + Drow.io で、図形入りドキュメントを作成する方法
VSCodeの拡張機能 Draw.io Integration がリリースされ、VSCodeで作画ができるようになったということで、早速導入して使ってみたので紹介する。
チーム開発の中で、フロー図やドキュメントをコードと一緒に管理して共有できることはすごく便利だと感じている。
Draw.io とは
Draw.io は、フローチャート、プロセス図、UML 図、ER モデル、ネットワーク図などを作成できる、無料のWebアプリケーションである。 作成した図は xml ファイルとして保存される。もちろん画像やPDF形式での出力も可能である。
私も様々な場面で、Draw.io を愛用してきた。様々な便利なテンプレートがあり、操作も直感的でわかりやすい。そして、無料で使えるのは本当に有り難い。
そんな Draw.io が VSCode の拡張機能としてリリースされた。
導入方法
VSCodeの拡張機能検索窓で「Draw.io Integration」と検索して、インストールをするだけである。（もちろん、Draw.io Integration のページから「install」ボタンを押してもいいが、VSCode内でやるのが一番簡単かと思う。）
インストール後は、一度再起動することをオススメする。
使い方
拡張子を以下の4種類にすることで、自動で描画ツールが VSCode で起動する。
作成した図を Markdown で書いたドキュメントに埋め込むことを想定した場合、drawio.svg で作成するのがオススメである。（公式にも記載があるが、pngよりもsvgのほうが画質が損なわれず見やすいのでオススメされている。）
（※注意）
画像として挿入する場合は、キャンバスの大きさを調整する必要がある。デフォルトでは、A4サイズになっているため、画像サイズが大きすぎて、ドキュメントファイルに表示されない場合があるので、画像サイズに合わせてキャンバスのサイズを調整してみて欲しい。
キャンバスの調整は、FIle > Page Setup...より変更可能である。
Markdown ファイルに作成した図を埋め込む場合は、通常どおり  で記述する。
もちろん、README にも追加できる。
また 通常のWEBアプリケーションとは異なり、XML ファイルを直接編集することも可能で、変更が図にリアルタイムに反映される。
まとめ
文章をマークダウン、図形をDraw.ioを使ってドキュメント化することで、ソースコード含めすべてを VSCode および Git で管理することができ、非常に便利である。図があることで、ドキュメントのわかりやすさも向上するので、ドキュメントに図を挿入することはオススメである。また、頭の中を整理するために、描画することも個人的にはオススメである。
それでは、ステキな開発ライフを。
