draw.io

最終更新日: 2026-07-24

TOP(About this memo)) > draw.io

draw.io

TODO

• グループ化の挙動がよくわかっていない。
• (参考) https://medium.com/@groxli/tips-for-compelling-diagrams-with-draw-io-d9a96fd15907 の内容を確認する。

draw.ioという名称について

• (?) draw.ioは旧称で、現在はdiagrams.netという名称になっているとされる。
• ただし、インターネット上の情報はdraw.ioという名称で見つかることが多い。

特徴

• UMLやクラス図、ER図、フロー図など、ダイアグラムの記述に特化したツール。
• (IMO) Officeのパワーポイントなどの汎用ツールと比較すると、各図がツール側によってマネージドに調整される点が特徴だと思う。
  • つまり、レイアウト調整の自由度は下がる一方で、レイアウト調整を自動的に行ってくれるとも言える。
  • 例:
    • 図形をつなぐコネクタは、図形の位置をずらしても自動的にレイアウトを調整してくれる。
    • テキストの大きさは内部の文字サイズに依存する。
    • クラス図などでは、内部の図形の大きさに合わせて自動的に拡大される。
    • 図に色を付けると、内部のテキストの色も自動的に変更される。

クラス図などを書くときの方針

(IMO) 図を描く上で自分なりに決めている方針。

• コネクタは特定の点ではなく図形自体へ接続する。
  • 特定の点への接続は避ける。
  • 特定の点へ接続すると、レイアウトの調整がしづらくなる。
    • 特定の点への接続が優先されるため、図形の移動にあわせた調整をしてくれない。
    • 例えば矢印のアンカーが折れ曲がったりする。
• 入れ子になっている図形（エンティティなど）では、中身の図形への接続は避ける。
  • これもレイアウト調整時に崩れやすくなるため。
• メソッドからメソッドの呼び出し
  • 内部でのメソッドからメソッドの呼び出し
    • 矢印でつなげず、メソッドにテキストで書く。
    • 矢印で接続すると図がすぐに分かりづらくなり、レイアウト調整も難しくなる。
    • 内部の呼び出しが非常に多い場合は、クラス図自体を別の図形にして、関数自体を図形にして矢印で接続するような図の方式にする。
  • 外部クラスのメソッドからの呼び出し
    • クラス間の矢印の接続にする。
    • このとき、メソッド同士をつなげてはいけない（理由は前項参照）。
    • 呼び出し元と呼び出し先のメソッドを矢印にテキストで表記する。
• テキストの行は適宜改行する。
  • 文字サイズが小さいときは画面を拡大して閲覧することが多いため、1行が長すぎるとはみ出てしまう。

苦労しているところ

(IME) 使っていて苦労した・扱いにくいと感じた点。

• オブジェクトをコピペする際、離れた場所にあるものは貼り付け時に元の位置付近に生成されるため、目的の位置までドラッグする必要があり手間がかかる。また、小さいオブジェクトの場合はドラッグ操作のつもりが幅変更などの操作になってしまい、扱いにくい。
  • cmdを押しながらドラッグするのが最も早いかもしれない(?)。
  • → ctrlを押しながらドラッグすると、コピーしやすい。
• ドラッグ操作を行うには、オブジェクトをある程度拡大表示しないとアイコンがドラッグ操作として認識されにくく、扱いづらい。
  • 常にドラッグ操作として認識されるキーボードショートカットの割り当てがあれば便利。
• デフォルト設定
  • コネクタをデフォルト設定した場合、コネクタに紐づくテキストの文字サイズは引き継がれない。

いまいちなところ

(IME) 使っていて気になった点。

• テキスト入力の際、行の先頭だとボックスの枠と重なってカーソルが見えない。
• option + ドラッグで範囲選択する際に、意図しないオブジェクトまで選択されてしまう。
  • 背景オブジェクトはロックしておけば回避できそう(?)。
  • 意図しない矢印が選択されて一緒に動いてしまうのが厄介。
• ちょっとした変更をしただけでファイルのdiffがかなり大きくなる。
  • 変更していないはずの箇所もフォーマットが変わってしまうことがある。
• 図形の幅などを揃えづらい。
  • 幅を調整すると小数単位のサイズになることがある。整数のサイズにしても手動でサイズを変えると小数点のサイズが入ってしまい、その根拠がわからない(?)。
  • 幅を大きくしたときなどに、近くの図形と同じくらいのサイズに揃えられるガイドがほしい。
• 検索時のフォーカスをもっと強調してほしい（現状わかりづらい）。

レイヤー機能

• cmd + shift + l でレイヤーパネルが表示される。

便利系・ショートカット

• (参考) https://www.drawio.com/blog/shortcut-select-shapes

• altキーはMacだとopt。

• サイズのコピーアンドペースト

  • opt + shift + f / v
  • 押しづらい。パネルからも操作可能。

• スタイルのコピーアンドペースト

  • opt + c / opt + v
  • ただし、コネクタのフォーマットに関してはこのショートカットではコピーアンドペーストができなかった。

• cmd + shift + v で書式なし貼り付け

  • デスクトップ版だとcmd + shift + opt + vになる。

• cmd（Windowsはctrl）を押しながらドラッグでコピー

• cmd（Windowsはctrl）+ r で矢印を逆にする

• 図形・コネクタの選択

  • すべての図形を選択: cmd + shift + i
  • すべてのコネクタを選択: cmd + shift + e
  • すべての子の選択、すべてのsiblingの選択: opt + shift + c / x / s
    • (?) 挙動を見ても、どのような条件で選択されているのか理解できていない。

• 特定の位置へコネクタを接続: shiftを押しながら接続

• 図形の大きさ調整: 図形を選択してctrl + shift + 矢印

• フォントサイズ調整

  • テンキーがないと動作しない。
  • (参考) https://www.drawio.com/blog/new-keyboard-shortcuts

• フォーマットコードの編集: cmd + E

• 途中点（waypoint）クリア: shift + opt + r

  • すべてのコネクタを選択（cmd + shift + e）とあわせて使うと便利。

• 範囲内をすべて選択: optを押しながらドラッグ

• 矢印の調整について

  • (参考) https://kasyalog.site/blog/drawio-sequence-diagram/

• クラスの中のフィールドに直接矢印を接続すると、矢印が意図しない向きに迂回することがある。

  • そのため、クラス自体に接続したほうが扱いやすい。

• ctrl + opt + shift + ドラッグ: スペースの作成・削除

• デフォルトとして設定しておくと、既存の矢印をコピペしなくても、図形から矢印を出す際に同じスタイルを使えて便利。

• 全画面表示にするとサイドパネルが非表示になり見やすくなる。

• ビュー

  • cmd + j: フィットページ
  • cmd + shift + h: フィットウィンドウ

• グリッドに合わせる: 対象を選択してパネルの「グリッドに合わせる」を使う。

ほしいショートカット（未発見）

• 整列・配置のショートカット。

コネクタのテキスト

• 自動で文字が折り返しされてしまうことがあるが、パネルの「フォーマットされたテキスト」のチェックを外すとこの動作をオフにできる。

コネクタのフォーマット

• (参考) https://www.drawio.com/doc/faq/connector-styles
• スタイルパネルから変更できる。cmd + Eから直接入力することも可能。
• デフォルトはstraight。
  • (IME) ただし、straightは線が自動で垂直・水平にならない(?)ため、使用していない。
• edgeStyle=orthogonalEdgeStyle;
  • (?) 汎用的なスタイル。
  • 途中点を何個も挟むことができる。
  • 途中点をクリアするとS字になってしまう。
  • 汎用的ではある一方、途中点に縛られるため、接続する図形を動かすとコネクタの途中点も調整する必要がある。
    • (IMO) したがってこのスタイルは最小限の利用に抑えたい。
• edgeStyle=elbowEdgeStyle;
  • 図形の配置にしたがって自動的に調整される。
  • フォーマットを確認すると、elbowの設定も変わることがわかる。
    • elbow=vertical;: 上下のアイコンを選択した場合。
    • elbow=horizontal;（デフォルト。何も設定されない）: 左右（<–>）のアイコンを選択した場合。
    • この2つの動作の違いは、途中点をクリア（shift + opt + r）してみるとわかる。
      • verticalの場合、途中点をクリアすると先端が垂直になる（手動で動かすのは水平な部分を垂直方向）。
      • horizontalの場合、途中点をクリアすると先端が水平になる（手動で動かすのは垂直な部分を水平方向）。
      • いずれの場合も、矢印の先端が垂直・水平に固定されるわけではなく、手動で動かしていくと図形との接続部分によって先端の向きは変わる。
  • (参考) https://drawio-app.com/blog/shape-styles/
• edgeStyle=entityRelationEdgeStyle;
  • (?) 用途がよくわかっていない。
• (IMO) 以下はあまり使わない見込み。
  • edgeStyle=isometricEdgeStyle
  • curved=1;

autosize

• 図形のスタイルでautosizeにチェックを入れると、自動で高さや幅が内部のコンテンツに合わせて調整される。

README.mdに埋め込む

• (参考) https://vermeer.hatenablog.jp/entry/2022/01/09/132418
• file > convert > svgで.drawio.svgにする。
• この状態でREADME.mdに埋め込むと表示できる。
• しかも、この形式のままdraw.ioで編集することも可能。

VS Code拡張機能「Draw.io Integration」は不使用

• (IME) 試してみたが、ブラウザ版で開いたファイルとフォントの色の設定が異なる現象があった（黒色のはずが白色になっているなど）。
  • .drawio.svg形式で保存しておけばVS Code上でもプレビューできるため、拡張機能自体は使わなくてもよさそうと判断した。
• (IMO) 個人的な不満点として、diffがGUI表示のみになる点がある。テキストとしてもdiffを確認できるとよいと思う。
  • (参考) https://github.com/microsoft/vscode/issues/129209#issuecomment-885359154

トラブルシューティング

• コネクタのarrowが接着点に対して常に90度になってほしい。
  • → 解決。原因は図形全体ではなく、特定の点へ接続してしまっていたこと。
  • ただし、コネクタの位置を変えるたびに、接着点を90度にするための調整を都度考慮する必要があり、この点は冗長に感じる。
  • (?) コネクタのフォーマットやパネルのプロパティを確認しながら試行錯誤したが、常に90度（right angle）にする設定自体は見つけられなかった。

This site is open source. Improve this page.