draw.io｜やりたいことから引く！逆引き使い方まとめ

基本説明

draw.ioは下のようなレイアウトになっています。ツールバーでは新規作成などのファイル操作、操作パネルの表示設定などができます。図形サイドバーでは使用する図形を選択することができ、フォーマットサイドバーでは個々の図形の詳細な編集を行うことができます。

ツールバーの表示ボタンから各種パネルの表示設定をすることができます。よく使用する図形、フォーマットだけでなく、レイヤーやアウトラインといったパネルも表示するようにできます。

また、太陽マークのような外観ボタンからライト/ダークモードの切替、シンプルレイアウトへの切替をすることができます。

特に断りが無ければ、説明はシンプルレイアウトでの操作方法となります。

編集

同じ図形を線でつなげていきたい

図形を選択すると上下左右に矢印が表示されるので、その矢印にカーソルを置いてしばらく待つ。そうするといくつかの図形が選択肢として表示されるので、一番上の図形を選ぶと、同じ図形が線でつながれた状態で追加される。

後から図形を移動しても線がきれいにつながったままにしたい

図形の端に線を接続すると端に接続位置が固定されるため、図形の真ん中が起点となるように線を接続する。こうすることで後から図形を動かしても線が重なったりしなくなる。

接続方法は、線の端をドラッグしたまま図形の真ん中にカーソルを移動し、接続先の図形が青色の選択状態になったらドロップする。

線を図形の任意の場所に接続したい

線の先端をドラッグして、接続したい場所でShiftを押しながらドロップする。

図形と線の間に隙間を空けたい

線を選択し、フォーマットサイドバーのスタイルタブにある「線の始点」、もしくは「線の終点」の「間隔」を増やす。

線にラベルを追加したい

ラベルを追加したい場所で線をダブルクリックする。

図形の種類を後から変更したい

方法１
変更したい図を選択し、図形サイドバーからShiftを押しながら変更先の図形を選択する。

方法２
図形サイドバーから変更先の図形を選択をドラッグし、変更したい図の上で更新マークにドロップする。
【注意】コンテナ（図形を中に配置できる図形）の場合は変更できない。代わりに図形が中に配置される。

自分が作成した図を登録して使いわましたい

登録したい図（複数可）を選択し、図形サイドバーのスクラッチパッドにドラッグ＆ドロップする。

1つの図形のサイズにまとめて変更したい

基準とする図形を選択し、フォーマットサイドバーの配置タブにある「サイズをコピー」をクリックする。その後、変更したい図（複数可）を選択し、フォーマットサイドバーの配置タブにある「Paste Size」をクリックする。

表に列、行を追加したい

列、行を追加したい表を選択し、 フォーマットサイドバーの配置タブにある「テーブル」から列、行を追加する。

数式を表示したい

数式を有効にするため、何も選択していない状態でフォーマットサイドバーのダイアグラムタブにある「数式組版」にチェックを入れる。（シンプルレイアウトではない場合は、ツールバーの拡張から「数式組版」をクリックする。）

下の3種類の記法で数式を書くことができるようになる。

• LaTeX inline
  • 数式を\(と\)で囲む
  • 例）\(\sqrt{3×-1}+(1+x)^2\)
• AsciiMath inline
  • 数式を`で囲む
  • 例）`a^b + b^2 = c^2`
• LaTeX in a block
  • 数式を$$で囲む
  • 例）$$\sqrt{3×-1}+(1+x)^2$$

図形にツールチップ（マウスオーバーした際に表示される補足説明）を追加したい

図形を右クリックし、「編集」にある「ツールチップを編集」を選択する。

図形に連番を付けたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Enumerate」にチェックを入れる。

図形を水平、または垂直に反転したい

図形を選択し、フォーマットサイドバーの配置タブにある「反転」から「水平」、もしくは「垂直」をクリックする。

スタイル

デフォルトスタイルを設定したい

デフォルトとしたい図形を選択し、フォーマットサイドバーのスタイルタブにある「デフォルトとして設定」をクリックする。

デフォルトスタイルを初期化したい

何も選択していない状態で、フォーマットサイドバーのダイアグラムタブにある「デフォルトスタイルをクリア」をクリックする。

スタイルのみをコピーして、別の図形に貼り付けたい

スタイルをコピーする図形を選択し、フォーマットサイドバーのスタイルタブにある「スタイルをコピー」をクリックする。その後、スタイルを張り付ける図形を選択し、フォーマットサイドバーのスタイルタブにある「スタイルを張り付け」をクリックする。

図形をスケッチ風にしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「スケッチ」にチェックを入れる。

図形に影を付けたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「影付き」にチェックを入れる。

図形をコミック調にしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Comic」にチェックを入れる。

図形のコミック調を強めたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Jiggle」の数値を増やす。

図形を折りたためるようにしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Collapsible」にチェックを入れる。

選択・移動

複数の図形をグループ化したい

グループ化したい図形を選択し、右クリックから「グループ化」を選択する。

図形とそれと関係している(線でつながっている)子孫の図形を選択状態にしたい

図形を選択し、右クリックから「Select Descendants」を選択する。

図形とそれにつながっている線を選択状態にしたい

図形を選択し、右クリックから「辺を選択」を選択する。

図形移動時にセンターライン(黄色のライン)への自動位置合わせを停止したい

何も選択していない状態で、フォーマットサイドバーにあるダイアグラムタブの「オプション」にある「ガイド」のチェックを外す。

重ねた図形が自動でグループになるようにしたい（コンテナ化したい）

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Container」にチェックを入れる。

図形を水平、または垂直に動かしたい

図形を選択し、Shiftを押しながら図形をドラッグして移動させる。

全体のミニマップを表示させたい

ツールバーの表示から「アウトライン」を選択する。

制限

図形を変更不可にしたい

図形を右クリックし、「ロック / 解除 」を選択する。

図形のサイズを変更不可にしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Resizable」のチェックを外す。

図形の編集を不可(移動、リサイズは可)にしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Editable」のチェックを外す。

図形の移動を不可にしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Movable」のチェックを外す。

図形を削除不可にしたい

図形を選択し、フォーマットサイドバーのスタイルタブにある「プロパティ」を展開し、「Deletable」のチェックを外す。

図形の縦横の比率を固定したい

図形を選択し、フォーマットサイドバーの配置タブにある「プロポーションを維持する」にチェックを入れる。

レイヤー・タグ

図形をレイヤーごとに分けて管理したい

ツールバーの表示から「レイヤー」を選択し、レイヤーウィンドウを表示させる。

レイヤーウィンドウの「＋」をクリックし、レイヤーを追加する。

図形を選択した状態でレイヤーウィンドウの「︙」をクリックし、移動先のレイヤーを選択する。

レイヤーごとに図形を編集不可にしたい

レイヤーウィンドウの編集不可にしたいレイヤーの「鍵マーク」をクリックする。

レイヤーごとに図形を非表示にしたい

レイヤーウィンドウの非表示にしたいレイヤーの「目マーク」をクリックする。

図形にタグをつけて管理したい

ツールバーの表示から「タグ」を選択し、タグウィンドウを表示させる。

タグウィンドウの「追加する」をクリックし、タグを追加する。

図形を選択した状態でつけるタグのチェックボックスにチェックを入れる。

同じタグの図形を非表示にしたい

タグウィンドウの非表示にしたいタグの「目マーク」をクリックする。

同じタグの図形をまとめて選択したい

タグウィンドウの選択したいタグの「チェックボックスマーク」をクリックする。

整形

曲げすぎた線を綺麗にしたい

線を選択した状態で右クリックから「途中点をクリア」をクリックする。

線でつないだ図形を整列させたい

ツールバーの挿入から「レイアウト」を選択する。

出力

他のアプリでも開ける形式で出力したい

ツールバーのダイアグラムから「形式を指定してエクスポート」を選択する。

図形を画像として他のアプリに張り付けたい

図形を選択した状態で右クリックから「画像としてコピー」をクリックし、他のアプリで貼り付けする。

参考

この記事は以下の情報を参考にしました。

• draw.io Frequently Asked Questions

更新履歴

• 2023/06/16 初版
• 2024/01/04 レイヤー・タグ、整形、出力を追加。全体的にイメージを追加