はじめに
draw.io、または diagrams.net は、ちょっとした説明図から業務フロー、構成図、画面遷移図まで幅広く使える便利な作図ツールです。
ただ、使い込んでいくと「作図そのもの」よりも、周辺の操作に時間を取られる場面があります。
- 同じ図形設定を何度も切り替える
- グループ化した図形の中身が追いにくい
- 背面に隠れた図形を選択しづらい
- コネクタの端点や中間点が小さくて掴みにくい
- 高解像度ディスプレイでハンドルが細かすぎる
この記事では、そうした draw.io 利用時の小さなストレスを減らすために作った3つのプラグインを紹介します。
リポジトリはこちらです。
この記事の対象読者
- draw.io を日常的に使っている人
- 複雑な図面で図形選択や重なり順の管理に困ったことがある人
- 図形の設定やスタイルを何度も手作業で変更している人
- 4K など高解像度環境でハンドル操作がつらい人
プラグイン開発の解説ではなく、利用者目線で「何が便利になるか」を中心に書きます。
作ったプラグイン
| プラグイン | 目的 | 向いている場面 |
|---|---|---|
| Quick Styler | 図形の設定変更を右クリックから素早く行う | 同じプロパティやスタイルを何度も使う |
| Hierarchy Viewer | 図面内の階層と重なり順を見える化する | グループや重なりが増えて選択しづらい |
| Handle Scaler | ハンドルや接続ポイントを大きくする | コネクタやリサイズハンドルが掴みにくい |
Quick Styler: よく使う図形設定を右クリックから扱う
draw.io では図形ごとに細かいスタイルを設定できますが、毎回サイドバーやスタイル文字列を触るのは少し面倒です。
Quick Styler は、よく使う図形プロパティを右クリックメニューから切り替えられるようにするプラグインです。
便利になる操作
- 図形のリサイズ可否を切り替える
- 図形の移動可否を切り替える
- 縦横比固定を切り替える
- ラベル表示を切り替える
- 接続可否を切り替える
- 接続ポイントの制限をプリセットから選ぶ
- よく使う見た目を保存して別の図形に適用する
例えば「この図形は動かしたくない」「この部品は接続不可にしたい」「同じ色と枠線を別の図形にも当てたい」といった操作を、右クリックから済ませられます。
スタイル保存もできる
Quick Styler には、選択中の図形スタイルを名前付きで保存する機能もあります。
保存したスタイルは右クリックメニューから再適用できます。よく使う色、枠線、文字設定を毎回作り直さなくてよくなります。
保存先はブラウザの localStorage です。チーム共有というより、自分用の作業効率化に向いています。
Hierarchy Viewer: 複雑な図面の「どこに何があるか」を見る
図面が大きくなると、どの図形がどのグループに入っているのか、どれが前面でどれが背面なのかが分かりにくくなります。
Hierarchy Viewer は、図面内のオブジェクトをツリーで表示するプラグインです。
便利になる操作
- 図形やグループの親子関係を見る
- 重なり順を見る
- 一覧から図形を選択する
- エディタ上の選択を一覧側にも反映する
- 図形の表示・非表示を切り替える
- ドラッグ＆ドロップで階層や重なり順を変える
-
F2または鉛筆ボタンで名前を編集する
特に便利なのは、背面に隠れている図形や、グループの奥にある図形を一覧から直接選べることです。
draw.io 標準のキャンバス操作だけだと、目的の図形をクリックするために一時的に図形をどかしたり、何度もクリックを重ねたりすることがあります。Hierarchy Viewer があると、ツリーから対象を選べます。
重なり順も確認できる
各項目には Z: インデックス / 最大インデックス のように重なり順を表示します。
「この図形が前に来ているはずなのに見えない」「線が図形の裏に回ってしまった」といったときに、どの順番になっているかを確認しやすくなります。
Handle Scaler: ハンドルや接続ポイントを掴みやすくする
draw.io のハンドルは標準だと小さめです。特に高解像度ディスプレイでは、コネクタの端点や中間点を正確に掴むのがつらいことがあります。
Handle Scaler は、選択ハンドル、コネクタハンドル、接続ポイントを大きくするプラグインです。
便利になる操作
- 図形のリサイズハンドルを大きくする
- コネクタの開始点を大きくする
- コネクタの中間点を大きくする
- コネクタの終了点を大きくする
- 接続ポイントの表示サイズを大きくする
- 接続ポイントの判定範囲を広げる
単純にハンドルを大きくするだけでなく、ズーム倍率に応じてサイズを変えるようにしています。
コネクタ用ハンドルを個別調整できる
コネクタの開始点・中間点・終了点は、それぞれ別の初期値を設定できます。
edgeStartHandleSize: 26,
edgeMiddleHandleSize: 22,
edgeEndHandleSize: 26
端点はしっかり掴みたいので大きめ、中間点は邪魔になりすぎないよう少し小さめ、という調整にしています。
拡大縮小は倍率で指定する
ハンドルサイズは、固定の最大ピクセル数ではなく倍率で指定しています。
minHandleScale: 0.25,
maxHandleScale: 4,
maxPointScale: 2
例えば edgeStartHandleSize が 26 なら、最大は 26 * 4 = 104px です。ズームアウト時は minHandleScale に従って小さくなりますが、操作不能にならないよう最低サイズも確保しています。
インストール方法
各プラグインは、draw.io のプラグイン機能で読み込めます。
- GitHub から使いたい
.jsファイルを取得する - draw.io を開く
-
その他>プラグイン...を開く -
追加を押す - プラグインファイルの URL またはローカルパスを指定する
- draw.io を再読み込みする
デスクトップ版 draw.io でプラグインを使う場合は、起動オプションが必要です。
draw.io.exe --enable-plugins
更新が反映されないとき
ブラウザ版では、プラグインファイルがキャッシュされることがあります。
更新したのに動きが変わらない場合は、次のどちらかを試すと切り分けやすいです。
- プラグイン URL に
?v=2のようなクエリを付ける - プラグイン登録を一度削除して再追加する
Handle Scaler は読み込み時に Console へ設定値を出すようにしています。読み込まれているか確認したい場合は DevTools の Console を見ます。
Handle Scaler: loaded (...)
注意点
draw.io のプラグインは JavaScript として実行されます。
便利ではありますが、任意のコードを draw.io 内で実行する仕組みでもあります。自分で内容を確認できるコード、または信頼できるコードだけを読み込むようにしてください。
おわりに
今回のプラグインは、draw.io の作図機能そのものを大きく変えるものではありません。
ただ、日常的に draw.io を使っていると、図形設定、階層確認、ハンドル操作のような小さな手間が積み重なります。そこを少しでも減らすための道具として作りました。
特に次のような人には向いていると思います。
- 図形の設定をよく切り替える人
- 大きめの図面やグループを多用する人
- コネクタ操作でよく狙いを外す人
ソースコードはこちらです。