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」にチェックを入れる。

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

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

スタイル

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

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

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

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

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

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

フォントにグーグルフォントを使いたい

図形を選択し、フォーマットサイドバーのテキストタブにある「フォント」から「カスタム」を選択する。「Google Fonts」を選択し、設定したいフォント名を入力する。フォント名はGoogle Fontsのサイトにあるものを設定する。

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

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

図形に影を付けたい

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

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

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

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

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

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

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

選択・移動

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

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

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

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

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

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

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

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

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

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

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

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

図形と図形の位置を入れ替えたい

図形をドラッグ後、入れ替えたいもう一方の図形の上でShiftを押す。入れ替え先が紫色の選択状態となったらドロップする

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

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

制限

図形を変更不可にしたい

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

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

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

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

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

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

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

図形を削除不可にしたい

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

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

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

参考

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

• draw.io Frequently Asked Questions