diagrams.net（draw.io）は、フローチャートや業務フロー、システム構成図などを無料で作成できる作図ツールです。
本記事では、diagrams.netの始め方から、テンプレートの選択、基本操作、保存・エクスポートまでを解説します。日本語表示への変更や、作成した図をNotePMで共有する方法も紹介します。
目次
diagrams.net（draw.io）とは
diagrams.netは、draw.ioという名前でも知られています。公式サイトやデスクトップ版では、今もdraw.ioの名称が使われています。フローチャート、組織図、UML、ネットワーク構成図、ワイヤーフレームなど、さまざまな図を作成できます。
主な特徴は次のとおりです。
- 無料で使える
- ブラウザ版はインストール不要
- 図形やテンプレートが豊富
- Google Driveなどのクラウドストレージやローカルに保存できる
- PNG、SVG、PDFなどにエクスポートできる
- Windows、macOS、Linux向けのデスクトップ版も利用できる
作成した図はdiagrams.net独自のストレージには保存されず、ユーザーが選んだ保存先で管理します。
diagrams.netを使い始める
ここではWeb版を例に、保存先の選択からテンプレートの利用までを説明します。
1．diagrams.netにアクセスする
まず、diagrams.netの編集画面にアクセスします。初めてアクセスした場合は、保存先の選択画面が表示されることがあります。設定済みの環境では、直接編集画面が開く場合もあります。
2．ファイルの保存先を選ぶ
選択画面が出たら、保存先を選びます。
| 保存先 | 特徴 |
| デバイス | PC内にファイルを保存する |
| Google Drive | Googleアカウントのストレージに保存する |
| OneDrive | Microsoftのクラウドストレージに保存する |
| Dropbox | Dropbox内にファイルを保存する |
| GitHub・GitLab | リポジトリで図のファイルを管理する |
| ブラウザ | ブラウザ内のローカルストレージに保存する |
初めて利用する場合は「デバイス」を選ぶと、クラウドサービスとの連携設定なしで始められます。Google Driveなどを選ぶと、ログインやアクセス許可を求められることがあります。
なお、「ブラウザ」を選んだ場合、ブラウザのデータを削除すると保存した図も失われることがあります。残しておきたい図は、デバイスやクラウドストレージにも保存してください。保存先は後から変更できます。
3．新しい図を作成する
新規作成画面が表示されたら、「新規ファイルを作成」を選択します。すでに編集画面が開いている場合は、［ファイル］→［新規作成］から作成できます。
ファイル名を入力し、テンプレートを選びます。白紙から作る場合は「白紙のダイアグラム（Blank Diagram）」を選んで「作成」をクリックしてください。
4．利用できるテンプレートの種類
diagrams.netには、用途別のテンプレートが用意されています。
| カテゴリ | 作成できる図の例 |
| ビジネス | 業務フロー、組織図 |
| フローチャート | 作業手順、処理の分岐 |
| UML | システム設計図 |
| ネットワーク | ネットワーク構成図 |
| ワイヤーフレーム | Webサイトやアプリの画面構成 |
| マインドマップ | アイデアや情報の整理 |
たとえばフローチャートのテンプレートなら、配置済みの図形や文字、接続線を書き換えて業務フローを作れます。テンプレートは新規作成時だけでなく、既存の図にも［配置］→［挿入］→［テンプレート］から追加できます。
diagrams.netの基本的な使い方
編集画面の左側には図形ライブラリ、中央には編集エリア、右側には書式パネルがあります。ここでは簡単な業務フローを例に、基本操作を5つ説明します。
1．図形を配置する
編集画面の左側には、四角形や円、矢印などの図形が用意されています。
- 左側の図形ライブラリから使いたい図形を選びます。
- 図形を中央の編集エリアへドラッグ＆ドロップします。
- 配置した図形をドラッグして位置を調整します。
- 図形を選択し、周囲のハンドルをドラッグしてサイズを変更します。
図形をクリックして編集エリアに追加する方法もあります。業務フローでは、処理は四角形、条件分岐はひし形と使い分けると、流れが見やすくなります。
2．図形に文字を入力する
- 文字を入力したい図形をダブルクリックします。
- 「申請」「承認」「完了」などの文字を入力します。
- 図形の外側をクリックして編集を終了します。
フォントやサイズ、色、配置は、図形を選択して右側の［テキスト］で変更できます。業務フローでは、「申請書を提出する」「上長が承認する」のように、誰が何をするか分かる書き方にすると伝わりやすくなります。
3．図形同士を線・矢印でつなぐ
図形を並べたら、線や矢印でつないで流れを示します。
- 接続元の図形にマウスカーソルを合わせます。
- 図形の周囲に表示される矢印から、接続したい方向へドラッグします。
- 接続先がハイライトされたらマウスを離します。
線を選択すると、右側の書式パネルで色や太さ、矢印の形を変更できます。また、線をダブルクリックして「はい」「いいえ」と入力すると、分岐の条件を示せます。
4．色・線・サイズを変更する
図形の見た目を変えるには、対象を選択して右側の書式パネルを操作します。
| 項目 | 変更できる内容 |
| 塗りつぶし | 図形の背景色 |
| 線 | 枠線の色・太さ・種類 |
| テキスト | 文字のサイズ・色・配置 |
| サイズ | 図形の幅・高さ |
開始と終了を同じ色にし、分岐だけ別の色にすると、役割の違いが分かります。飾りすぎず、同じ役割の図形は同じ書式にそろえると見やすくなります。
5．図形の位置やレイアウトを整える
図形を配置した後は、位置や間隔を調整します。Shiftキーを押しながら図形をクリックして複数選択し、［配置］メニューか右側の［配置］パネルで整列します。
左端や中央をそろえたり、間隔を均等にしたりできます。業務フローでは、進行方向を上から下か左から右に統一すると、線の交差を減らし、流れを追いやすくなります。
diagrams.netで作成した図を保存・エクスポートする
作成した図は、後から編集できるファイルとして保存するほか、資料などで利用するために画像やPDFとして書き出せます。
ファイルを保存する
後から図形や文字を編集する場合は、標準形式の.drawioで保存します。［ファイル］→［保存］（または［名前を付けて保存］）を選び、必要に応じてファイル名や保存先を指定します。自動保存の動作は保存先によって異なるため、編集後は保存できているか確認してください。
PNG・PDFなどにエクスポートする
作成した図を資料やWebページに掲載する場合は、PNGやPDFなどに書き出します。［ファイル］→［形式を指定してエクスポート］から形式を選び、サイズや余白などを確認して［エクスポート］をクリックします。
主な形式と用途は次のとおりです。
| 形式 | 主な用途 |
| PNG | 文書やWebページ、プレゼン資料に画像として挿入する |
| SVG | 拡大・縮小しても画質を維持したい場合に使う |
| JPEG | 一般的な画像として利用する |
| 図を配布・印刷する |
PNG・SVG・PDFは、エクスポート時に「図のコピーを含める」を選ぶと、再編集用のデータを埋め込めます。ただし、PDFへの編集データの埋め込みはデスクトップ版では利用できず、Safariでもうまく動かない場合があります。
また、SVGはOfficeなどで加工すると編集データが失われることがあります。後から編集できるよう、元の.drawioファイルも残しておいてください。
diagrams.netを便利に使うための設定・機能
基本的な作図に加え、日本語表示や改訂履歴、ダークモードなどの機能も利用できます。
表示言語を日本語に変更する
設定メニューの［Language（言語）］から日本語を選び、画面を再読み込みすると表示が切り替わります。従来型の編集画面では、［Extras］→［Language］から変更します。次のURLなら、最初から日本語で開けます。https://app.diagrams.net/?lang=ja
Web版とデスクトップ版を使い分ける
ブラウザで利用するWeb版のほか、PCにインストールするデスクトップ版があります。
| 項目 | Web版 | デスクトップ版 |
| インストール | 不要 | 必要 |
| 主な利用環境 | Webブラウザ | Windows・macOS・Linux |
| オフライン利用 | 読み込み済みの状態など、条件によって利用可能 | インターネット接続なしで作図可能 |
| 保存先 | ローカル・対応クラウドサービス | ローカルファイルのみ |
クラウドストレージと連携するならWeb版、インターネット接続のない環境で使うならデスクトップ版が向いています。デスクトップ版は、draw.ioの公式案内ページから入手できます。
改訂履歴から以前の状態を確認する
Google Driveに保存した図は、［ファイル］→［改訂履歴］から過去のバージョンを確認できます。デバイスに保存したファイルでは、この方法で改訂履歴を確認できません。
ダークモードに切り替える
［設定］→［外観］→［ダーク］で、編集画面をダークモードに切り替えられます。従来型の画面では［Extras］→［外観］から変更します。
ダークモードでは、図形の色が画面上で自動調整される場合があります。エクスポート前に仕上がりを確認してください。
AWSなどの図形素材を利用する
四角形や円のほか、AWSのサービスアイコンなど、システム構成図向けの図形も利用できます。左側の図形ライブラリに目的のアイコンがない場合は、［その他の図形］から必要なライブラリを有効にします。
diagrams.netで作成した図をNotePMで共有する
NotePMでは、diagrams.netで作成した図をページに埋め込み、文章と一緒に表示できます。
diagrams.netの図をNotePMに埋め込む方法
iFrameを使った埋め込み手順は次のとおりです。
- diagrams.netで対象の図を開きます。
- ［ファイル］→［埋め込み］→［iFrame］を選択します。
- 埋め込み設定を確認します。
- ［作成する］をクリックして、embed.htmlを保存します。
- embed.htmlをメモ帳などのテキストエディタで開き、埋め込み用のHTMLコードをコピーします。
- NotePMのページ編集画面にコードを貼り付けます。
※draw.io 30.1より前のバージョンでは、embed.htmlは保存されず、画面上の［コピー］からコードをコピーします。
埋め込みコード内のsrcがhttps://app.diagrams.netで始まる場合は、https://viewer.diagrams.netに変更します。iFrame埋め込みでは、参照する図のファイルを公開状態にする必要があります。Google Driveなら、共有設定を公開にします。
機密情報や顧客情報を含む図は公開せず、PNGやSVGで書き出してNotePMに画像として掲載してください。詳しくは、NotePM公式ヘルプ「draw.ioで作成した図形を埋め込む」をご覧ください。
作成した図を社内マニュアルと一緒に管理する
NotePMでは、図に作業手順や注意点を添え、関連するマニュアルと一緒に管理できます。キーワード検索で、図を載せたページも探せます。業務フローや構成図を社内で共有・更新したい場合は、30日間の無料お試しで機能を確認できます。クレジットカードの登録は不要です。
まとめ
diagrams.netでは、テンプレートや図形を使って、フローチャートや構成図などを無料で作成できます。初めて使う場合は、まず図形を配置し、文字を入力して線でつなぎ、保存するまでの基本操作を試してみてください。作成した図を社内で共有する際は、保存先とアクセス権限を確認してください。