Excalidraw

整った作図より先に「考えを図にする」ことへ寄せた無限キャンバス

READMEでは、無限キャンバス、手描き風スタイル、矩形・円・矢印・フリードローなどの基本ツール、画像、Shape Library、Undo/Redo、ズーム・パン、PNG/SVG/クリップボードへの書き出し、.excalidraw JSON形式での保存が主要機能として挙げられています。完成図を厳密に整える前のラフな構成図、ワイヤーフレーム、説明図を素早く作る用途と相性が良い構成です。

出典：[1]

Webアプリとして使うだけでなく、React製品へキャンバスを組み込める

公式READMEは@excalidraw/excalidrawをnpmパッケージとして案内し、React / React DOMと一緒にインストールする手順を示しています。リポジトリ自体もTypeScript主体のmonorepoで、React型定義、Vite、Vitestなどを利用しています。ホワイトボードを単体ツールとして使うだけでなく、自社アプリの一機能として組み込む選択肢を持てる点が特徴です。

出典：[1][2]

公式Web版はoffline・共同編集・E2E暗号化・local-firstまで備える

excalidraw.comの公式アプリは、PWAによるオフライン利用、リアルタイム共同編集、エンドツーエンド暗号化、ブラウザへのlocal-firstな自動保存、読み取り専用共有リンクを備えるとREADMEに記載されています。個人のラフスケッチから、会議中の共同ホワイトボードまで同じ操作感で広げられます。

出典：[1]

アーキテクチャ図・ワイヤーフレーム・会議メモを、作図ツールの操作負担を抑えて共有したい場合に

厳密なCADや高度なデザイン制作より、システム構成、画面案、アイデア、議論の流れを短時間で可視化したい場面に向きます。開発チームでは設計会話やREADME用の図、プロダクトチームではワイヤーフレームやブレインストーミングに使いやすく、独自サービスへホワイトボード機能を埋め込みたい場合にはnpmパッケージも比較対象になります。

npmパッケージとexcalidraw.comの機能範囲は同じではない

READMEはExcalidraw editorのnpmパッケージ機能と、excalidraw.comで提供するアプリ機能を明確に分けています。特にリアルタイム共同編集、E2E暗号化、local-first、共有リンクは公式Webアプリ側の機能として説明されており、READMEでは将来的にdrop-in pluginとして提供予定とされています。組み込み用途では、Web版で使える機能がそのままライブラリAPIに含まれると想定しない方が安全です。

コードはMIT Licenseですが、Excalidraw+のような商用サービスも同じプロジェクト周辺に存在します。OSSとして再利用する範囲と、公式ホストサービス固有の機能・運用を分けて評価してください。

出典：[1][3]