MyVault

draw.io

Properties1
tagsdraw-io, diagramming, flowchart, uml, bpmn, vscode, cursor, open-source, free-tool, workflow, business-flow, excel

8 min read

draw.io

ブラウザ上で動作するオープンソースの無料作図・ダイアグラム作成ツール。登録不要で即使え、個人からビジネスまで幅広く活用されている。旧称「diagrams.net」とも呼ばれる。

基本情報

  • 種別: オープンソース・無料
  • 動作環境: ブラウザ（登録不要）・デスクトップアプリ（GitHub よりダウンロード可）
  • 保存先: Google ドライブ・OneDrive・GitHub など複数のクラウドストレージに対応
  • VS Code / Cursor 統合: 拡張機能「Draw.io Integration」により IDE 上で直接編集可能

作成できる図の種類

draw.io の最大の特徴は作成可能な図形の多さにある。

カテゴリ具体例
プロジェクト管理かんばんボード、組織図、マインドマップ、ストーリーマッピング
フロー系フローチャート、スイムレーン図、PERT図、BPMN図
IT・インフラAWS構成図、ラック図、ネットワーク図
ソフトウェア開発UML図（クラス図・シーケンス図など）
分析・思考整理ベン図、フィッシュボーン図
電気・回路回路図、論理図
建築・設計フロアプラン
汎用四角・円・線・矢印などの基本図形、ベクトル画像、アイコン

基本操作

新規ファイル作成

  1. ブラウザで draw.io にアクセスし「Start」をクリック（ログイン不要）
  2. 「新規ファイルを作成する」を選択しファイル名を入力
  3. 保存先（Google ドライブ等）を指定
  4. 編集画面が開く

テンプレートがある場合はこの画面から選択も可能。

日本語化

「Extras」タブ → 「Language」→ 「日本語」選択 → F5 キーで画面更新

図形の作成と接続

  • 左パネルの図形をキャンバスへドラッグで配置
  • 図形の四方に現れる矢印をクリック → 接続線付きの新しい図形を素早く追加
  • 図形をホバーして現れる青い×印ハンドルから別の図形へドラッグ → 矢印で接続
  • 接続線の青○ハンドルをドラッグ → カギ型など複雑な経路変更が可能

書式変更

  • 図形の色・線種：図形を選択 → 右サイドバーで変更
  • テキストの書式：右サイドバーの「テキスト」タブでサイズ・色などを変更
  • 図形の形状変更：変更元図形を選択した状態で左パネルの別の図形を Shift+クリック

テンプレートの使用

  • 「ファイル」タブ → 「新規作成」でテンプレート選択ダイアログが開く
  • 既存の編集画面でテンプレートを使う場合：「配置」タブ → 「挿入」→ 「テンプレート」

エクスポート・共有

  • エクスポート対応形式：PNG・JPEG・WebP・SVG・PDF・VSDX・HTML・XML
  • 共有：「ファイル」タブ → 「共有」→ リンクのコピーまたはメッセージ付き送信
  • 印刷：「ファイル」タブ → 「印刷」

プラグイン

「拡張」タブ → 「プラグイン」から追加機能を導入できる。

VS Code / Cursor との統合

Visual Studio Marketplace の 「Draw.io Integration」 拡張機能（Henning Dieterichs 開発）を VS Code または Cursor にインストールすると：

  • .drawio ファイルを IDE 上で直接GUI編集できる
  • コードと設計図を同一ツール・同一リポジトリで管理可能
  • Cursor では AI が XML コードを直接生成・編集するため、テキスト指示から業務フロー図を自動生成できる

Cursor × draw.io の業務フロー自動生成

すぅ AI駆動PM が提唱するアプローチでは、ヒアリング議事録などのテキストを渡すだけで Cursor が .drawio の XML コードを自動生成する。テンプレートパックの事前整備（採番ルール・ガイドライン・スイムレーン定義）が品質安定の鍵となる。詳細: Cursorで業務フローをつくる（すぅ AI駆動PM）

draw.io の位置づけ（AI業務フロー自動化の文脈）

業務フロー設計 の文脈では draw.io は「たたき台ツール」として位置付けられる。

  • Cursor × draw.io の組み合わせで「0→1」の自動生成が可能になった
  • ただし最終的な顧客共有レベルの品質には FigJam や PPT への転記・手修正が必要な場合がある
  • Miro を使った AI 業務フロー自動生成（「これがほしかった」AIで業務フローをつくる to Miro 参照）は draw.io 版の限界を超え、そのまま顧客共有できるレベルの成果物を生成できる点で進化版とも言える

Excel への図の挿入

draw.io で作成した図を Excel ドキュメントに組み込む方法は2種類ある。詳細手順: 無料｜高機能作図ツールdraw.ioとExcel連携｜図解で解説

画像形式（PNG/JPEG）で挿入

  1. draw.io で「ファイル」→「エクスポート」→「PNG」または「JPEG」
  2. Excel で「挿入」→「図」→「このデバイス」から画像を選択
  3. Excel の画像編集機能（トリミング・色調整・スタイル変更）が使える
  4. デメリット: 拡大すると画質が劣化する。図形の個別編集は不可

SVG 形式で挿入

  1. draw.io で「ファイル」→「エクスポート」→「SVG」
  2. Excel で「挿入」→「図」→「このデバイス」から SVG を選択
  3. ベクター形式のため拡大・縮小しても画質劣化なし
  4. Excel 上で図形として認識され、要素を個別に編集可能
  5. デメリット: トリミング不可。色・スタイル変更は図形全体に適用される

Excel 上での発展的活用

  • テキストボックスとの組み合わせ: 図に補足説明・注釈を付加して理解度を向上
  • グループ化: 複数の図形をまとめて移動・サイズ変更（右クリック→「グループ化」）
  • ダッシュボード作成: draw.io 図 + Excel グラフ・表を組み合わせた視覚的レポート
  • プロジェクト管理ツール: ガントチャート・WBS を Excel 関数・マクロと組み合わせる

形式の使い分け

一般的な資料埋め込みには PNG（手軽）、拡大使用や高解像度印刷が想定される場合は SVG を選ぶ。SVG のほうが後からの編集自由度が高い。

デスクトップアプリ

  • draw.io 公式サイトから GitHub の入り口経由でデスクトップアプリをダウンロード可能
  • Windows：.exe ファイルをダウンロードしてインストール
  • オフライン環境での作業が必要な場合に有用

関連

Graph View

バックリンク