画面遷移図やフローチャートに使う作図ツール
先日から画面遷移図やフローチャートなどをテキストで書けるツールを模索していたが、結論としては大人しくGUIのツールを使った方がいいなと言うことになった。
ノードの繋がりが複雑になると、自動ではなかなかにきれいに配置できないので。
で、ブラウザ上で使えるものをいくつか試してみたが、結論から言うとdraw.ioが一番ストレス無しで使えていいかな。操作感でも画面構成の面でも。
ほかにCacooとGliffyを試してみたが、Cacooはオブジェクトを追加する際に他より1クリックか2クリック手順が多いのが難。
Gliffyはテキスト、円形ツール、矩形ツール、コネクタ、ライン、選択、手のひら、といったモード選択が少し煩わしかった。VやHといったキーで一発で切り替えるショートカットもないのでマウスをメニューまで持っていく必要があり。
ちなみにこの手の作画ツールの雄としてVisioのオンライン版もあるようだけどちょっと高いので試してない。
各ツールの比較
2時間くらい試したメモ。
共通して以下のような機能は持っており、どれを使っても用を満たすことはできる。
自分は今のところdraw.ioという結論になったが、各々実際軽く試して手に馴染むものを使えばいいと思う。
- ステンシルから図形を配置して線や矢印で結べる
- 線や矢印をいろんな形状で描ける
- 線や矢印は図形に吸着し、図形を移動させても伸び縮みする
- 図形を移動する時にガイドが出て吸着するので整列させやすい
- 図形をダブルクリックでテキストを追加できる
- フォームのパーツがあり画面設計などもできる（するかは別）
- 豊富なステンシルがありUMLなどいろいろなダイアグラムを書ける
- グループ化が可能
Cacoo
- 時々動作が怪しい。MacのChromeだとわずかに一瞬固まったりする
- メニューが唯一日本語
- ラインをダブルクリックでラインにテキスト追加できない
- ラインを矢印にする時に始点や終点のスタイル選択が必須になっているのがわずらわしい
- TのショートカットでテキストというのはAdobe系のツールを使ったことがあると馴染みがある
- ステンシル表示に1クリック、選択して追加するのに1クリック＆ドラッグ。ステンシル表示の際にローディングが入るので更に遅い
- 画面構成は左にステンシル、中央に描画エリア、右にシートの一覧
- 上部のメニューでオブジェクトの切り貼りやスタイル調整
- フローチャートなどのほかネットワーク図やマインドマップなどテンプレートが豊富
- エクスポートはPNG、SVG、PDF、PS、PPT。フリープランではPNGのみ。
- 490円/月 まあ払ってもいいかなという価格。シート数などに制限はあるがフリープランのまま使うのもあり
draw.io
- 矢印などいろんな形状のラインがステンシルとして並んでいてさくっと追加しやすい
- ラインをダブルクリックでラインにテキスト追加できる
- 矩形と円形を追加するショートカットがある
- どこでもダブルクリックでテキストが追加できる
- 画面構成は左にステンシル、中央に描画エリア、右に選択しているオブジェクトのインスペクタ（Format Panel）
- レイヤー機能あり
- 上部のメニューでオブジェクトの重なりを簡単に調整
- 下部にタブ切り替えで編集中の図を切り替えられる
- プラグインで機能追加できる？
- 一律でドロップシャドウをかけられる
- フローチャートなどのほかネットワーク図やマインドマップなどテンプレートが豊富
- エクスポートはPNG、JPEG、SVG、PDF、VSDX、HTML、XML、URL
- 保存場所が色々と選べる。GoogleDriveやローカル、GitHubなどにも
- 基本無料？ 収益構造が分からず心配になったが一応価格表があって安心した
Gliffy
- デフォルトのスタイルが一番きれいと感じた。操作感もスムーズ。
- テキスト、円形ツール、矩形ツール、コネクタ、ライン、選択、手のひら、といったモード選択が少し煩わしい。VやHといったキーで切り替えるショートカットもない
- テーマの適用で体裁を変えられる。見栄えを整えやすい
- 作成時に選択したダイアグラムのタイプによってデフォルトで表示されるステンシルが変化
- エクスポートはPNG、JPG、SVG。いずれも課金しないと不可。スクショを撮るというせこい手は通じる
- $7.99/mo 使用頻度が高いならこれくらい払えるが。。。フリートライアルは14日間で終了らしい
テキストで書くのに向いている図もある
テキストベースの作図ツールも使えるケースは多々あるので少しフォロー。
mermaid.jsを使うとシーケンス図なんかはいいかんじに書ける。
VSCodeでプレビューしながら書くことも可能だし。
オブジェクトが追加/削除されても簡単に反映できて複雑になってもきれいに並ぶ。むしろドローツールで作図する方が大変なのでこれはテキストで書きたい。
ただフローチャートは前述のように複雑になると要素がきれいに並ばないので微妙。
ガントチャートは書いてもいいが、必要ならプロジェクト管理ツールに吐き出させるのがベターなのではないか。
クラス図など入り組んだ構造にならないダイアグラムならPlantMLなどを使うのもよさげ（書く必要に駆られてないので試してない）
要はテキストで簡単に書けてきれいな図になるならテキストが良い。
テキストで書けても複雑な定義が必要だったり、あまりきれいに仕上がらないものはテキストはやめた方が良い。という考え方。
おまけ Excelは何故良くないか
一瞬Excelで、というのが頭をよぎったので整理しておくと作図効率とメンテナンス性の面でベストでもベターでもない。
ただとりあえず使い慣れたツールなので、他のツール探したり使い方を覚えたりする手間がないという点でごく短期的には時間節約になる。
たまにしかこう言う図を書かず、一時的な意思共有のためにメンテを考慮せず書き捨てるものと言うなら一歩譲ってアリ。
