目次
基本情報
draw.ioとは
- オープンソースの図表作成ツール
- ブラウザベースまたはデスクトップアプリケーションとして利用可能
- 公式サイト: https://www.drawio.com/
- デスクトップ版ダウンロード: https://github.com/jgraph/drawio-desktop/releases
保存形式
-
.drawio: ネイティブ形式 -
.xml: 互換性のある形式 -
.png,.jpg,.svg,.pdf: エクスポート形式 - GitHub、Dropbox、Google Drive、OneDriveなどと連携可能
ショートカットキー
ファイル操作
-
Ctrl+N/⌘+N: 新規作成 -
Ctrl+O/⌘+O: ファイルを開く -
Ctrl+S/⌘+S: 保存 -
Ctrl+Shift+S/⌘+Shift+S: 名前を付けて保存 -
Ctrl+P/⌘+P: 印刷
編集操作
-
Ctrl+Z/⌘+Z: 元に戻す -
Ctrl+Y/⌘+Y: やり直し -
Ctrl+X/⌘+X: 切り取り -
Ctrl+C/⌘+C: コピー -
Ctrl+V/⌘+V: 貼り付け -
Ctrl+Shift+V/⌘+Shift+V: 書式なしで貼り付け -
Delete: 選択項目を削除 -
Ctrl+A/⌘+A: すべて選択 -
Ctrl+Shift+A/⌘+Shift+A: 選択を解除
表示
-
Ctrl++/⌘++: ズームイン -
Ctrl+-/⌘+-: ズームアウト -
Ctrl+0/⌘+0: 表示をリセット -
Ctrl+Shift+L/⌘+Shift+L: アウトラインを表示/非表示 -
Ctrl+Shift+O/⌘+Shift+O: ナビゲーターを表示/非表示 -
F5: 更新
配置
-
Ctrl+L/⌘+L: 左揃え -
Ctrl+R/⌘+R: 右揃え -
Ctrl+T/⌘+T: 上揃え -
Ctrl+B/⌘+B: 下揃え -
Ctrl+H/⌘+H: 水平方向に中央揃え -
Ctrl+J/⌘+J: 垂直方向に中央揃え -
Ctrl+Shift+F/⌘+Shift+F: 前面へ移動 -
Ctrl+Shift+B/⌘+Shift+B: 背面へ移動
図形操作
-
Ctrl+G/⌘+G: グループ化 -
Ctrl+Shift+G/⌘+Shift+G: グループ解除 -
Ctrl+D/⌘+D: 複製 -
Alt+Shift+右矢印/Option+Shift+右矢印: 右に回転 -
Alt+Shift+左矢印/Option+Shift+左矢印: 左に回転 -
Space: ツールを一時的にパンツールに切り替え
テキスト編集
-
F2: 選択中の図形のテキストを編集 -
Ctrl+I/⌘+I: イタリック -
Ctrl+B/⌘+B: 太字 -
Ctrl+U/⌘+U: 下線
基本操作
図表の新規作成
- ホーム画面から図表タイプを選択
- 白紙から始める場合は「空白の図表」を選択
- テンプレートから始める場合は適切なテンプレートを選択
保存とエクスポート
- ローカル保存: ファイル > 保存、または名前を付けて保存
- クラウド保存: ファイル > Google Drive/OneDrive/Dropbox/GitHubに保存
- エクスポート: ファイル > エクスポート > 形式を選択（PNG, JPG, SVG, PDF）
- 埋め込み: ファイル > 埋め込み > HTMLコードをコピー
インポート
- ファイル > インポート > ファイル選択またはURLから
- サポート形式:
.drawio,.xml,.vsdx(Visio),.svg,.png(埋め込みデータあり)
印刷
- ファイル > 印刷、またはCtrl+P / ⌘+P
- ページサイズとオプションを設定可能
図形と接続
図形の追加
- 左側のパネルから図形カテゴリを選択
- 目的の図形をキャンバスにドラッグ&ドロップ
- または図形をクリックしてからキャンバス上でドラッグして寸法指定
接続線の作成
- 図形の接続ポイント（小さな×印）にマウスを合わせる
- ドラッグして別の図形または接続ポイントまで線を引く
- または接続ツール（サイドバーのコネクタアイコン）を選択して接続
接続線のスタイル
- 直線、直角、曲線など複数のスタイルから選択可能
- 矢印、ダイヤモンド、円など様々な端点スタイルを適用可能
- 点線、破線などの線種を選択可能
自動接続
- 図形間で「接続」または「接続解除」コマンドを使用
- 図形を移動すると接続線が自動的に調整される
ラベル追加
- 接続線をダブルクリックしてラベルを追加
- ラベルをドラッグして位置調整
- スタイルパネルからラベルのスタイルを設定
スタイルとフォーマット
スタイルパネル
- 右側のスタイルパネルで選択オブジェクトの書式設定
- 塗りつぶし色、線の色、線の太さ、透明度などを設定
- テキストのフォント、サイズ、色、配置を設定
テーマ
- ファイル > 新規作成 でテーマを選択
- 既存の図表に対しては: 編集 > テーマ変更
- カスタムテーマの作成と保存が可能
グラデーションと影
- オブジェクトを選択
- スタイルパネルの「塗りつぶし」オプションでグラデーションを選択
- 「影」オプションで影を追加
フォーマットパネル
- スタイルパネルの「プロパティ」タブでより詳細な設定
- 正確なサイズ、位置、回転角度を指定
- レイヤーと不透明度を調整
高度な機能
レイヤー
- ビュー > レイヤー で表示
- 新規レイヤーの追加、削除、名前変更
- レイヤーの表示/非表示、ロック/ロック解除
グリッドとガイド
- ビュー > グリッド でグリッド表示/非表示
- ビュー > ガイド でガイド表示/非表示
- ビュー > グリッドにスナップ でグリッド吸着の有効/無効
カスタム図形
- 複数の図形を選択
- 右クリック > グループ化
- 右クリック > 編集 > 図形として編集
- カスタム図形を作成・保存
UMLとERD
- 左パネルのUMLまたはERDカテゴリから図形を選択
- クラス図、シーケンス図、ER図などの要素を使用可能
- テンプレートからUML図やER図を開始可能
ページとタブ
- 右クリック > ページ > ページを追加/削除/名前変更
- ページ間のナビゲーションはページタブを使用
- 複数ページを持つ図表の作成が可能
自動レイアウト
- レイアウトを適用したい図形を選択
- 整列 > レイアウト を選択
- 水平ツリー、垂直ツリー、有機的などからレイアウトを選択
連携と統合
Googleサービス連携
- Google Drive: 直接保存と開く
- Googleドキュメント、スプレッドシート、スライドに図を挿入
- Google Workspaceアドオンとして利用可能
Microsoft製品連携
- Microsoft OneDriveへの保存
- Microsoft Teams内で使用可能
- VS Codeの拡張機能として利用可能
Atlassian製品連携
- Confluence: マクロとして利用可能
- Jira: 図の添付と編集
GitHub連携
- GitHubリポジトリに直接保存
- GitHubページに埋め込み可能
- Markdownファイルに図を追加可能
APIとカスタム統合
- RESTful API: https://www.drawio.com/doc/faq/configure-diagram-editor
- IFrameの埋め込み: https://www.drawio.com/doc/faq/embed-mode
- カスタムプラグイン開発: https://github.com/jgraph/drawio/tree/master/src/main/webapp/plugins
トラブルシューティング
一般的な問題
- 図表が読み込めない: ファイル形式の互換性を確認、XMLエクスポートで復旧を試みる
- 表示の問題: ブラウザのキャッシュをクリア、または別のブラウザを試す
- パフォーマンス問題: 大きな図表は分割する、または不要な要素を削除
データ復旧
- 自動保存: ブラウザベースのdraw.ioは定期的に自動保存する
- ローカルストレージ: ファイル > 復元 からローカルに保存された旧バージョンを復元
- バックアップ: ファイル > 自動保存 > 自動保存ファイルを開く
既知の制限
- 非常に大きい図表（数千のオブジェクト）ではパフォーマンスが低下する可能性
- 一部の複雑なVisioファイルはインポート時に完全に互換性がない場合がある
- 特定のSVGの複雑な効果はエクスポート時に維持されない場合がある
テンプレートとライブラリ
標準テンプレート
- ファイル > 新規作成 からアクセス
- UML、ネットワーク図、フローチャート、マインドマップなど多数のテンプレート
カスタムテンプレート
- 既存の図表をテンプレートとして保存
- ファイル > テンプレートとして保存
- 新規作成時にマイテンプレートから選択
ライブラリ
- 左側パネルの「その他の図形」から追加のライブラリにアクセス
- AWS、Azure、GCPなどのクラウドアイコン
- ネットワーク機器、UI要素、フローチャート記号など
カスタムライブラリ
- 図形を選択
- 右クリック > ライブラリに追加
- 名前を付けて保存
- 左パネルの「ライブラリ」から利用可能
便利なTips
検索と置換
- 編集 > 検索 (Ctrl+F / ⌘+F) でテキスト検索
- 編集 > 置換 (Ctrl+H / ⌘+H) でテキスト置換
- 複数のオブジェクトにわたって検索可能
スクリプティング
- 拡張 > スクリプト で独自のJavaScriptを実行
- ドキュメント: https://www.drawio.com/doc/faq/scripting-custom-functions
- 図形の一括更新や特殊な機能を実装可能
数式
- テキスト内に LaTeX 形式の数式を挿入可能
-
$$で囲んで数式を入力 (例:$$E=mc^2$$) - MathJax を使用して描画
リアルタイムコラボレーション
- ファイル > 共有 からリアルタイム編集のURLを生成
- 同時編集が可能
- コメント機能でフィードバックを追加
プレゼンテーションモード
- ビュー > プレゼンテーション でプレゼンテーションモード開始
- 全画面表示でページ間を移動
- レーザーポインターとメモ機能付き
ダイアグラムの比較
- ビュー > 比較 で2つの図表を比較
- 変更点をハイライト表示
- バージョン管理に有用
キーボードマクロ
- 繰り返し操作を記録して再生
- 拡張 > キーボードマクロ で設定
- 複雑な操作を自動化
図のバージョン管理
- 履歴機能: ファイル > 履歴表示
- リビジョンの比較と復元
- クラウドストレージと組み合わせて効果的に利用
ダークモード
- 設定 > テーマ からダークモードを選択
- 目の疲れを軽減
- 夜間作業に適した設定
オフラインモード
- デスクトップアプリを使用
- インターネット接続なしで完全に機能
- ローカルファイル操作に最適