draw.ioの使い方をマスター！【６つのステップで図を自在に作成】

Wondershare Edrawsoft による、無料作図ツール「draw.io」の詳しい使い方解説記事。2025-11-09 公開。

概要

ブラウザ上で動作するオープンソースの作図・ダイアグラム作成ツール「draw.io」の全機能を、6つのステップに分けて日本語で体系的に解説した入門記事。ログイン・登録不要ですぐ使える点が強調されている。代替ソフト「EdrawMax」のプロモーション記事でもある。

扱う6つのステップ

draw.io で新規ファイルを作成する
日本語版に切り替える手順
図形を新規作成する方法（フローチャート作成を例に）
テンプレートの使用法
保存・共有・印刷の方法
VS Code で Draw.io を使って図を作成する

draw.io の概要

ブラウザ上で動作するオープンソースの作図・ダイアグラム作成ツール
個人利用・ビジネス利用どちらでも無料で使える
ログイン・アカウント登録不要でブラウザから即座に利用可能
GitHub からデスクトップアプリ版もダウンロード可能（オフライン作業対応）

作成できる図の種類

かんばん（タスク）ボード、組織図、マインドマップ
フロー図（フローチャート、スイムレーン図、PERT図、BPMN図など）
ストーリーマッピング
IT図（AWS図、ラック図など）
ソフトウェア開発（UML図など）
ベン図・フィッシュボーン図、回路図・論理図、フロアプラン
ベクトル画像・アイコン・イラスト

操作方法のポイント

新規ファイル作成

draw.io サイトにアクセスし「Start」をクリック（登録不要）
「新規ファイルを作成する」を選択、ファイル名を入力して「作成」をクリック
保存先を指定（GoogleドライブやOneDriveなど。認証が必要な場合あり）
編集画面が開く

日本語化

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

図形操作（フローチャートを例に）

画面左側のパネルから使いたい図形をキャンバスへドラッグ
図形の上下左右に現れる矢印をクリック → 接続線付きの図形を素早く追加
図形をポイントして現れる青い×印ハンドルから接続先へドラッグ → 矢印で接続
接続線の青○ハンドルをドラッグ → カギ型などの複雑な接続線も描画可能
画面右側のサイドバーで色・線・テキストの書式変更
形状変更は変更元図形を選択した状態で Shift+クリック

テンプレート活用

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

保存・共有・エクスポート

保存：「ファイル」タブ → 「保存」または「名前を付けて保存」
共有：「ファイル」タブ → 「共有」→ リンクのコピー、またはメッセージを添えて直接送信
エクスポート：「ファイル」タブ → 「形式を選択してエクスポート」
- 対応形式：PNG・JPEG・WebP・SVG・PDF・VSDX・HTML・XML

VS Code 統合

Visual Studio Marketplace の「Draw.io Integration」拡張機能を導入
Cursor でも同様の拡張が利用可能（Cursor × draw.io 業務フロー作成ユースケース参照）
VS Code / Cursor 上で .drawio ファイルを直接編集・保存できる
コーディング環境と設計図を1つのツールで管理できる利点

draw.io とEdrawMax の比較

項目	draw.io	EdrawMax
価格	無料	Free版あり（有料プランも）
テンプレート	標準的	約280種類（豊富）
AI機能	なし	あり（フローチャート・マインドマップ自動生成）
エクスポート形式	PNG・JPEG・WebP・SVG・PDF・VSDX・HTML・XML	PNG・JPEG・BMP・TIFF・PDF・Word・Excel・PPT・SVG・Html・Visio・PS/EPS
CADインポート	不可	可
プラットフォーム	ブラウザ・デスクトップ	ブラウザ・デスクトップ・スマートフォン

関連

draw.io（概念ページ）
業務フロー設計（draw.io の主要ユースケース）
Cursor（VS Code 統合・業務フロー自動生成）
Wondershare Edrawsoft（著者・EdrawMax 開発元）