作図ツール「draw.io」を使ってみたので紹介
概要
以下が draw.io 。
https://www.draw.io/
つまり、Web ブラウザ上で使える作図ツールということだ。
完全無料。すごい。
ファイルを開く/保存する
ファイルの参照/保存先として、Google Drive や Dropbox、GitHub 等のクラウドサービスが使える。
だが、一番簡単なのはローカルデバイスを指定することだ。
「ブラウザからどうやってローカルにファイルを保存するのか」と気になるかもしれないが、答えはすごく単純で、「保存」をする度にファイルのダウンロードが開始されるだけである。
なので毎回「名前をつけて保存」をしている感覚になる。「上書き保存」のような体験はできないので注意。(保存先がクラウドならできそう。試してない。)
なお、ファイルを開く際ももちろん、ローカルからアップロードすることになる。
ちなみに、保存しないままブラウザのタブを閉じようとすれば、ちゃんと確認ウィンドウが出てくれる。
ブラウザツールでありがちな「間違えて閉じてしまう」問題の心配もない。
ファイルの保存形式
drawio ファイルという独自の形式で保存される。中身は XML なようだが、肝心のコンテンツ部分は単一タグ内に暗号化された文字列がダーっと入っているだけだった。
その他、以下の形式に変換して保存(Export)することもできる。
- PNG, JPEG, SVG
- HTML
- XML
- 試してみたが、まんま drawio ファイルと同じだった。ちなみに Compressed のチェックを外すと、コンテンツ部分もそれっぽい XML できちんと表現されているのが観察できる。差分管理とかする場合はこの方がいいかも。
- URL
- ホスティングをしているのではなく、ファイルを暗号化した文字列を無理やり URL 内のパラメータに詰め込んでいるだけな気がする。
PNG, JPEG, SVG, PDF, HTML ファイルは、逆変換して開き直すこともできる(Import)。
もう少し確実な方法として、Export 時に「Include a copy of my diagram」にチェックを入れておくという方法がある。これをしておけば、drawio ファイルで無くとも変換無しで開く(Open)ことができる。
ちなみに、「Include a copy of my diagram」が具体的に何をやっているのか個人的に気になったので、チェックをオンにした SVG とオフにした SVG をそれぞれ Export して比較してみた。
その結果、どうやらチェックをオンにした場合は、非表示な領域に上手く drawio 形式の文字列を詰め込んでくれる、という感じのようだ。
drawio ファイルのままだと、例えば GitHub に上げた時などに、画像ファイルとして表示されなかったりして使い勝手が悪い。
かといって、単純な画像ファイルに Export してしまうと、再編集が困難になってしまう。
「Include a copy of my diagram」はこのジレンマを上手く解消してくれる。オススメ。
その他豆知識
PlantUML 変換
Arrange -> Insert -> Layout -> Advanced -> PlantUML
で、PlantUML データを図にして挿入することができる。
GitHub 連携
GitHub 上で draw.io の連携サービスを認可すると色々便利らしい。詳細は良く分からなかった。
プライベートリポジトリに関する権限を与えるのが怖いので、念のため試すのはやめた。
ツール
デスクトップツールが公式にある。
あとは非公式で VSCode のプラグインとかもあるっぽい。詳細は調べてない。
気になったリンク
- 【動画付き】 draw.io 使い方まとめ 〜エンジニアでなくても使えるTips集〜
- 今週 Qiita ランキング入りしてた。細かい機能紹介。
- 実践Drawio
- 細かい Tips 集。