Excalidrawとは・使い方｜ショートカット・書き出し・料金を実例で解説

Excalidraw は、描いた図を JSON のファイル（.excalidraw）として持ち、画像（PNG・SVG）への書き出しや、暗号化した共有リンクでの共同編集ができます。

flowchart TD
    A[excalidraw.com<br>VS Code・Obsidian] --> B[図形・矢印・文字を<br>手書き風に描く]
    B --> C[.excalidraw<br>JSON で保存]
    B --> D[PNG・SVG に書き出し<br>図の埋め込みも可]
    C --> E[暗号化して共有・共同編集<br>鍵は URL の # の後ろ]

急いでいる人向けに、よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.4 LTS・Node.js 22.22.2・npm 10.9.7。create-vite で作った React＋TypeScript のプロジェクト（Vite 8.3.5・React 19.3.1・TypeScript 6.0.3）に @excalidraw/excalidraw 0.18.1 と @excalidraw/mermaid-to-excalidraw 2.3.0 を入れて npm run build・vite preview で動かし、Chromium 141.0.7390.37（Playwright 1.56.0 から操作、表示言語は日本語）で、ツールバー・ヘルプのショートカット一覧・書き出し画面の文言、書き出した PNG・SVG・.excalidraw の中身、Mermaid の変換を確かめました。Mermaid 本体は npm が入れた 11.17.2 と、版を指定した 11.12.1 の両方で試しました。excalidraw.com だけにある機能（共有リンク・共同編集・保存先）は GitHub の excalidraw/excalidraw のソース（コミット 1d4dc2c、2026年10月21日）で読み、暗号の鍵の作り方は同じ手順を Node.js の Web Crypto で実行して確かめました。Excalidraw+ の料金は公式の料金ページ、VS Code 拡張は Visual Studio Marketplace、Obsidian プラグインは GitHub の manifest.json（2.29.0）と README、ライブラリの件数は excalidraw-libraries の libraries.json で確認しました（確認日 2026年10月23日）。

Excalidrawとは（できること・無料か）

この節では、Excalidraw が何をする道具で、お金がかかるのかが分かります。

Excalidraw は、無限に広がるキャンバスに、四角・ひし形・円・矢印・線・文字を手書きのような線で描けるホワイトボードです。 ソースコードは GitHub の excalidraw/excalidraw で MIT ライセンスで公開されていて、2026年10月23日時点のスターは約13.4万です。設計の打ち合わせのラフな構成図、説明用の図解、画面の下書き（ワイヤーフレーム）によく使われます。

GitHub の README は、エディタの機能として「無料・オープンソース」「無限のキャンバス」「手書き風」「ダークモード」「画像」「図形のライブラリ」「多言語」「PNG・SVG・クリップボードへの書き出し」「.excalidraw の JSON ファイル」「矢印の接続（図形に吸い付く矢印）とラベル付きの矢印」「元に戻す・やり直し」「拡大・移動」を挙げ、excalidraw.com だけの機能として「PWA（オフラインで動く）」「リアルタイムの共同編集」「エンドツーエンド暗号化」「ブラウザへの自動保存」「共有リンク」を挙げています。

無料版と有料版（Excalidraw+）

料金と機能の差は「Excalidraw+の料金」の節に、自分のアプリへの埋め込みは「Reactに埋め込む」の節に載せます。

Excalidrawの始め方（日本語にする・インストールは要るか）

この節では、使い始めるまでの手順と、画面を日本語にする方法が分かります。

ブラウザで https://excalidraw.com/ を開けば、その場で描き始められます。 アカウントの登録もインストールも要りません。README のとおり PWA（ブラウザからアプリのように入れられる Web アプリ）にも対応していて、Chrome などで「インストール」するとオフラインでも開けます。

excalidraw.com のメニューの並び（ソースの AppMainMenu.tsx）は、開く・保存・書き出し・画像として保存・共同編集・コマンドパレット・検索・ヘルプ・キャンバスのリセット・Excalidraw+・設定・テーマ・言語・キャンバスの背景色です。

日本語の文字も手書き風の書体で表示されます。 手書き風の英字の書体（Excalifont）に無い文字は、中国・日本の漢字と仮名を持つ Xiaolai という書体で描かれます。書き出した SVG の文字は font-family="Excalifont, Xiaolai, Segoe UI Emoji" で、使った文字だけを切り出した Xiaolai と Excalifont のフォントが SVG の中に埋め込まれていました。

Excalidrawの使い方（手書き風の図を作る）

この節では、四角と矢印と文字で「ブラウザ → API サーバー」のような図を作る手順と、見た目を変える設定が分かります。

図形と矢印をつなぐ

手元で、R を押して 700,400 から 850,480 へ、O を押して 900,400 から 1000,480 へマウスをドラッグすると、rectangle(150x80) と ellipse(100x80) が1つずつ増え、描いた後のツールは selection（選択）に戻っていました。

矢印の吸い付き（バインド）は、図を作り直すときに効きます。 四角を右へ40px 動かすと、矢印の始点・長さと、四角の中の文字も一緒に変わりました（「.excalidraw ファイルの中身」の節に差分を載せます）。吸い付かせたくないときは、Ctrl を押しながら矢印を描きます（ヘルプの「矢印を結合しない」）。

ツールバーの道具（日本語表示）

0.18.1 のエディタを日本語で開いたときの、ツールバーの道具と割り当てられたキーです（ボタンの title 属性の実物）。

「その他のツール」（ツールバー右端）には、フレームツール・Web 埋め込み・レーザーポインター・Mermaid to Excalidraw が入っていました。

見た目を変える（線の揺れ・フォント）

図形を選ぶと、左に操作パネルが出ます。0.18.1 の日本語表示で出た項目は「線」「背景」「線の太さ」「線の種類」「ばらつき加減」「角」「フォントの種類」「フォントの大きさ」「文字の配置」「透明度」「レイヤー」「操作」でした。

手書き風をやめたいときは、ばらつき加減を「正確」にし、フォントを「Normal」にします。 線の揺れが消え、整った図になります。フォントのボタンを押して、保存される番号（fontFamily）を読むと、Hand-drawn は 5（Excalifont）、Normal は 6（Nunito）、Code は 8（Comic Shanns）でした。フォントの一覧にはほかに Lilita One もありました。

Excalidrawのショートカットキー早見表

この節では、よく使う操作のキーを引けます。エディタのヘルプ画面（? キーで開く）の日本語表示を、そのまま表にしました。

Mac では Ctrl を Cmd、Alt を Option に読み替えます。 エディタのコードは、Mac のときに表示の CtrlOrCmd を Cmd に、Alt を Option に置き換えています。

道具の切り替え（R・O・A など）は、ツールバーの表のとおりです。ヘルプ画面には、このほか「深い選択（Ctrl＋クリック）」「キャンバスから色を選ぶ（I、または Shift＋S・Shift＋G）」「ページを上下に移動（PgUp・PgDn）」も載っていました。

フローチャートを速く描くなら Ctrl＋矢印キーが便利です。 四角を選ぶと画面上に「Hold Ctrl and Arrow key to create a flowchart」と出ます。手元で四角を選んで Ctrl+→ を2回押すと、右に四角2つと矢印2本が増え、図形は6個から10個になりました。

Excalidrawのライブラリの使い方（AWSアイコンなど）

この節では、AWS のアイコンなどの部品を取り込んで使う方法と、自分の部品を保存したファイルの形が分かります。

ライブラリは、よく使う図形の組み合わせを保存しておく部品箱です。 画面右上の「ライブラリ」を開くと、「個人ライブラリ」と「Excalidrawライブラリ」の2つの欄と、下に「ライブラリを参照する」のボタンが出ます。図形を選んだ状態で個人ライブラリの「＋」を押すと、自分の部品として保存できます。

公開されているライブラリは、「ライブラリを参照する」で開く libraries.excalidraw.com に集められていて、各ライブラリの「Add to Excalidraw」で今開いている Excalidraw に取り込めます。サイトは、掲載されているライブラリはすべて MIT ライセンスと書いています。一覧の元データ（GitHub の excalidraw-libraries の libraries.json、2026年9月3日の更新）を数えた結果です。

クラウドの構成図をきれいな記号で描く書き方は、関連記事「ネットワーク構成図の書き方｜記号・レイヤー別の書き分けとAWS構成の例」で扱っています。

ライブラリのファイル（.excalidrawlib）

ライブラリは .excalidrawlib というファイルで受け渡します。中身は JSON で、serializeLibraryAsJSON で作った実物の先頭はこうでした。

{
  "type": "excalidrawlib",
  "version": 2,
  "source": "http://127.0.0.1:36201",
  "libraryItems": [
    {
      "id": "item1",
      "status": "unpublished",
      "elements": [
        { "id": "w9gHr8vvfoo-7vOwH6ufS", "type": "rectangle", "x": 88.234375 }
      ]
    }
  ]
}

（elements の中は、次の .excalidraw と同じ形の図形です。長いので省略しました。）excalidraw.com では、ライブラリはブラウザの IndexedDB（excalidraw-library）に入ります。ほかのパソコンでも使うなら、ライブラリのメニューから .excalidrawlib に書き出して持っていきます。

Excalidrawの共同編集と共有リンク（暗号化の仕組み）

この節では、人と一緒に描く方法と、送ったリンクの中身がサーバーから読めない理由が分かります。

excalidraw.com には、同時に編集する「共同編集」と、読み取り専用の「共有リンク」の2つがあります。 どちらも、図は送る前にブラウザで暗号化され、復号の鍵は URL の # の後ろに入ります。

共同編集は、画面右上の「共有」から始め、出てきたリンクを相手に送ります。ソースの getCollaborationLink は #room=${roomId},${roomKey} の形で URL を作り、getCollaborationLinkData は鍵が22文字でないと「invalidEncryptionKey」の警告を出します。共有リンクは書き出しの画面の「共有可能なリンク」→「リンクとしてエクスポート」で作ります。

flowchart TD
    A[ブラウザ A<br>鍵を作り図を暗号化] --> B[サーバー<br>暗号文だけを預かる]
    A --> C[URL の # の後ろに鍵<br>サーバーへは送られない]
    B --> D[ブラウザ B<br>暗号文を受け取る]
    C --> D
    D --> E[鍵で復号して表示]

# の後ろ（フラグメント）は、ブラウザがサーバーに送らない部分です。 公式ブログ（End-to-End Encryption in the Browser）は、この性質を使って鍵を URL に入れていると説明しています。共有リンクのソースのコメントも「サーバーに送らないため、鍵をクエリパラメーターではなくハッシュに入れる」と書いています。

鍵の作り方（generateEncryptionKey）は、Web Crypto で AES-GCM の128ビットの鍵を作り、JWK 形式の k の値を取り出すものです。同じ手順を Node.js 22 で実行した結果です。

const key = await crypto.subtle.generateKey({ name: 'AES-GCM', length: 128 }, true, ['encrypt', 'decrypt'])
const k = (await crypto.subtle.exportKey('jwk', key)).k
const iv = crypto.getRandomValues(new Uint8Array(12))
const data = new TextEncoder().encode(JSON.stringify({ type: 'excalidraw', elements: [] }))
const enc = new Uint8Array(await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data))

key: HR6LwlR7h3iSrlmmdtQnKQ length: 22
plain bytes: 35 encrypted bytes: 51 head: 2e9500ded31a1b12d9606a23

鍵は22文字（128ビットを URL で使える Base64 にした長さ）で、35バイトの JSON は51バイトの読めないデータになりました（AES-GCM の確認用の16バイトが付くため）。

• 1リンクを知っている人は誰でも開ける鍵が URL に入っているので、URL そのものが合言葉。社外秘の図を送る経路に注意する
• 2共有の前に手元へ保存したか共同編集を止めると、ブラウザに保存していた図が上書きされると画面が警告する
• 3画像が大きすぎないか共有リンクで送る画像は1ファイル 4MiB まで（ソースの FILE_UPLOAD_MAX_BYTES）
• 4権限で分けたいか閲覧だけ・編集可の切り分けや、読み取り専用の埋め込みは Excalidraw+ の機能

Excalidrawの保存と書き出し（PNG・SVG・.excalidraw）

この節では、描いた図がどこに保存され、どの形式で書き出すと後から編集し直せるのかが、書き出したファイルの実物で分かります。

描いた図はどこに保存されるか

保存先のキーの名前は、excalidraw.com のソース（app_constants.ts の STORAGE_KEYS）の値です。大事な図は、自動保存だけに頼らず .excalidraw か「シーンを埋め込んだ」PNG・SVG に残しておくと、別のパソコンやブラウザでも開き直せます。

書き出しの画面

メニューの「画像のエクスポート...」（Ctrl+Shift+E）で開く画面の項目です（0.18.1 の日本語表示。英語のままだった項目は括弧に最新のソースの訳を書きました）。

同じ図を各形式で書き出した大きさ

「ブラウザ → API サーバー」の図（四角2・矢印1・文字3の6つの要素）を、エディタの書き出しの関数（exportToSvg・exportToBlob・serializeAsJSON）で書き出した大きさです。

シーンを埋め込むと、PNG は 1,812 バイト、SVG は 2,481 バイト増えました。 その代わり、Excalidraw で開き直すと元の図に戻ります。書き出した画像を loadFromBlob で読み直した結果です。

roundtrip from embedded png: 6 from embedded svg: 6 plain png: Image doesn't contain scene

シーンを埋め込んだ PNG と SVG からは6つの要素がそのまま戻り、埋め込んでいない PNG は「Image doesn't contain scene」で読めませんでした。

埋め込まれたデータの正体

PNG の中を、チャンク（PNG を区切る単位）ごとに読んだ結果です。

pngE.png 15168 580 100 [('IHDR', 13), ('IDAT', 4096), ('IDAT', 4096), ('IDAT', 4096), ('IDAT', 957), ('IDAT', 6), ('tEXt', 1800, b'application/vnd.excalidraw+json'), ('IEND', 0)]

tEXt チャンクのキーワードが application/vnd.excalidraw+json で、値は {"version":"1","encoding":"bstring","compressed":true,"encoded":"…"} でした。encoded を zlib で展開すると 5,978 バイトの JSON になり、中身は .excalidraw と同じ type: excalidraw・6要素でした。

import json, zlib
d = open('pngE.png', 'rb').read()
i = d.find(b'tEXt'); n = int.from_bytes(d[i-4:i], 'big')
key, val = d[i+4:i+4+n].split(b'\0', 1)
o = json.loads(val.decode('latin1'))
scene = json.loads(zlib.decompress(o['encoded'].encode('latin1')))
print(key, scene['type'], len(scene['elements']))

b'application/vnd.excalidraw+json' excalidraw 6

SVG では、<svg> の先頭に <!-- svg-source:excalidraw -->、<metadata> の中に <!-- payload-type:application/vnd.excalidraw+json -->・<!-- payload-version:2 -->・<!-- payload-start --> が入り、その後ろに2,360文字の Base64 の文字列が続いていました。図のデータは暗号化されていないので、埋め込んだ画像を渡すと、相手は図の中の文字をすべて取り出せます。

.excalidrawファイル（JSON）の中身

この節では、.excalidraw のファイルに何が書かれていて、Git で管理したときにどんな差分になるかが、実物で分かります。

.excalidraw は、type・version・source・elements・appState・files の6つのキーを持つ JSON です。 公式ドキュメントの JSON Schema のページの説明と、手元で serializeAsJSON で書き出した実物を並べます。

appState は {"gridSize": 20, "gridStep": 5, "gridModeEnabled": false, "viewBackgroundColor": "#ffffff"} で、選択中の図形や拡大率などは入っていませんでした（serializeAsJSON の4つ目の引数が "local" のとき）。

図形1つの中身（四角と、その中の文字）

{
  "id": "_KQP4OBDUCc7yje_b1ETl",
  "type": "rectangle",
  "x": 100,
  "y": 100,
  "width": 180,
  "height": 80,
  "angle": 0,
  "strokeColor": "#1e1e1e",
  "backgroundColor": "transparent",
  "fillStyle": "solid",
  "strokeWidth": 2,
  "strokeStyle": "solid",
  "roughness": 1,
  "opacity": 100,
  "groupIds": [],
  "frameId": null,
  "index": "a0",
  "roundness": null,
  "seed": 1828861440,
  "version": 3,
  "versionNonce": 960276992,
  "isDeleted": false,
  "boundElements": [
    { "type": "text", "id": "0md1Kc_xniGs3Z5VWQXXM" },
    { "id": "un2Vfc1-f4H0CiLz3W_Zf", "type": "arrow" }
  ],
  "updated": 1792739994154,
  "link": null,
  "locked": false
}

{
  "id": "0md1Kc_xniGs3Z5VWQXXM",
  "type": "text",
  "x": 149.0625,
  "y": 127.5,
  "width": 81.875,
  "height": 25,
  "text": "ブラウザ",
  "fontSize": 20,
  "fontFamily": 5,
  "textAlign": "center",
  "verticalAlign": "middle",
  "containerId": "_KQP4OBDUCc7yje_b1ETl",
  "originalText": "ブラウザ",
  "autoResize": true,
  "lineHeight": 1.25
}

（文字のほうは、四角と共通の項目を省きました。）

矢印は points（始点からの相対座標の配列。手元では [[0,0],[189,0]]）と、startBinding・endBinding（{"elementId": "…", "focus": 0, "gap": 5}）を持っていました。

四角を1つ動かしたときの差分

画面で四角を右へ40px ドラッグする前と後の .excalidraw を diff で比べると、変わった行は18行でした（抜粋）。

       "type": "rectangle",
-      "x": 100,
+      "x": 140,
@@
-      "version": 3,
-      "versionNonce": 282622733,
+      "version": 7,
+      "versionNonce": 1900584621,
@@
       "type": "arrow",
-      "x": 285.5,
+      "x": 325,
@@
-      "width": 189,
+      "width": 150,
@@
       "type": "text",
-      "x": 149.0625,
+      "x": 189.0625,

1つの図形を動かしても、吸い付いた矢印と中の文字の座標、version・versionNonce・updated も変わります。 差分は読めますが、同じファイルを2人が別々に直すと、Git のマージで衝突しやすくなります。同時に直すなら、共同編集のリンクを使うほうが向いています。

MermaidからExcalidrawに変換する

この節では、Mermaid の記法で書いた図を、手で動かせる Excalidraw の図形に変える方法と、図の種類ごとの結果が分かります。

エディタの「その他のツール」→「Mermaid to Excalidraw」に Mermaid のコードを貼ると、図形に変換して挿入できます。 中で使われているのは @excalidraw/mermaid-to-excalidraw というライブラリで、自分のプログラムからも呼べます。

import { parseMermaidToExcalidraw } from '@excalidraw/mermaid-to-excalidraw'
import { convertToExcalidrawElements } from '@excalidraw/excalidraw'

const src = `flowchart TD
  A[注文を受ける] --> B{在庫はある?}
  B -->|はい| C[発送する]
  B -->|いいえ| D[入荷を待つ]`

const { elements, files } = await parseMermaidToExcalidraw(src, { themeVariables: { fontSize: '16px' } })
// 返るのは「骨組み（skeleton）」なので、本物の図形に変換してから置く
excalidrawAPI.updateScene({ elements: convertToExcalidrawElements(elements) })

このフローチャートは、四角3・ひし形1・矢印3・文字6の図形になり、「はい」「いいえ」も矢印のラベルとして残りました。ひし形の中の「在庫はある?」は、手元では「在庫は／ある?」の2行に折り返されました。

図の種類ごとの結果（Mermaid の版で変わった）

5種類の図を、mermaid-to-excalidraw 2.3.0 で変換した結果です。npm が入れた Mermaid 11.17.2 のままだと、クラス図・ER 図・状態遷移図は1枚の画像になりました。Mermaid を 11.12.1 にすると、図形に変換されました。

11.17.2 のとき、ブラウザのコンソールには次のエラーが出ていました。変換の処理が失敗すると、画像に切り替える作りになっています（ソースの parseMermaid.js）。

Error processing Mermaid diagram: Error: DOM Node with id classId-User-0 not found
Error processing Mermaid diagram: Error: ER entity entity-CUSTOMER-0 not found in rendered SVG
Error processing Mermaid diagram: Error: State node element not found for "待機"

mermaid-to-excalidraw 2.3.0 の package.json の依存は "mermaid": "^11.12.1" なので、npm はより新しい 11.17.2 を入れます。クラス図などを図形として変換したいときは、npm install mermaid@11.12.1 のように Mermaid の版を固定すると、手元では変換できました。 なお公式ドキュメントの API のページは「現在はフローチャートだけに対応し、ほかの図は画像として描く」と書いていて、ソースのほうが先に進んでいます。画像になった図は、拡大・移動はできても、中の四角を1つずつ動かすことはできません。

書き間違えたコードを渡すと、Mermaid の構文エラーがそのまま返りました。

Parse error on line 3: | ...owchart TD  A -->  | ---------------------^

Mermaid の書き方は、関連記事「Mermaid記法一覧｜全図種のコピペ用コードと描画結果まとめ」で扱っています。

VS Code拡張・Obsidianプラグインで使う

この節では、エディタやノートアプリの中で Excalidraw を使う方法と、保存されるファイルの形が分かります。

VS Code の拡張機能（Excalidraw）

Visual Studio Marketplace の「Excalidraw」（ID は pomdtr.excalidraw-editor、発行者 pomdtr、2026年10月23日時点のインストール数 568,120）です。

code --install-extension pomdtr.excalidraw-editor

.excalidraw.svg・.excalidraw.png は、シーンを埋め込んだ画像です。 前の節で確かめたとおり、画像として README などに貼れて、VS Code で開くと編集できます。リポジトリの設計資料を、画像と編集用のデータの1ファイルで持てます。

Obsidian のプラグイン（Excalidraw）

Obsidian では、コミュニティプラグイン「Excalidraw」（作者 Zsolt Viczian、ID は obsidian-excalidraw-plugin、2026年10月23日時点の最新は 2.29.0、必要な Obsidian は 1.8.7 以上、モバイルでも動く）を使います。

図の中の文字が「## Text Elements」に平文で書かれるので、Obsidian の検索で図の中の言葉も見つかります。Obsidian の保管庫の作り方は、関連記事「Obsidianとは・使い方｜保管庫の中身・同期・料金とNotionとの違い」で扱っています。

そのほかの連携

公式の料金ページは、無料版にも「Notion、Obsidian などとの連携」が含まれると書いています。Notion では、共有リンク（#json=…）を埋め込みブロックで表示する使い方がよく紹介されています。

Excalidraw+の料金と無料版の違い

この節では、有料版の Excalidraw+ で何が増えるのかと、料金が分かります。値は2026年10月23日時点の公式の料金ページのものです。

料金ページはこのほか、Plus の機能として MCP と REST API（パブリックベータ）、SOC 2 Type 2 への準拠、保存時と転送時の暗号化、画像のアップロードが最大4K（無料版は圧縮）、個人のライブラリをサーバーに保存（無料版はブラウザ）を挙げています。月払いの7ドルは、料金ページの説明文に書かれている値です。

1人で描いてファイルで保存・共有する使い方は無料版の機能に含まれ、チームで図を溜めて権限を分けたいときに Excalidraw+ の機能が効いてきます。

Excalidrawを自分のReactアプリに埋め込む（@excalidraw/excalidraw）

この節では、npm のパッケージで自分のアプリに Excalidraw のエディタを置く手順が、Vite でビルドしてブラウザで動かした実物で分かります。

入れる

npm create vite@latest app -- --template react-ts
cd app
npm install
npm install @excalidraw/excalidraw

0.18.1 の peer dependency は react と react-dom の ^17.0.2 || ^18.2.0 || ^19.0.0 で、React 19.3.1 で動きました。Vite のプロジェクトの作り方は、関連記事「React環境構築をViteで行う手順｜create viteの使い方」で扱っています。

画面のコード

// src/App.tsx
import { useState } from 'react'
import { Excalidraw, convertToExcalidrawElements } from '@excalidraw/excalidraw'
import type { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types'
import '@excalidraw/excalidraw/index.css'

// 骨組み（skeleton）で書いて、本物の図形に変換する
const initialElements = convertToExcalidrawElements([
  { type: 'rectangle', id: 'browser', x: 100, y: 100, width: 180, height: 80, label: { text: 'ブラウザ' } },
  { type: 'rectangle', id: 'api', x: 480, y: 100, width: 180, height: 80, label: { text: 'API サーバー' } },
  {
    type: 'arrow', x: 285, y: 140, width: 190, height: 0,
    label: { text: 'HTTPS' },
    start: { id: 'browser' },
    end: { id: 'api' },
  },
])

export default function App() {
  const [api, setApi] = useState<ExcalidrawImperativeAPI | null>(null)
  return (
    // 親の要素に高さが無いと、何も表示されない
    <main style={{ height: '100vh', width: '100vw' }}>
      <Excalidraw
        excalidrawAPI={(a) => setApi(a)}
        initialData={{ elements: initialElements, appState: { viewBackgroundColor: '#ffffff' } }}
        langCode="ja-JP"
      />
    </main>
  )
}

convertToExcalidrawElements に label を付けた四角を渡すと、四角と文字の2つの図形になり、start・end に id を書いた矢印は両端が四角に吸い付きました。できた6つの図形は rectangle・rectangle・arrow・text・text・text で、id は browser ではなく IYFkfypw1DWkPpcY0eeNp のような新しい値に置き換わっていました（矢印のつながりは新しい id でつながっています）。

フォントを自分のサーバーから配る

公式のインストールのページは、既定ではフォントを CDN から取りに行き、自分で配るときは node_modules/@excalidraw/excalidraw/dist/prod/fonts の中身を公開フォルダに置き、window.EXCALIDRAW_ASSET_PATH にそのパスを書く、と説明しています。

cp -r node_modules/@excalidraw/excalidraw/dist/prod/fonts public/

<!-- index.html の head の先頭 -->
<script>window.EXCALIDRAW_ASSET_PATH = "/";</script>

0.18.1 のコードでは、CDN の既定値は https://esm.sh/@excalidraw/excalidraw@0.18.1/dist/prod/ でした。フォントのフォルダは9書体・234ファイル・13MB です。この設定で開くと、ページを表示するまでに外部のサーバーへの通信は0件でした。 社内のネットワークだけで使うアプリでは、この設定が要ります。

ビルドと表示の結果

> app@0.0.0 build
> tsc -b && vite build

vite v8.3.5 building client environment for production...
✓ 2342 modules transformed.
dist/assets/index-DtRVLazd.css                          142.02 kB │ gzip:  22.37 kB
dist/assets/index-DvYByZkx.js                         1,535.08 kB │ gzip: 482.97 kB
dist/assets/chunk-EIO257PC-TyD7alKv.js                1,820.99 kB │ gzip: 744.20 kB

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
✓ built in 5.07s

（言語ごとのファイルや Mermaid の図の種類ごとのファイルなど、約160行は省きました。）

開いてから描けるようになるまでに、ブラウザが読み込んだのは JS 22個・CSS 1個・フォント（woff2）5個でした。エディタは大きいので、図を描くページだけで読み込むように React.lazy と import() で分けると、ほかのページが重くなりません。 Vite の警告文の1つ目の案と同じです。

よく使う props と API

PNG を2倍の大きさで書き出すときは、exportToBlob に getDimensions: (w, h) => ({ width: w * 2, height: h * 2, scale: 2 }) を渡します。手元では 371×442px が 743×885px になりました。exportPadding: 40 では周りの余白が増え、431×502px になりました。

Next.js で使うとき

公式の統合のページによると、Excalidraw はサーバーでの描画（SSR）に対応していないので、next/dynamic で ssr: false にして読み込みます。App Router では、先頭に "use client" を書いたラッパーのコンポーネントを作り、それを dynamic で読み込む形です。

// app/excalidraw-wrapper.tsx
'use client'
import { Excalidraw } from '@excalidraw/excalidraw'
import '@excalidraw/excalidraw/index.css'

export default function ExcalidrawWrapper() {
  return <main style={{ height: '500px' }}><Excalidraw /></main>
}

// app/page.tsx
import dynamic from 'next/dynamic'
const ExcalidrawWrapper = dynamic(() => import('./excalidraw-wrapper'), { ssr: false })

（App Router では ssr: false の dynamic はクライアントコンポーネントの中で使う決まりなので、page.tsx 側も 'use client' にするか、もう1段のクライアントコンポーネントから呼びます。）公式のサンプルは GitHub のリポジトリの examples/with-nextjs にあります。

excalidraw.com そのものを自分のサーバーに置く

リポジトリの Dockerfile は、Node.js 24 でアプリをビルドし、できた静的ファイルを nginx で配る2段の構成です。docker-compose.yml はポート 3000:80 で起動します。ただし、excalidraw.com の共同編集はソケットのサーバー（本番の設定では VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com）、共有リンクは JSON を預かるサーバー（json.excalidraw.com）につながっていて、自分のサーバーだけで閉じるには、これらの設定を自分の環境に向け直す作業が要ります。

Excalidrawとdraw.io・Mermaidの違い

この節では、図を描く道具を選ぶときに比べられることが多い2つとの違いを、各公式の情報で比べられます。

draw.io の「同時編集」は、GitHub の jgraph/drawio の README の「draw.io does not support real-time collaborative editing in this version」に基づきます。

設計書に使う図の種類は、関連記事「UML図の種類一覧：全14種類の使い分けと工程別早見表・PlantUML例」で扱っています。AI でマインドマップを作る道具は、関連記事「Mapifyとは｜AIマインドマップの使い方・料金・無料枠と書き出しを解説」で扱っています。

Excalidrawのよくあるつまずきと直し方

この節では、症状から原因と直し方を引けます。エラー文は手元で出た実物です。

Failed to use workers for subsetting は、Vite でビルドしたアプリで SVG・PNG を書き出したときにコンソールに出ました。書き出した SVG には、使った文字のフォントが埋め込まれていました。

よくある質問

Q. Excalidrawとは何ですか？ A. ブラウザで手書き風の図を描ける、無料・オープンソース（MIT）のホワイトボードです。excalidraw.com を開けば登録なしで使え、共同編集や PNG・SVG への書き出しができます。

Q. Excalidrawは無料ですか？商用で使えますか？ A. excalidraw.com と npm のパッケージは無料で、ソースコードは MIT ライセンスなので自社のアプリに組み込めます。クラウド保存や権限の管理が要るときは有料の Excalidraw+（1ユーザー月6ドル、年払い。2026年10月23日時点）があります。

Q. Excalidrawは日本語で使えますか？ A. 使えます。メニューの言語の一覧で日本語を選ぶと画面が日本語になり、日本語の文字も Xiaolai という手書き風の書体で表示されます。

Q. Excalidrawで描いた図はどこに保存されますか？ A. excalidraw.com では、ブラウザの localStorage に自動で保存されます。ブラウザのデータを消すと図も消えるので、「名前を付けて保存...」で .excalidraw のファイルに残しておくと安心です。

Q. 背景を透明にしてPNGで保存するには？ A. 「画像のエクスポート...」（Ctrl+Shift+E）で「背景」をオフにして PNG を押します。資料に貼るならスケールを 2× か 3× にすると文字がつぶれにくくなります。

Q. 書き出したPNGをあとで編集し直せますか？ A. 書き出すときに「Embed scene（シーンを埋め込む）」をオンにしておけば、Excalidraw でその PNG・SVG を開くと元の図に戻ります。手元では6つの図形がすべて戻りました。

Q. Excalidrawのショートカットを一覧で見るには？ A. エディタで ? キーを押すとヘルプ画面に全部が出ます。主なものはこの記事のショートカット早見表にまとめました。Mac では Ctrl を Cmd、Alt を Option に読み替えます。

Q. Excalidrawで共同編集するには？ A. 画面右上の「共有」から共同編集を始め、出てきた #room=… のリンクを相手に送ります。図は暗号化され、鍵はリンクの # の後ろにあるのでサーバーには送られません。

Q. AWSのアイコンを使うには？ A. 右上の「ライブラリ」から libraries.excalidraw.com を開き、AWS Architecture Icons などの「Add to Excalidraw」で取り込みます。2026年9月の一覧では、名前か説明に「aws」を含むライブラリが7件ありました。

Q. VS CodeでExcalidrawを使えますか？ A. 拡張機能 pomdtr.excalidraw-editor を入れ、.excalidraw か .excalidraw.svg・.excalidraw.png のファイルを作って開くと、VS Code の中で描けます。

Q. MermaidのコードをExcalidrawの図にできますか？ A. できます。「その他のツール」の「Mermaid to Excalidraw」にコードを貼ります。フローチャートとシーケンス図は図形になり、クラス図などは手元では Mermaid の版によって画像になりました（Mermaid の節）。

Q. オフラインで使えますか？ A. excalidraw.com は PWA に対応していて、インストールするとオフラインでも開けます。共同編集と共有リンクはネットにつながっているときだけ使えます。

まとめ

• Excalidraw は手書き風の図を描ける無料・MIT のホワイトボード。excalidraw.com なら登録なしで描け、日本語の文字も手書き風（Xiaolai）で出る。
• 道具は R（四角）・D（ひし形）・O（楕円）・A（矢印）・T（文字）、Q で固定、? でショートカット一覧。Mac は Ctrl を Cmd に。
• 自動保存はブラウザの中だけ。.excalidraw か「シーンを埋め込んだ」PNG・SVG で残すと、開き直して編集できる。埋め込みで PNG は約1.8KB 増えた。
• .excalidraw は6つのキーの JSON。図形1つを動かすと、吸い付いた矢印と文字、version も変わる。
• 共同編集と共有リンクは、ブラウザで暗号化し、22文字の鍵を URL の # の後ろに入れる。リンクそのものが合言葉。
• Mermaid からの変換は、フローチャート・シーケンス図は図形に。クラス図・ER 図・状態遷移図は Mermaid 11.17.2 では画像、11.12.1 では図形になった。
• React には @excalidraw/excalidraw 0.18.1 で埋め込める。親に高さを付け、フォントを自分で配ると外部への通信が0件になった。
• Excalidraw+ は1ユーザー月6ドル（年払い）で、クラウド保存・権限・発表・PDF 書き出しなどが付く（2026年10月23日時点）。

参考・出典

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

• Excalidraw：https://excalidraw.com/
• GitHub「excalidraw/excalidraw」：https://github.com/excalidraw/excalidraw
• Excalidraw Developer Docs「Installation」：https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation
• Excalidraw Developer Docs「Integration」：https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration
• Excalidraw Developer Docs「Props」：https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props
• Excalidraw Developer Docs「JSON Schema」：https://docs.excalidraw.com/docs/codebase/json-schema
• Excalidraw Developer Docs「mermaid-to-excalidraw API」：https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/api
• Excalidraw+「Pricing」：https://plus.excalidraw.com/pricing
• Excalidraw+：https://plus.excalidraw.com/
• Excalidraw Blog「End-to-End Encryption in the Browser」：https://plus.excalidraw.com/blog/end-to-end-encryption
• Excalidraw Libraries：https://libraries.excalidraw.com/
• GitHub「excalidraw/excalidraw-libraries」：https://github.com/excalidraw/excalidraw-libraries
• npm「@excalidraw/excalidraw」：https://www.npmjs.com/package/@excalidraw/excalidraw
• npm「@excalidraw/mermaid-to-excalidraw」：https://www.npmjs.com/package/@excalidraw/mermaid-to-excalidraw
• Visual Studio Marketplace「Excalidraw」：https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor
• GitHub「zsviczian/obsidian-excalidraw-plugin」：https://github.com/zsviczian/obsidian-excalidraw-plugin
• GitHub「jgraph/drawio」：https://github.com/jgraph/drawio

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