draw.io (diagrams.net) 調査レポート
1. 基本情報
- ツール名: draw.io (diagrams.net)
- ツールの読み方: ドロー・アイオー / ダイアグラムス・ドット・ネット
- 開発元: JGraph Ltd
- 公式サイト: https://app.diagrams.net/
- 関連リンク:
- GitHub: https://github.com/jgraph/drawio
- ドキュメント: https://www.drawio.com/doc/
- 情報サイト: https://www.drawio.com/
- カテゴリ: 作図ツール
- 概要: Webブラウザ上で動作する無料の作図ツール。フローチャート、UML、ER図、ネットワーク図など多様な図を作成できる。アカウント登録なしで利用でき、作成したデータはGoogle Drive、OneDrive、ローカルデバイスなどに保存可能。
2. 目的と主な利用シーン
- 解決する課題:
- 高価な専用ソフト（Visioなど）を使わずに、高品質な図を作成したい
- インストール不要で、どのPCからでも図を編集したい
- エンジニア向けの図（UML、構成図）を効率的に作成したい
- 想定利用者: エンジニア、デザイナー、学生、ビジネスパーソン全般
- 利用シーン:
- ソフトウェア設計図（UML、ER図）の作成
- AWS/Azure/GCPなどのクラウド構成図の作成
- 業務フローチャートの作成
- マインドマップや組織図の作成
3. 主要機能
- 豊富な図形ライブラリ: フローチャート、UML、BPMN、ネットワーク機器（AWS, Azure, GCP, Cisco等）など、多種多様なアイコンが標準で利用可能。
- 多様な保存先: Google Drive, OneDrive, Dropbox, GitHub, GitLab, ローカルデバイスなど、ユーザーが保存先を自由に選択できる。
- インポート/エクスポート: XML形式（.drawio）での保存に加え、PNG, JPEG, SVG, PDF, HTML形式でのエクスポートが可能。Visio (.vsdx) ファイルのインポートも対応。
- VS Code連携: 非公式だが公式推奨のVS Code拡張機能（hediet.vscode-drawio）を使用することで、エディタ内で直接作図が可能。
- 数式入力: LaTeX形式での数式入力に対応しており、技術的なドキュメント作成にも適している。
- レイヤー機能: PhotoshopやIllustratorのようなレイヤー機能があり、複雑な図の管理が容易。
4. 開始手順・セットアップ
- 前提条件:
- モダンなWebブラウザ（Chrome, Firefox, Edge, Safariなど）
- アカウント登録は任意（クラウドストレージ連携時にGoogle/Microsoftアカウント等を使用）
- インストール/導入:
- Web版はインストール不要。ブラウザで https://app.diagrams.net/ にアクセスするだけ。
- デスクトップ版（Electron製）も提供されており、GitHubからダウンロード可能。
- 初期設定:
- 初回アクセス時に「保存先」を尋ねられる（Device, Google Drive, OneDriveなど）。
- 言語設定（日本語対応済み）。
- クイックスタート:
- https://app.diagrams.net/ にアクセス。
- “Create New Diagram” をクリック。
- “Blank Diagram” またはテンプレートを選択して “Create” をクリック。
- キャンバスに図形をドラッグ＆ドロップして作図開始。
5. 特徴・強み (Pros)
- 完全無料かつオープンソース: Web版およびデスクトップ版は無料で全機能を利用できる。
- クライアントサイド処理: データはサーバーに送信されず、ブラウザ内で処理されるためセキュリティリスクが低い（保存先をローカルにすれば完全にオフラインで完結）。
- プラットフォーム非依存: ブラウザさえあればOSを問わず利用可能。
- エンジニアフレンドリー: GitHub連携やVS Code拡張機能など、開発フローに組み込みやすい。
6. 弱み・注意点 (Cons)
- リアルタイムコラボレーションの制限: Google Drive連携時などは複数人での同時編集が可能だが、Miroなどのホワイトボード専用ツールに比べるとスムーズさに欠ける場合がある。
- デザインの自由度: 作図に特化しているため、自由な描画や手書き要素はExcalidrawなどに劣る。
- Web版のオフライン利用: PWAとしてインストールするか、デスクトップ版を使わないと完全オフラインでは利用できない（キャッシュがあればある程度は動く）。
7. 料金プラン
| プラン名 | 料金 | 主な特徴 |
|---|---|---|
| Web / Desktop版 | 無料 | 機能制限なし。保存先はユーザーが管理。 |
| Confluence / Jira Cloud | 有料 | Atlassian Marketplace経由での契約。企業向けのサポートや統合機能が含まれる。 |
| Confluence / Jira Data Center | 有料 | オンプレミス環境向けのライセンス。 |
- 課金体系: 基本的に無料。Atlassian製品への統合版のみユーザー数に応じた課金。
- 無料トライアル: Atlassian版には30日間の無料トライアルあり。
8. 導入実績・事例
- 導入企業: 世界中の多くの企業、教育機関、個人開発者に利用されている。
- 導入事例:
- オープンソースプロジェクトの設計図作成
- 企業の社内システム構成図のドキュメント化
- 大学での講義資料作成
- 対象業界: IT業界を中心に全業界。
9. サポート体制
- ドキュメント: 公式サイトに詳細なユーザーガイド、チュートリアル、ビデオガイドがある。
- コミュニティ: GitHubのIssueやDiscussions、Stack Overflowなどで活発に情報交換が行われている。
- 公式サポート: Web版（無料ユーザー）向けの個別サポートはないが、GitHub経由でのバグ報告は可能。Atlassian版ユーザーには商用サポートが提供される。
10. エコシステムと連携
10.1 API・外部サービス連携
- API: URLパラメータによる制御や、Embedモードによる埋め込みが可能。
- 外部サービス連携:
- ストレージ: Google Drive, OneDrive, Dropbox, GitHub, GitLab
- ツール: Notion（埋め込み）, Confluence, Jira, VS Code
10.2 技術スタックとの相性
| 技術スタック | 相性 | メリット・推奨理由 | 懸念点・注意点 |
|---|---|---|---|
| VS Code | ◎ | 拡張機能でシームレスに編集可能。Git管理と相性が良い。 | ファイルサイズが大きくなると重くなる可能性。 |
| GitHub / GitLab | ◎ | XMLファイルを直接リポジトリに保存・バージョン管理できる。 | 差分が見にくい（XMLのため）。SVG形式で保存するとプレビュー可能。 |
| Google Workspace | ◎ | Google Driveに保存することでリアルタイム共同編集が可能。 | Googleアカウントが必要。 |
11. セキュリティとコンプライアンス
- 認証: アプリケーション自体へのログインは不要。保存先（Google Drive等）の認証を利用する。
- データ管理: データはブラウザ内（クライアントサイド）で処理され、保存時のみ指定したストレージ（Google Driveやローカル）に書き込まれる。draw.ioのサーバーに作図データが送信・保存されることはない。
- 準拠規格: Atlassian版についてはISO/IEC 27001などの認証を取得している場合がある（詳細はAtlassian Marketplace参照）。Web版はツール提供のみのため、データのセキュリティは保存先のストレージのセキュリティポリシーに依存する。
12. 操作性 (UI/UX) と学習コスト
- UI/UX: Officeソフト（VisioやWord）に似たインターフェースで、直感的に操作できる。ドラッグ＆ドロップが基本操作。
- 学習コスト: 低い。一般的な作図ツールの経験があればすぐに使える。高度な機能（レイヤー、メタデータなど）を使うにはドキュメント参照が必要。
13. ベストプラクティス
- 効果的な活用法 (Modern Practices):
- VS Codeで管理: 設計図をコードと一緒にGitで管理し、VS Code拡張機能で編集する（Diagrams as Codeに近い運用）。
- SVG形式での保存: SVGファイルの中にdraw.ioの編集データを埋め込むことができるため、Webブラウザでのプレビューと再編集の両立が可能。
- 陥りやすい罠 (Antipatterns):
- 巨大な1枚の図: 動作が重くなるため、適度にページやファイルを分割する。
- エクスポート画像の直接編集: PNGなどにエクスポートした後、元のdrawioファイルを捨ててしまうと再編集できない（PNGに編集データを埋め込むオプションもあるが、忘れがち）。
14. ユーザーの声（レビュー分析）
- 調査対象: G2, Capterra, ITreview, GitHub
- 総合評価: 非常に高い（多くのサイトで4.5/5.0以上）
- ポジティブな評価:
- 「無料でここまでできるのは信じられない」
- 「Visioの代替として十分使える」
- 「登録不要ですぐに使い始められる手軽さが最高」
- ネガティブな評価 / 改善要望:
- 「線の接続やレイアウトの自動調整がたまに思った通りにいかない」
- 「もっと洗練されたモダンなデザインテンプレートが欲しい」
- 特徴的なユースケース:
- ネットワークエンジニアによる物理配線図の作成
- 学生による論文用の図表作成
15. 直近半年のアップデート情報
- 2026-02-22: v29.5.2 リリース (バグ修正)
- 2026-02-20: v29.5.1 リリース
- 2026-01-28: v29.3.6 リリース
- 2026-01-08: v29.3.0 リリース (機能改善)
- 2025-12-19: v29.2.9 リリース
(出典: GitHub Releases)
16. 類似ツールとの比較
16.1 機能比較表 (星取表)
| 機能カテゴリ | 機能項目 | draw.io | Miro | Lucidchart | Visio |
|---|---|---|---|---|---|
| 基本機能 | 作図機能 | ◎ | ◯ | ◎ | ◎ |
| コラボレーション | リアルタイム編集 | ◯ G Drive連携時 |
◎ 非常に強力 |
◎ | △ |
| コスト | 無料プラン | ◎ 全機能無料 |
△ 制限あり |
△ 制限あり |
× 有料のみ |
| プラットフォーム | オフライン利用 | ◯ Desktop版 |
△ 限定的 |
△ | ◎ |
| 開発者向け | VS Code連携 | ◎ | × | × | × |
16.2 詳細比較
| ツール名 | 特徴 | 強み | 弱み | 選択肢となるケース |
|---|---|---|---|---|
| draw.io | 無料・高機能・セキュア | 完全無料、登録不要、データ保存先の自由度、VS Code連携 | デザイン性やブレスト用途ではMiroに劣る | コストをかけずに本格的な図を作成したい場合。エンジニアの設計図作成。 |
| Miro | 無限キャンバス・コラボ | チームでのアイデア出し、ホワイトボード機能、モダンなUI | 作図機能（UMLなど）はdraw.ioやLucidchartほど厳密ではない | チームでのブレインストーミングやワークショップ。 |
| Lucidchart | 統合型作図ツール | 豊富なテンプレート、データ連携機能、エンタープライズ対応 | 有料プランが必要 | 大企業での標準ツールとして導入する場合。 |
| Visio | 伝統的な作図ツール | Office連携、詳細な制御 | 高価、Windows中心、Web対応が遅れ気味 | 既にMicrosoftエコシステムで統一されている環境。 |
17. 総評
- 総合的な評価:
- 無料で利用できる作図ツールとしては間違いなく最高峰。機能、使いやすさ、セキュリティのバランスが取れており、個人利用から業務利用まで幅広く対応できる。特にエンジニアにとっては、GitやVS Codeとの親和性が高く、必須のツールと言える。
- 推奨されるチームやプロジェクト:
- 予算を抑えたいスタートアップや小規模チーム
- GitHubでドキュメントを管理している開発チーム
- セキュリティ要件が厳しく、データを外部（SaaS側のサーバー）に保存したくないプロジェクト
- 選択時のポイント:
- 「とにかく無料で高機能なものがいい」ならdraw.io一択。
- 「チームでわいわいブレストしたい」ならMiro。
- 「既存のVisio資産を活かしたい」ならVisioまたはdraw.io（インポート可能）。