無料｜高機能作図ツールdraw.ioとExcel連携｜図解で解説

著者: 茶トラのチャー 媒体: hanchan1000.com（個人ブログ） 公開日: 2025-03-29

概要

茶トラのチャー による、無料作図ツール draw.io で作成した図を Excel に組み込む具体的な手順を図解付きで解説した入門記事。画像（PNG/JPEG）形式での挿入と SVG 形式での挿入という2つのアプローチを比較し、それぞれのメリット・デメリットと操作手順を整理している。

主要テーマ

• draw.io の概要と Microsoft Visio との比較
• draw.io の図を Excel に 画像形式（PNG/JPEG）で挿入する手順
• draw.io の図を Excel に SVG 形式で挿入する手順
• Excel 上での図の編集・調整方法
• テキストボックス組み合わせ・グループ化などの発展的活用

キーポイント

draw.io とは

• ブラウザ上で利用できる無料の作図ツール（インストール不要）
• フローチャート・UML図・ネットワーク図など多種対応
• 無料ながら Visio など有料ソフトに匹敵する機能を持つ

Excel 連携のメリット

メリット	内容
資料作成の効率化	図を別々に管理する手間を省き、一元管理できる
視覚的な訴求力の向上	データの可視化・プロセス説明が容易になり、資料の理解度が高まる
共有・共同編集の容易化	Excel 形式で共有すれば、相手に特別なソフトウェアは不要

挿入方法の比較

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

1. draw.io で図を作成
2. 「ファイル」→「エクスポート」→「PNG」または「JPEG」を選択
3. Excel で「挿入」タブ →「図」→「このデバイス」から保存した画像を選択
4. Excel 上で位置・サイズを調整

SVG 形式での挿入手順

1. draw.io で図を作成
2. 「ファイル」→「エクスポート」→「SVG」を選択
3. Excel で「挿入」タブ →「図」→「このデバイス」から保存した SVG を選択
4. Excel 上で位置・サイズを調整

SVG 形式の利点

SVG（Scalable Vector Graphics）はベクター形式のため、拡大・縮小しても画質が劣化しない。高解像度での使用や拡大利用が見込まれる場合は SVG が推奨。

画像形式 vs SVG 形式：編集可能範囲の比較

編集内容	画像形式	SVG 形式
サイズ変更	○	○
位置調整	○	○
トリミング	○	×
色調整	○	△（図形全体に適用される場合あり）
スタイル変更	○	△（図形全体に適用される場合あり）
図形の個別編集	×	○

発展的活用

活用例	説明
テキストボックスとの組み合わせ	図に補足説明・注釈を追加し、資料の理解度を深める
図のグループ化	複数の図形をまとめて移動・サイズ変更できる（右クリック→グループ化）
ダッシュボード作成	draw.io 図 + Excel グラフ・表を組み合わせた視覚的ダッシュボード
プロジェクト管理ツール	draw.io のガントチャート・WBS と Excel の関数・マクロを組み合わせる
UML・ER図・ネットワーク図	システム設計書をドキュメントに統一感を持たせながら組み込む

関連概念

• draw.io（概念ページ：ツール全体像・VS Code 統合・業務フロー自動生成）
• SVG（Scalable Vector Graphics）

関連エンティティ

• 茶トラのチャー