背景
図を描くときはだいたい Excalidraw を使っている。手書き風の見た目のホワイトボードツール。
こんな感じの図が書ける。
Miro、フリーボード、draw.io など、ホワイトボードツールはいくつもあるが、個人的には Excalidraw が一番使いやすい。特に自分の推しポイントは、他のツールと違ってオブジェクトの選択範囲が直感的でストレスがないことだ。下の例の図では、丸（オブジェクトA）、四角（オブジェクトB）を範囲選択する様子を表してみた。黒点線がマウス選択で範囲選択しようとしている様子を表している。
オブジェクトAは選択範囲にすべて収まっていて、オブジェクトBは選択範囲に一部だけかかっているという状態なのだが、他のホワイトボードツールだと、オブジェクトBも選択される。一方、Excalidraw はオブジェクトAだけが選択され、範囲に一部だけかかっているオブジェクトBは選択されないようになっている。細かい挙動だが、他のツールではかなりストレスだった点が、Excalidraw では解消されていてとても使いやすい。
ただ、オンラインのエディタ（excalidraw.com）で扱えるのは基本的に一枚だけで、中身はブラウザに保存される。別の図を描きたくなったらファイルに書き出して、また開いて……という運用になるし、PC で描いたものをそのまま別の端末で開くこともできない。
有料版の Excalidraw+ を使えば、ワークスペースで複数の図を整理できて端末間でも同期される。が、個人利用では少し機能がオーバー気味なのと、自分の使いやすいようにしたかった。Excalidraw+ はチームで使うなら素晴らしいサービスだと思うし、有料版を否定する意図はない。
Excalidraw is a free virtual collaborative whiteboard for creating simple hand-drawn style diagrams, illustrations & flowcharts. No sign-up. Just draw.
plus.excalidraw.com この 3 つが揃えばいいので、OSS 版を fork して改造して、ホスティングしてしまおう、と。Excalidraw は MIT ライセンスで、改変も許諾されている。公式ドキュメントでも、自分のドメインでのセルフホスティングが想定されている。fork には著作権表示とライセンス文を残している。
どのようにやったか
構成
全体はこんな感じ。
ビルドした静的ファイルを Cloudflare Pages で配信し、図の保存用 API を Pages Functions で生やしている。図の一覧は D1 に、図の本体（シーンの JSON）と画像は R2 に置く。手前に Cloudflare Access を挟んで、自分のメールアドレスでしかログインできないようにした。
本家をベースに UI を改造する
本家の excalidraw/excalidraw をベースにして、Excalidraw+ に近い使い心地になるよう手を入れた。
完成図は以下。
-
ダッシュボード: コレクション（フォルダ）ごとに、サムネイル付きのカードで図が並ぶ。図やコレクションの作成・名前変更・移動・削除もここでできる
-
図の一覧サイドバー: 編集画面の左に、今のコレクションの図が並ぶ。図から図への移動がワンクリックで済む
-
クラウド同期: 編集が止まったら自動で保存して、ほかの端末の変更も取り込む
同期は、ブラウザの localStorage / IndexedDB を作業コピーにしておき、それをサーバーと突き合わせる形にした。オフライン中に描いた分も、つながったら同期される。競合したときは要素ごとに新しい方を採用してマージしている。
逆に、自分用なので要らないものは消した。共有リンク、共同編集、AI 機能、アクセス解析など、外部にデータを送る機能は全部オフにしている。Excalidraw+ の機能を再実装したわけではなく、OSS 版の機能を無効にしたうえで、保存まわりを自分用に作っただけだ。
upstream には今後も追従したいので、本家のファイルへの変更はなるべく小さくして、追加分は別ディレクトリにまとめている。App.tsx に数行足したくらいで済んだ。
Cloudflare でホスティングする
デプロイは main に push すれば Pages が勝手にビルドしてくれる。API 側でも Access の JWT を自前で検証しているので、Access の設定をうっかり外しても API が丸見えになることはない（はず）。
料金は Workers の無料プランで収まっている（2026年10月時点）。Cloudflare 素晴らしすぎる。無料プランなら上限を超えても課金ではなくエラーになるので、自分用としては安心感がある。R2 だけは無料枠を超えると課金されるけれど、図を描くくらいならまず届かないと思う。
まとめ
めっちゃいい。
