draw.io（diagrams.net）とは・使い方｜XMLとPython生成

draw.io は1つのエディタを、Web・デスクトップ・VS Code など複数の入口から使えます。どこで描いても、保存されるのは同じ形式のファイルです。

flowchart TD
    A[Web・デスクトップ・VS Code] --> F[.drawio ファイル<br>中身は XML]
    F --> E[PNG・SVG・PDF]
    F --> G[.drawio.svg など<br>画像のまま再編集]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、Python 3.13.18 の標準ライブラリ（xml.etree.ElementTree・zlib・base64・urllib.parse）で .drawio の XML を生成し、draw.io の公式ドキュメント（GitHub の File Format）に書かれた圧縮形式（URI エンコード→ヘッダーなしの DEFLATE→Base64）で圧縮・展開を往復させました。PNG への埋め込み（tEXt チャンク）と SVG への埋め込み（content 属性）は、同じ文書に書かれた構造どおりに Pillow 12.3.0 で作り、取り出せるかを確かめています。差分は git 2.43.0 の git diff --no-index、Mermaid は mermaid-cli 11.16.0 で描画しました。draw.io Desktop（2026年10月29日時点の最新は 32.5.5）は、この環境から配布ファイルを取得できなかったため実行しておらず、CLI のオプションは公式 Wiki「Desktop App」の範囲で書いています。Web版・VS Code 拡張の画面操作も公式ドキュメントと Visual Studio Marketplace の説明で確かめた範囲です。PlantUML は描画系を取得できなかったため、ソースの行数だけを比べました（確認日 2026年10月29日）。

draw.io（diagrams.net）とは

この節では、draw.io が何をするツールで、diagrams.net という名前とどう関係するのかが分かります。

draw.io は、英国の JGraph 社が開発している作図ツールです。フローチャート、システム構成図、ネットワーク図、ER図、シーケンス図、組織図、画面遷移図など、四角と線で描く図をひととおり描けます。Microsoft Visio に近い操作感で、図形を左の一覧からドラッグし、矢印でつないで作ります。

サービスの URL は一時期 diagrams.net に変わりましたが、ツールの名前は今も draw.io で、公式サイトは drawio.com、Web版のエディタは app.diagrams.net です。「draw.io」と「diagrams.net」は同じものを指しています。

ライセンスと開発の体制

Web版のソースは GitHub の jgraph/drawio で公開され、ソースコードは Apache License 2.0 です（アイコン集・テンプレートは別の条件があると README に書かれています）。デスクトップ版は jgraph/drawio-desktop で GPL-3.0 です。どちらも外部からのプルリクエストは受け付けず、JGraph 社の中で開発されています。社内のサーバーで動かしたい場合のために、公式の Docker イメージ（jgraph/drawio）も用意されています。

できること・苦手なこと

Web版・デスクトップ版・VS Code拡張（drawio vscode）の違い

この節では、draw.io を使う3つの入口の違いと、どれを選ぶかが分かります。

描ける図は同じで、違うのは「保存先」「ネットにつながるか」「どこで開くか」です。

デスクトップ版の特徴

drawio-desktop の README には、「draw.io Desktop is designed to be completely isolated from the Internet, apart from the update process.」（更新の処理を除き、インターネットから完全に切り離すように作られている）とあり、図のデータも利用状況の分析も外部に送らないと書かれています。更新確認は1日1回 GitHub に問い合わせる動きで、--disable-update または環境変数 DRAWIO_DISABLE_UPDATE=true で止められます。ただし、図の中に外部 URL の画像やフォントが入っていると、開いたときにその URL へ取りに行くと注意書きがあります。社外から受け取った図を開くときは、この点を覚えておきます。

配布形式は、Windows がインストーラー（NSIS・MSI）・ポータブル zip・Microsoft Store、Linux が AppImage・deb・rpm・Snap・Flatpak です（2026年10月29日時点の最新は 32.5.5）。

VS Code 拡張「Draw.io Integration」

VS Code では、Henning Dieterichs 氏の拡張「Draw.io Integration」（ID：hediet.vscode-drawio）が広く使われています。Visual Studio Marketplace の説明では、.drawio・.dio・.drawio.svg・.drawio.png を draw.io のエディタで開け、既定でオフライン版の draw.io を使います。テーマの切り替え、Live Share での共同編集、ラベルが # で始まる図形をダブルクリックするとコードの記号を検索する「Code Link」があります。.drawio.svg の色を明るい・暗い・自動のどれで保存するかは設定 hediet.vscode-drawio.svgAppearance で決めます。

2026年7月には、Markdown のプレビューの中で図をその場で編集できる機能がプレリリース版（1.9.260714020）で提供されたと gihyo.jp が報じています。正式版に入っているかは、拡張の更新履歴で確かめてから使います。

入口を選ぶ順番

1. 1まず試す → Web版保存先は「デバイス」を選ぶと、手元のファイルとして保存できる
2. 2設計書と一緒に管理する → VS Code 拡張.drawio.svg で保存し、Markdown から画像として参照する
3. 3社外秘の図・ネットが使えない → デスクトップ版更新確認も止められる
4. 4大量の図を一括で画像にする → デスクトップ版の CLICI で書き出す使い方もできる
5. 5Confluence・Jira で使う → 公式の連携アプリ組織の管理者が導入する

draw.ioの使い方（最初の図を作る基本の流れ）

この節では、Web版で最初の図を作って保存するまでの手順が分かります。

迷いやすいのは最初の「保存先」と「ファイル名」の2つです。描き方そのものは、図形をドラッグして矢印でつなぐだけです。

表示が英語のときは、画面の言語メニューで日本語を選び、ページを読み込み直すと切り替わります。メニュー名は、この記事では公式ドキュメントと同じ英語で書いています。

• オンラインの保存先を選んでいる場合は自動保存されます。保存先によって自動保存の動きが変わるため、手元に保存しているときはこまめに Ctrl+S（macOS は Cmd+S）で保存します。

よく使う図の作り方（フローチャート・構成図・ER図・シーケンス図とAWSアイコン）

この節では、仕事でよく描く4種類の図を draw.io でどう作るかと、AWS アイコンの出し方が分かります。

どの図も「テンプレートから始めて、図形集を足す」のが近道です。図の書き方の決まり（記号の意味）はそれぞれの専門の記事に任せ、ここでは draw.io での操作に絞ります。

フローチャート

開始・終了は角丸か楕円、処理は四角、判断はひし形が基本です。draw.io では、図形を選んで Alt+Shift+矢印キー（macOS は Option+Shift+矢印キー）を押すと、その向きに同じ図形を複製して線でつなぎます。公式ドキュメントによれば、押した向きに既に図形があるときは複製せず、その図形とつなぎます。分岐の「はい」「いいえ」は、線を選んで文字を打つとラベルになります。記号の意味と分岐・繰り返しの描き方は、関連記事「フローチャートの書き方と記号一覧｜分岐・繰り返しの例とMermaid」で扱っています。

構成図とAWSアイコン

AWS のアイコンは最初は表示されていません。公式ドキュメントの手順は次のとおりです。

1. 左の図形一覧の一番下にある More Shapes をクリックする
2. 一覧の Networking の区分までスクロールし、使いたい AWS の図形集にチェックを入れて Apply
3. VPC・サブネットなどの枠は AWS / Groups の図形集から置く

AWS のテンプレートから始めるときは、Arrange > Insert > Template を開き、Cloud の区分の AWS を選びます。図形にマウスを乗せると、それが AWS の何を表すかが表示されます。Azure・GCP・Kubernetes・Cisco の図形集も同じ More Shapes から追加します。構成図に何を描くか（層の分け方・記号の決まり）は、関連記事「システム構成図の書き方と例 Mermaidテンプレートと記号一覧」と「ネットワーク構成図の書き方｜記号・レイヤー別の書き分けとAWS構成の例」で扱っています。

ER図

Entity Relation の図形集には、見出し付きのテーブルと、1対多などを表すカラスの足（IE 記法）の線があります。テーブルは中に行を持つコンテナなので、行を選んで複製すると列を足せます。記号の読み方は、関連記事「ER図の書き方｜記号の意味・読み方の早見表とMermaid・DDL実例」で扱っています。

シーケンス図はテキストから挿入する手もある

draw.io には、Mermaid と PlantUML の文章から図を作る機能があります。Mermaid は Arrange > Insert > Mermaid（ツールバーの「+」からも可）で、既定の「Diagram」を選ぶと draw.io の図形に変換され、あとから位置や色を手で直せます。「Image」を選ぶと1枚の SVG として入り、図形としては編集できません。Mermaid のコンテナを選んで Enter を押すとコードを直して作り直せますが、手で動かした位置と大きさは戻ります。PlantUML は Arrange > Insert > Advanced > PlantUML で、公式ドキュメントは新しい実装がブラウザの中で描画すること、PlantUML の文法の一部にだけ対応していることを書いています。

覚えておくと速いdraw.ioのショートカット

この節では、作図の手数を減らすショートカットと、全部の一覧の見方が分かります。

まず「複製してつなぐ」「グループ」「スタイルの編集」の3つを覚えると、手数が大きく減ります。macOS では Ctrl を Cmd、Alt を Option に読み替えます。

全部のショートカットは、公式が印刷用にまとめた一覧（app.diagrams.net/shortcuts.svg）と、ドキュメントの「Keyboard shortcuts」の章で確かめられます。エディタの Help（ヘルプ）メニューからも開けます。

.drawioファイルの中身（XMLの構造を実物で読む）

この節では、.drawio ファイルの XML がどんな構造で、どの値が図のどこに当たるのかが、実物で分かります。

.drawio は、図形1つ・線1本がそれぞれ1つの mxCell 要素になった XML です。公式の File Format の文書によると、構造は次の入れ子です。

次の節で Python から作るフローチャート（開始→入力チェック→OK? の分岐→保存→終了）の、先頭の12行です。

<mxfile host="python" version="1">
  <diagram id="p1" name="フローチャート">
    <mxGraphModel grid="1" gridSize="10" pageWidth="827" pageHeight="1169">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="start" value="開始" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
          <mxGeometry x="160" y="20" width="120" height="40" as="geometry" />
        </mxCell>
        <mxCell id="check" value="入力チェック" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
          <mxGeometry x="160" y="100" width="120" height="50" as="geometry" />
        </mxCell>

• 座標は左上が (0, 0) で、右へ x、下へ y が増えます。「入力チェック」は左から160、上から100の位置にある幅120・高さ50の四角です。
• style は キー=値; を並べた文字列です。rounded=1 で角丸、rhombus でひし形、ellipse で楕円、fillColor で塗りの色になります。Ctrl+E で開く「スタイルの編集」の中身はこの文字列そのものです。
• 線は source と target で図形をつなぎます。図形を動かすと線が付いてくるのは、座標ではなく id でつながっているからです。

このファイルを解析すると、mxCell は14個（根とレイヤーの2つ・図形6つ・線6本）でした。

$ python3 count.py flow.drawio
mxCell 14 / 図形 6 / 線 6
ページ名 ['フローチャート']

圧縮XMLと非圧縮XML（展開して中身を見る・差分の実測）

この節では、.drawio を開くと読めない文字列が入っている理由と、それを展開する方法、圧縮が Git の差分に与える影響が分かります。

diagram 要素の中が英数字の長い文字列になっているファイルは、圧縮して保存されたものです。公式の File Format によると、ページの XML を「URI エンコード→zlib ヘッダーなしの DEFLATE（raw DEFLATE）→Base64」の順に変換して入れています。新しく作るファイルは既定で非圧縮で、ファイルごとに File > Properties の Compressed で切り替えられます（切り替えると mxfile に compressed 属性が書かれます）。以前の版で作ったファイルや、設定を変えたファイルは圧縮されていることがあります。

圧縮と展開を Python で書く

手順を逆にたどれば、標準ライブラリだけで展開できます。zlib の第2引数 -15 が「ヘッダーなし」の指定です。

"""draw.io の圧縮形式（URI エンコード→raw DEFLATE→Base64）の変換"""
import base64, re, sys, urllib.parse, zlib
import xml.etree.ElementTree as ET

def compress(xml_text: str) -> str:
    data = urllib.parse.quote(xml_text, safe="~()*!.'").encode()
    c = zlib.compressobj(9, zlib.DEFLATED, -15)      # -15 = zlib ヘッダーなし
    return base64.b64encode(c.compress(data) + c.flush()).decode()

def decompress(b64: str) -> str:
    raw = zlib.decompress(base64.b64decode(b64), -15)
    return urllib.parse.unquote(raw.decode())

if __name__ == "__main__":
    mode, path = sys.argv[1], sys.argv[2]
    root = ET.parse(path).getroot()
    for d in root.iter("diagram"):
        if mode == "pack":
            model = d.find("mxGraphModel")
            d.text = compress(ET.tostring(model, encoding="unicode"))
            d.remove(model)
        else:
            model = ET.fromstring(decompress(d.text.strip()))
            d.text = None
            d.append(model)
    root.set("compressed", "true" if mode == "pack" else "false")
    if mode == "unpack":
        ET.indent(root)
    print(ET.tostring(root, encoding="unicode"))

前の節のフローチャートを圧縮した結果です。diagram の中身が1行の Base64 になりました。

$ python3 codec.py pack flow.drawio > flow.packed.drawio
<mxfile host="python" version="1" compressed="true">
  <diagram id="p1" name="フローチャート">5Zhbj6IwFIB/Td8p5VIeUXE22Wz2wYd9RjhcMtWaUm/767dAUQbrZJxJRnETTM6t9XA+2h5AZLo6vIh4U/ziKTBkW7koU0RmyLax+mnDovwL2mi11k2cw58ylUVrprZ/tv+AMi+kjsdeUHtIhKxQ+YcXmQrO5VV3F7Q6TIHV6XXJ6TSQPb99LO5SFbCWX5+ukrGQ7fhdzLa6UCgKUOAhOkGRi0K/FpqQSh6ZDlHTlJtKKZN9UUpYbOKk9uwVDmUr5IopDSsxKxmbcsZFM46kLtDUUfZKCv4KPQ+1l8TzlEenA0LC4epN4/fADG/6BfgKpDgqvZvR01U7tnpXxP35scCdreg9Eo62xVWr56eZP4pAxWgKN8NKCkheDbBcRBUmtxFCFChqBFF14Uawa4LaQjrL/AKo4Nt1CqmmdiPUGGiWmKB6CYVldieo2PogVfeeVPkl0t8/ETEQKvhqua1uppNlmZ0Y6aTe0nO/bcn5AzqBgY5loOPfk04V78Cw5Bw0maNg1uyPMxTQ/2E5kVEsJxDCwKvd9ajeB8NAC5MpiigKcePyUaiwhs+IkjjD424UKNepAaWPJm5NM2pgUe/ZWxMSjKE3AesS1QWYNIeFVrmQBc/5OmbR2dqHo+CHQvC9UpeMq76nq349y/u1V3/KtyKBixZXSTnIQTP1CVICWCzL3ds07lN2/Khl7zWr/bLzJ6i5bT5gcN1WtwJ1HoQCNyDoWppxQyDXIKjaDwX6wDR0vzJuGM6j7kKnbvAJt373YU/c0zvTmwe97ebGUPMm5sq3PT2+992xF/MP</diagram>
</mxfile>

展開し直すと、元と同じ14個のセル（id・ラベル・source・target）がそろいました。展開後が19バイト大きいのは、mxfile に compressed="false" を書き足したためです。

$ python3 codec.py unpack flow.packed.drawio > flow.unpacked.drawio
$ python3 count.py flow.unpacked.drawio
mxCell 14 / 図形 6 / 線 6
ページ名 ['フローチャート']
$ wc -c flow.drawio flow.packed.drawio flow.unpacked.drawio
3036 flow.drawio
 926 flow.packed.drawio
3055 flow.unpacked.drawio
7017 total
$ python3 same.py flow.drawio flow.unpacked.drawio
id・ラベル・source・target が同じ: True

Git の差分はどう変わるか

「保存」のラベルを「DBに保存」に変えただけのファイルを作り、git diff --no-index で比べました。非圧縮では、変えた1行だけが差分に出ます。

$ git diff --no-index flow.drawio flow2.drawio
diff --git a/flow.drawio b/flow2.drawio
--- a/flow.drawio
+++ b/flow2.drawio
@@ -13,7 +13,7 @@
         <mxCell id="ok" value="OK?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
           <mxGeometry x="170" y="190" width="100" height="70" as="geometry" />
         </mxCell>
-        <mxCell id="save" value="保存" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+        <mxCell id="save" value="DBに保存" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
           <mxGeometry x="160" y="300" width="120" height="50" as="geometry" />
         </mxCell>
         <mxCell id="err" value="エラー表示" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">

圧縮した2つのファイルでも差分は「1行」ですが、その1行は804文字の Base64 で、先頭の3文字より後ろは771文字が入れ替わっていました。レビューで「何が変わったか」を読めないので、Git で管理する図は非圧縮で保存します。

$ git diff --no-index --stat flow.packed.drawio flow2.packed.drawio
 flow.packed.drawio => flow2.packed.drawio | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
# 変わった1行の中身（Base64）を比べる
変更前 804 文字 / 変更後 812 文字
先頭から一致 3 文字 / それ以降で異なる文字 771

PythonでXMLを生成して図を作る

この節では、Python の標準ライブラリだけで .drawio を生成する方法と、手で描くより生成が向いている場面が分かります。

決まった形の図をたくさん作るとき、データから図を作り直したいときは、XML を生成する方が速くて間違いが減ります。公式の「diagram generation」の文書も、生成するときは圧縮しない XML にすること、id=0 と id=1 の2つのセルを必ず入れること、id を重複させないこと、value の中の HTML は < などにエスケープすることを挙げています。

"""draw.io の XML を Python 標準ライブラリだけで生成する"""
import xml.etree.ElementTree as ET
import sys

def make_page(nodes, edges, name="Page-1"):
    mxfile = ET.Element("mxfile", host="python", version="1")
    diagram = ET.SubElement(mxfile, "diagram", id="p1", name=name)
    model = ET.SubElement(diagram, "mxGraphModel", grid="1", gridSize="10",
                          pageWidth="827", pageHeight="1169")
    root = ET.SubElement(model, "root")
    ET.SubElement(root, "mxCell", id="0")
    ET.SubElement(root, "mxCell", id="1", parent="0")
    for nid, label, style, x, y, w, h in nodes:
        c = ET.SubElement(root, "mxCell", id=nid, value=label, style=style,
                          vertex="1", parent="1")
        ET.SubElement(c, "mxGeometry", x=str(x), y=str(y), width=str(w),
                      height=str(h)).set("as", "geometry")
    for i, (src, dst, label) in enumerate(edges):
        c = ET.SubElement(root, "mxCell", id=f"e{i}", value=label,
                          style="edgeStyle=orthogonalEdgeStyle;html=1;endArrow=block;",
                          edge="1", parent="1", source=src, target=dst)
        ET.SubElement(c, "mxGeometry", relative="1").set("as", "geometry")
    ET.indent(mxfile)
    return ET.tostring(mxfile, encoding="unicode")

BOX = "rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;"
DIA = "rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;"
END = "ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;"

flow_nodes = [
    ("start", "開始", END, 160, 20, 120, 40),
    ("check", "入力チェック", BOX, 160, 100, 120, 50),
    ("ok", "OK?", DIA, 170, 190, 100, 70),
    ("save", "保存", BOX, 160, 300, 120, 50),
    ("err", "エラー表示", BOX, 340, 200, 120, 50),
    ("end", "終了", END, 160, 390, 120, 40),
]
flow_edges = [("start", "check", ""), ("check", "ok", ""), ("ok", "save", "はい"),
              ("ok", "err", "いいえ"), ("err", "check", ""), ("save", "end", "")]

if __name__ == "__main__":
    kind = sys.argv[1] if len(sys.argv) > 1 else "flow"
    if kind == "flow":
        print(make_page(flow_nodes, flow_edges, "フローチャート"))
    else:
        # 構成図：サーバー台数を引数で変えられる
        n = int(sys.argv[2]) if len(sys.argv) > 2 else 3
        nodes = [("user", "利用者", END, 20, 120, 100, 40),
                 ("lb", "ロードバランサー", BOX, 170, 115, 130, 50),
                 ("db", "DB", "shape=cylinder3;whiteSpace=wrap;html=1;size=10;", 560, 110, 80, 60)]
        edges = [("user", "lb", "HTTPS")]
        for i in range(n):
            nid = f"app{i+1}"
            nodes.append((nid, f"App {i+1}", BOX, 360, 20 + i * 80, 120, 50))
            edges += [("lb", nid, ""), (nid, "db", "")]
        print(make_page(nodes, edges, "構成図"))

実行すると、そのまま draw.io で開ける .drawio ができます。構成図は、App サーバーの台数を引数で変えるだけで線の数まで変わります。

$ python3 gen.py flow > flow.drawio
$ python3 gen.py arch 3 > arch.drawio
$ python3 gen.py arch 10 > arch10.drawio
$ python3 count.py flow.drawio
mxCell 14 / 図形 6 / 線 6
ページ名 ['フローチャート']
$ python3 count.py arch.drawio
mxCell 15 / 図形 6 / 線 7
ページ名 ['構成図']
$ python3 count.py arch10.drawio
mxCell 36 / 図形 13 / 線 21
ページ名 ['構成図']
$ wc -c arch.drawio arch10.drawio
 3190 arch.drawio
 7839 arch10.drawio

• ElementTree で組み立てると、ラベルの「&」「<」は自動でエスケープされます。文字列をつなげて XML を作ると、「R&D部」のようなラベルで壊れます（よくあるエラーの節に原文があります）。
• 線の経路は書かなくても描けます。edgeStyle=orthogonalEdgeStyle にしておくと、draw.io が開いたときに直角に曲がる線を引きます。
• 位置の自動計算までしたいときは、生成後に draw.io の自動配置を使います。Arrange > Layout に縦・横の木構造などの配置があり、デスクトップ版の CLI にも書き出し前に配置を走らせる --layout があります。

CSV・Mermaid から作る方法もある

draw.io 自身にも、CSV やMermaid の文章から図を作る入口があります（Arrange > Insert）。表の行がそのまま図形になるような単純な図なら CSV の取り込み、関係だけを書いて配置は任せたいなら Mermaid の挿入、見た目まで決めた図を繰り返し作るなら上のように XML を生成、と使い分けます。生成 AI に図を描かせるときも、公式は圧縮しない XML を出させるよう勧めています。Mermaid のコードを生成 AI に作らせるやり方は、関連記事「Mermaid記法一覧｜全図種のコピペ用コードと描画結果まとめ」の記法と合わせて使えます。

エクスポートと編集できる画像（.drawio.png・.drawio.svg）

この節では、draw.io から書き出せる形式と、「画像なのに draw.io で開き直せる」ファイルの仕組みが分かります。

.drawio.png と .drawio.svg は、見た目は普通の画像で、中に図のデータ（mxfile の XML）が入っているファイルです。Markdown や Wiki に画像として貼りつつ、元の図を別に持たずに済みます。

エディタからは File > Export as で形式を選び、PNG・SVG・PDF では図のコピーを含めるチェック（英語表示では「Include a copy of my diagram」）を入れると、図のデータが埋め込まれます。

埋め込みの仕組みを実物で確かめる

公式の File Format によると、PNG では tEXt チャンク（PNG の中のテキスト用の区画）にキーワード mxfile で、SVG ではルートの svg 要素の content 属性に XML をエスケープして入れます。この構造どおりに、前の節のフローチャートを簡単な描画で PNG と SVG にし、図のデータを埋め込みました（描画は draw.io 本体ではなく、Pillow で四角と線を描いた簡易版です）。PNG のチャンクを並べると、画像の本体（IDAT）の後ろに 5,437 バイトの tEXt が入っています。

$ python3 -c "...png_chunks(\"flow.drawio.png\")"   # チャンクの種類と長さ
IHDR      13 バイト
IDAT    8936 バイト
tEXt    5437 バイト
IEND       0 バイト

PNG の tEXt は Latin-1 の文字しか入れられないため、日本語のラベルを含む XML は URI エンコードしてから入れます。取り出す側は、tEXt を探して mxfile のキーワードを確かめ、デコードします。

"""PNG / SVG に draw.io の図データが入っているか確かめて取り出す"""
import html, re, struct, sys, urllib.parse
import xml.etree.ElementTree as ET

def from_png(path):
    data = open(path, "rb").read(); pos = 8
    while pos < len(data):
        n, = struct.unpack(">I", data[pos:pos + 4]); typ = data[pos + 4:pos + 8]
        body = data[pos + 8:pos + 8 + n]; pos += 12 + n
        if typ == b"tEXt" and body.startswith(b"mxfile\x00"):
            return urllib.parse.unquote(body[7:].decode("latin-1"))
    return None

def from_svg(path):
    root = ET.parse(path).getroot()
    c = root.get("content")
    return c if c and c.lstrip().startswith("<mxfile") else None

for p in sys.argv[1:]:
    x = from_png(p) if p.endswith(".png") else from_svg(p)
    if x is None:
        print(f"{p}: 図データなし（画像として開くだけ）")
    else:
        n = len(re.findall(r"<mxCell ", x))
        print(f"{p}: 図データあり mxCell {n} 個 / 先頭 {x[:40]!r}")

$ python3 embed.py flow.drawio      # flow.drawio.svg と flow.drawio.png を作る
$ python3 extract.py flow.drawio.png flow.drawio.svg plain.png
flow.drawio.png: 図データあり mxCell 14 個 / 先頭 '<mxfile host="python" version="1">\n  <di'
flow.drawio.svg: 図データあり mxCell 14 個 / 先頭 '<mxfile host="python" version="1">   <di'
plain.png: 図データなし（画像として開くだけ）

普通の PNG・SVG には図のデータが無いので、draw.io で開いても画像1枚として貼られるだけです。受け取った画像が編集できるかは、このように中身で判断できます。ファイル名を .drawio.png にしても、データが入っていなければ編集はできません。

デスクトップ版のCLIで一括エクスポート（drawio --export）

この節では、draw.io Desktop のコマンドラインで PNG・SVG・PDF を書き出す方法と、主なオプションが分かります。

デスクトップ版は、画面を開かずにコマンドで書き出せます。リポジトリの .drawio を CI でまとめて画像にする、といった使い方ができます。以下は公式 Wiki「Desktop App」の範囲で、この環境では配布ファイルを取得できず実行していません。コマンド名は Linux のパッケージでは drawio、Windows は draw.io.exe、macOS は draw.io.app の中の実行ファイルです。

# 1ページ目を PNG に（形式は出力の拡張子から決まる）
drawio -x -o diagram.png diagram.drawio

# 全ページを1つの PDF に。ページを図の大きさに切り詰める
drawio -x -f pdf -a --crop -o handbook.pdf handbook.drawio

# docs/ の下の図を全部 SVG に（画像も埋め込む）。出力先のフォルダーは先に作る
mkdir -p exported && drawio -x -r -f svg --embed-svg-images -o exported docs

# 2ページ目を2倍・透明背景・余白10px・図のデータ入りの PNG に
drawio -x -f png -p 2 -s 2 -t -b 10 -e diagram.drawio

• 画像形式で全ページは書き出せません。公式の説明では -a は PDF と HTML 向けで、PNG・SVG は -p でページを指定します。ページごとに画像が欲しいときは、ページ番号を変えて複数回実行します。
• サーバーや CI で動かすときは画面の有無に注意します。デスクトップ版は Electron のアプリで、公式 Wiki は書き出しが隠れたウィンドウで描画されると説明しています。画面の無い Linux では仮想ディスプレイ（xvfb など）を用意するのが一般的ですが、公式 Wiki には手順の記載が無いため、使う環境で動作を確かめてから組み込みます。

Gitで管理するときの形式の選び方（.drawio・.drawio.svg・.drawio.png）

この節では、設計書のリポジトリに draw.io の図を置くとき、どの形式で保存すればよいかが分かります。

迷ったら非圧縮の .drawio.svg が扱いやすい形式です。GitHub や GitLab の Markdown にそのまま画像として表示でき、VS Code 拡張や draw.io でそのまま開き直せ、中身がテキストなので差分も追えます。

• 1Compressed を外してから commit するFile > Properties。CLI で作るなら -u を付ける
• 2画像として貼るなら .drawio.svg にする元の .drawio と書き出した画像の二重管理をなくせる
• 3暗い表示のテーマで見え方を確かめる背景が透明だと黒い文字が読めなくなる。VS Code 拡張は svgAppearance で色の扱いを選べる
• 4外部 URL の画像を図に入れない開くたびに外へ取りに行く。画像は埋め込むか、図形集のアイコンを使う
• 5同じ図を2人で同時に直さないXML の衝突は手で直しにくい。ページを分けるか、順番を決める

Mermaid・PlantUML・Excalidrawとの比較（同じ図を書いた量）

この節では、似た目的のツールと draw.io の違いを、同じ図を書いた分量の実測と判断表で比べます。

同じフローチャート（6つの図形・6本の線）を4つの形式で書いて、大きさを比べました。Mermaid・PlantUML は手で書いたコード、draw.io と Excalidraw は Python で生成したファイルです（Excalidraw は図形と文字と矢印に必要な項目だけを入れた最小の形）。

flowchart TD
  start([開始]) --> check[入力チェック]
  check --> ok{OK?}
  ok -- はい --> save[保存]
  ok -- いいえ --> err[エラー表示]
  err --> check
  save --> fin([終了])

Mermaid は mermaid-cli で約1.6秒で描画でき、できた SVG は 104,540 バイト、幅約299px でした。コードの量は Mermaid・PlantUML が draw.io の約15分の1ですが、その代わり位置や線の曲がり方は描画側に任せることになります。draw.io の XML が長いのは、手で決めた位置と見た目を全部持っているからです。

どれを選ぶかの判断表

Excalidraw の使い方は関連記事「Excalidrawとは・使い方｜ショートカット・書き出し・料金を実例で解説」で扱っています。

draw.ioのよくあるエラー・つまずき

この節では、draw.io の図を扱うときに出やすいエラーの原文と、つまずきの直し方が分かります。

Python で .drawio を扱ったときに出たエラーの原文です。

# 1) zlib のヘッダー付きのつもりで展開した
>>> zlib.decompress(base64.b64decode(b64))
zlib.error: Error -3 while decompressing data: unknown compression method

# 2) 展開はできたが URI エンコードを戻していない
>>> zlib.decompress(base64.b64decode(b64), -15).decode()[:60]
'%3CmxGraphModel%20grid%3D%221%22%20gridSize%3D%2210%22%20pag'

# 3) 文字列をつなげて XML を作り、ラベルの & をエスケープしなかった
>>> ET.fromstring('<mxCell id="a" value="R&D部"/>')
xml.etree.ElementTree.ParseError: not well-formed (invalid token): line 1, column 26

# 4) PNG の tEXt チャンクに日本語をそのまま入れようとした
>>> ("mxfile\x00" + "開始").encode("latin-1")
UnicodeEncodeError: 'latin-1' codec can't encode characters in position 7-8: ordinal not in range(256)

• 生成した XML を開いても何も表示されないときは、id=0 と id=1 のセルと、図形の parent="1" を確かめます。公式は2つの構造用のセルを必ず入れるよう書いています。
• ひし形や楕円の線の付き方がずれるときは、style に perimeter を足します。公式の生成ガイドは、四角以外の図形には perimeter=ellipsePerimeter のような対応する値を付けるよう書いています。

よくある質問

Q. draw.io は本当に無料ですか。商用で使えますか。

A. Web版（app.diagrams.net）とデスクトップ版は無料で、会員登録も要りません。ソースは Apache License 2.0（デスクトップ版は GPL-3.0）で公開されています。図形集やテンプレートには別の条件があると README にあるため、社外に出す資料で気になる場合は README の該当箇所を確かめます。Confluence・Jira 向けの連携アプリは提供の形が別なので、導入するときは提供元の案内で条件を確かめます。

Q. draw.io と diagrams.net は違うものですか。

A. 同じものです。JGraph 社のツールの名前が draw.io で、Web版のエディタの URL が app.diagrams.net です。公式サイトは drawio.com です。

Q. 描いた図は draw.io のサーバーに保存されますか。

A. 公式の機能紹介では、draw.io のアプリと連携は図のデータを保存しないと説明しています。保存先は自分で選んだ端末やクラウド（Google ドライブ・OneDrive など）です。社外に出せない図は、デスクトップ版か VS Code 拡張で手元に保存すると扱いやすくなります。

Q. Visio のファイルは開けますか。

A. draw.io には File > Import から他のツールの図を取り込む機能があり、Visio の .vsdx も対象です。ただし図形やスタイルが完全に同じになるとは限らないため、取り込んだあとに見た目を確かめます。

Q. VS Code で .drawio を開くと XML が表示されます。

A. 拡張「Draw.io Integration」が入っていないか、別のエディタで開かれています。拡張を入れたうえで、ファイルを右クリックして「Reopen Editor With…（エディターを再度開く）」から draw.io のエディタを選びます。

Q. .drawio と .xml の違いは何ですか。

A. 中身はどちらも同じ mxfile の XML です。公式の説明では既定の保存形式が .drawio で、Export as の XML を選ぶと .xml として保存でき、そのとき Compressed のチェックで圧縮するかを選べます。

Q. 日本語の表示にするには。

A. 画面の言語メニューから日本語を選び、ページを読み込み直します。メニューの名前は版で変わることがあるため、見つからないときは公式ドキュメントの英語の名前で探します。

Q. 複数人で同時に編集できますか。

A. 公式の機能紹介では、Google ドライブ・OneDrive に保存した図や Confluence の draw.io では、複数人の変更がリアルタイムに同期されます。VS Code 拡張では Live Share を使います。Git で管理している図は同時に編集すると衝突を直しにくいため、ページを分けるか順番を決めます。

Q. 生成 AI に draw.io の図を作らせられますか。

A. できます。公式の「diagram generation」の文書は、AI に図を作らせるときは圧縮しない XML（mxGraphModel だけでもよい）を出させ、id=0・id=1 のセルを入れ、XML のコメントを入れないよう勧めています。出てきた XML は、この記事のように Python で解析して、セルの数や id の重複を確かめてから開くと安全です。

まとめ

• draw.io（diagrams.net）は無料の作図ツールで、Web版・デスクトップ版・VS Code 拡張のどれでも同じ図を扱えます。まず試すなら Web版、社外秘はデスクトップ版、リポジトリ管理は VS Code 拡張です。
• 使い方の要点は「保存先」「最初の名前付け」「青い矢印でつなぐ」の3つで、Alt+Shift+矢印キーの「複製してつなぐ」を覚えると速くなります。
• .drawio の中身は mxCell を並べた XML で、圧縮されたものは URI エンコード→raw DEFLATE→Base64 を逆にたどれば読めます。ラベル1つの変更で圧縮後の804文字中771文字が変わったため、Git では非圧縮にします。
• Python の標準ライブラリだけで .drawio を生成でき、台数などのデータから図を作り直す用途に向きます。.drawio.png・.drawio.svg は画像の中に図のデータを入れたもので、中身で編集できるかを判断できます。
• コードで管理したい流れ図は Mermaid、配置やアイコンにこだわる構成図は draw.ioと使い分け、必要なら Mermaid を draw.io に挿入して手で仕上げます。

参考・出典

確認日はいずれも 2026年10月29日です。

• draw.io「An overview of draw.io's features」：https://www.drawio.com/docs/features/
• draw.io「Export, embed, publish and print diagrams」：https://www.drawio.com/docs/manual/export/
• draw.io「Export a diagram to XML」：https://www.drawio.com/doc/faq/export-to-xml
• draw.io「Diagram generation」：https://www.drawio.com/docs/reference/diagram-generation/
• draw.io「AWS diagrams」：https://www.drawio.com/docs/diagram-types/aws-diagrams/
• draw.io「Use Mermaid syntax to create diagrams」：https://www.drawio.com/blog/mermaid-diagrams
• draw.io「Insert a PlantUML diagram」：https://www.drawio.com/docs/manual/insert/insert_plantuml/
• draw.io「Clone and connect shapes」：https://www.drawio.com/docs/reference/shortcuts/shortcut-clone-connect/
• draw.io「Group shapes and connectors」：https://www.drawio.com/docs/manual/editor/group-shapes-connectors/
• GitHub jgraph/drawio（README・ライセンス）：https://github.com/jgraph/drawio
• GitHub jgraph/drawio Wiki「File Format」：https://github.com/jgraph/drawio/wiki/File-Format
• GitHub jgraph/drawio Wiki「Desktop App」：https://github.com/jgraph/drawio/wiki/Desktop-App
• GitHub jgraph/drawio-desktop（README・Releases）：https://github.com/jgraph/drawio-desktop
• Visual Studio Marketplace「Draw.io Integration」：https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
• gihyo.jp「VS Code拡張機能『Draw.io Integration』、Markdownのプレビュー上で図をインライン編集する機能」：https://gihyo.jp/article/2026/07/vscode-drawio-extension-inline-editing
• W3C「Portable Network Graphics (PNG) Specification」tEXt チャンク：https://www.w3.org/TR/png-3/

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。