RAS Syndrome

冗長。

作図ツール「draw.io」を使ってみたので紹介

概要

以下が draw.io 。
https://www.draw.io/

つまり、Web ブラウザ上で使える作図ツールということだ。
完全無料。すごい。

ファイルを開く/保存する

ファイルの参照/保存先として、Google DriveDropboxGitHub 等のクラウドサービスが使える。

だが、一番簡単なのはローカルデバイスを指定することだ。

「ブラウザからどうやってローカルにファイルを保存するのか」と気になるかもしれないが、答えはすごく単純で、「保存」をする度にファイルのダウンロードが開始されるだけである。
なので毎回「名前をつけて保存」をしている感覚になる。「上書き保存」のような体験はできないので注意。(保存先がクラウドならできそう。試してない。)
なお、ファイルを開く際ももちろん、ローカルからアップロードすることになる。

ちなみに、保存しないままブラウザのタブを閉じようとすれば、ちゃんと確認ウィンドウが出てくれる。
ブラウザツールでありがちな「間違えて閉じてしまう」問題の心配もない。

ファイルの保存形式

drawio ファイルという独自の形式で保存される。中身は XML なようだが、肝心のコンテンツ部分は単一タグ内に暗号化された文字列がダーっと入っているだけだった。

その他、以下の形式に変換して保存(Export)することもできる。

  • PNG, JPEG, SVG
  • PDF
  • 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プラグインとかもあるっぽい。詳細は調べてない。

気になったリンク