今回の仕上がりは、こんな感じ
「小さく決める」「作ってみる」「試して直す」を矢印でつないだ図です。下の画像は、実際にdraw.ioから書き出したSVGを表示したものです。図の原稿は編集部がXMLで用意しました。画面上で一から描いた作品とは区別しています。
図を大きく見る · 書き出したSVGを保存 · 編集用.drawioを保存
矢印は順番を示すもので、クリックしたら処理が進むプログラムではありません。読む人に何をしてほしいかを、箱の中の短い動詞で伝えました。
用意した図を読み込んで、二つの形式で保存する
- 公式エディタを開きます。今回はアカウントにログインせず、ローカルファイルの読み込みとダウンロードを使いました。
- このページの「編集用.drawioを保存」で作例を保存します。エディタの「ファイル」→「次の場所からインポート」→「デバイス...」で選ぶと、用意した図を読み込めます。空の図で読み込むと重複を避けられます。
- 中央に三つの箱と二本の矢印があることを確認します。同じ図を二度インポートした場合は「編集」の元に戻す操作で、直前の追加だけを戻せます。今回も重複を一度戻しました。
- 画像として保存するには「ファイル」→「形式を指定してエクスポート」→「SVG...」を選びます。今回の書き出しは図全体を対象にし、「ダイアグラムのコピーを含める」を残しました。
- 「エクスポート」の後、名前を入力し、場所を「ダウンロード」にします。場所を変えると確定ボタンが「OK」に変わるため、表示中のボタンを確認して押します。今回の保存名は
small-flow.svgです。 - 編集を続けるファイルは「ファイル」→「名前を付けて保存...」で「XMLファイル (.drawio)」を選び、ダウンロードします。今回は
small-flow.drawioを保存しました。
保存した二つのファイルが手元にあることを確認してから、タブを閉じます。今回、ダウンロードした編集用ファイルの構造と図の文字を確認しましたが、別端末での再編集は未検証です。
SVGだけ残せば、あとから直せる？
見せる用途にはSVG、編集を続ける用途には.drawioを残すと分かりやすくなります。SVGは拡大しても線がぼやけにくい画像形式です。今回のSVGには編集データも含めていますが、画像編集ソフトへの取り込み方まで同じになるとは限りません。
受け取る人が図を直すなら、編集用ファイルを一緒に渡します。図を記事に載せるだけなら、表示用画像と文章による説明を用意します。スマホで横長の図が小さくなる場合に備えて、この作例には三段階を文章でも載せました。
無料で使える？ 作った図の権利は？
2026年10月7日に確認した公式利用条件は、対象エディタを個人・業務の図の作成、編集、閲覧、共有に無料で利用できるとし、作った図の権利は利用者に残ると説明しています。今回使ったのはapp.diagrams.netです。別の製品や連携サービスの契約条件まで無料と決めつけないでください。
エディタのソースコードはApache 2.0ですが、それはソフトウェアの条件です。図へ借り物の画像やロゴを入れる場合は、その素材の権利を別に確認します。今回は自作の箱・文字・矢印だけを使用しました。
PCで読み込み、重複の取り消し、SVGと編集用ファイルの保存、サイトでの図の表示を確認しています。クラウド保存、共同編集、PDF出力、スマホでの図の編集は未検証です。最近のSNSの流行や個人開発とも確認していません。手描き風の図ならExcalidraw、図に添える小さな絵ならPhosphor Iconsも紹介しています。