LASSIC Media らしくメディア
Excalidrawで作図基盤をセルフホスト構築・外注
LASSIC IT事業部|元請(プライムベンダー)としてシステム保守・運用を受託
この記事のポイント
- Excalidrawは、手書き風の図形でアーキテクチャ図やブレスト用の図を作成できるMITライセンスの無料OSSで、要件定義・設計の資料作成に活用できます。
- 公式のDockerイメージ単体では複数人でのリアルタイム共同編集に対応しておらず、共同編集にはexcalidraw-roomという別サーバーの構築が必要です。
- Docker運用や共同編集サーバーの構築・保守には専門知識が求められるため、内製と外注のどちらで進めるかを費用構造とリスクの両面から判断する必要があります。
目次
Excalidrawとは何か?手書き風の作図ができるOSSホワイトボード
Excalidrawとは、手書き風のタッチで図形を描けるオープンソースの仮想ホワイトボードツールです。公式GitHubリポジトリでは「An open source virtual hand-drawn style whiteboard. Collaborative and end-to-end encrypted.」と紹介されており*1、共同編集とエンドツーエンド暗号化を特徴として掲げています。2026年7月時点でGitHub上のスター数は12万8000件を超え*1、Google Cloud・Meta・CodeSandbox・Obsidian・Replit・Notionといった複数の企業が自社サービスへの組み込みに利用していると紹介されています*1。
ライセンスはMITで、公式LICENSEファイルには「Copyright (c) 2020 Excalidraw」の表記とともに、ソフトウェアの利用・複製・改変・再配布・販売までを無償で許諾する条項が明記されています*2。実装はTypeScriptが中心で、Reactをベースに構築されており*1、自社サービスにエディタ機能を組み込みたい開発者向けの統合ガイドも公開されています。
図形要素とエクスポート形式で見る基本機能
Excalidrawで扱える図形要素は、四角形・円・ひし形・矢印・線・フリードロー(手描き)・消しゴムです*1。アーキテクチャ図やフローチャートで使うひし形の分岐、矢印を使った処理の流れなど、要件定義や設計のブレストで用いる一般的な図形が一通りそろっています。
作成した図はPNG・SVG・クリップボードへのエクスポートに加え*1、編集可能なシーンデータとして「.excalidraw」という独自のJSON形式で保存できます*1。このJSON形式は共同編集の際にサーバー間でやり取りされるシーンデータと同じ構造を持ち、資料としてそのまま社内のドキュメント基盤やチケットに貼り付けられる点は、都度画像へ書き出す運用と比べて手間を減らせる要素と言えるでしょう。
公式Dockerイメージでセルフホストする基本手順
Excalidrawは、公式にDockerイメージ「excalidraw/excalidraw」をDocker Hubで公開しています*3。2026年7月時点でイメージサイズは41.2MB、プル回数は500万件を超えており*3、セルフホスト用途での利用実績が一定数あることがうかがえます。
開発者向けドキュメントでは、次のコマンドでコンテナを起動できると案内されています*4。
docker run --rm -dit --name excalidraw -p 5000:80 excalidraw/excalidraw:latest
ホスト側のポート5000がコンテナ内のポート80にマッピングされ、ブラウザから自社ドメイン配下のExcalidrawエディタへアクセスできるようになります*3。トラッキング用のライブラリを含まない点も公式に明記されており*3、外部への通信を最小限にとどめたい企業には確認しておきたいポイントです。
自己ホスト版は共同編集(コラボレーション)に標準では対応しない
ここで押さえておきたいのが、公式Dockerイメージ単体では複数人でのリアルタイム共同編集ができないという点です。Docker Hubの公式ページには「At the moment, self-hosting your own instance doesn’t support sharing or collaboration features.」と明記されており*3、開発チームは自己ホスト向けの本格的な対応(原文では”full-fledged solution for self-hosting”)を検討中としています*3。
開発者向けドキュメントの「Development」ページでも「For collaboration, you will need to set up collab server in local」と案内されており*4、共同編集を使うには別途コラボレーションサーバーを用意する必要があると明記されています*4。要件定義や設計のブレストを複数人で同時に行いたい企業がセルフホストを検討する場合、この制約を導入前に把握しておく必要があります。
excalidraw-roomで共同編集サーバーを構築する仕組み
公式が提供する共同編集サーバーの実装が「excalidraw-room」です。リポジトリは「Example of excalidraw collaboration server」と位置づけられており*5、MITライセンスで公開されています*5。TypeScriptで実装され、Dockerfileも同梱されているためコンテナ化が可能です*5。本番運用にはPM2を使ったプロセス管理が案内されており、「pm2 start pm2.production.json」というコマンドで起動する方法が示されています*5。複数プロセスによるクラスタモード運用が必要な場合は、Socket.IOの公式ドキュメントを参照するよう案内されています*5。
Excalidraw本体側では、共同編集サーバーの接続先を環境変数「VITE_APP_WS_SERVER_URL」で指定する仕様です。開発用の設定ファイルにはこの変数がexcalidraw-roomのリポジトリを参照するコメントとともにローカル環境のURL(http://localhost:3002)で設定されており*6、Excalidraw公式サービス自体の本番環境向け設定ファイルでも同じ変数で自社運用のコラボレーションサーバーのURLを指定していることが確認できます*7。自社で共同編集まで完結させるには、Excalidrawの画面をビルドする際にこの環境変数を自社のexcalidraw-roomサーバーへ向けたうえで、両者を組み合わせて構築する必要があります。
セルフホスト内製と外注委託のコスト構造比較
セルフホストによる内製構築と、外部パートナーへの委託では、費用構造・必要スキル・リスク対応の重心が異なります。以下の表に主な違いを整理しました。
| 比較項目 | セルフホスト内製 | 外注委託 |
|---|---|---|
| ライセンス費用 | MITライセンスの無料ソフトウェアのため発生しません*2 | ソフトウェア自体は無料ですが、構築・保守を委託する分の費用が発生します |
| 必要な専門知識 | Docker運用、excalidraw-roomの構築、PM2でのプロセス管理といった知識が必要です*3*5 | 専門パートナーが構築・調整を担うため、社内での知識習得は最小限で済みます |
| 共同編集機能の構築 | 公式イメージ単体では非対応のため、excalidraw-roomを別途用意しVITE_APP_WS_SERVER_URLを設定したうえで組み直す必要があります*3*4*6*7 | 一連の構築・動作確認を含めて委託できます |
| 保守・アップグレード対応 | イメージの更新やコラボレーションサーバーのクラスタ運用を自社で設計・実行します*5 | 監視・更新対応まで含めて委託できます |
機密性の高い設計図を社外に出さずに運用する視点
要件定義書やアーキテクチャ図には、システム構成・ネットワーク設計・取引先の情報など、社外に出したくない情報が含まれるケースが少なくありません。SaaS型の作図ツールを使う場合、図のデータは提供事業者のサーバーに保存される構成が一般的です。Excalidrawをセルフホストすれば、図のデータを自社が管理するサーバー内にとどめたまま運用できる点が、SaaS利用との構成上の違いになります。
ただし前述の通り、公式Dockerイメージ単体では共同編集に対応していないため*3、複数人でのブレストや同時編集を機密プロジェクトの中で行いたい場合は、excalidraw-roomを含めた構成をどこまで自社で構築・運用できるかが実務上の分かれ目になります*4*5。構築範囲を見誤ると、図の保管場所は社内にとどめられても、共同編集自体は実現できていないという状態に陥りかねません。
内製構築に必要なスキルと外注との違い
Docker運用・共同編集サーバー構築に求められる専門知識
Excalidrawを内製で構築・運用する場合、求められる専門知識は複数分野にまたがります。Dockerコンテナの運用とホストサーバーの管理、excalidraw-roomのビルドとVITE_APP_WS_SERVER_URLの設定、PM2によるプロセス監視、クラスタ運用が必要になった場合のSocket.IO周りの構成調整がその内容です*3*4*5。自社の情報システム部門だけでこれらを完結させるには、複数の担当者が連携する体制を整える必要があるでしょう。
判断を先延ばしにしたまま自己流で構築を進めると、共同編集サーバーを立てないまま「複数人で同時編集できない」という制約に後から気づくケースが生じます。ビルド時に環境変数を焼き込む仕様を把握しないまま進めると、後から接続先を切り替えるためにイメージの再ビルドが必要になる場面も想定されます*6*7。
専門パートナーに委託した場合の違い
専門パートナーに依頼すると、Dockerイメージの構築からexcalidraw-roomの追加構築、本番運用に向けたPM2でのプロセス管理、バージョンアップ時の動作確認まで一連の工程を任せられます。自社では構成検討や動作検証だけで時間がかかる場面でも、複数のセルフホスト基盤を扱ってきた知見を活用すれば、稼働までの期間を圧縮しやすくなります。内製と外注のどちらを選ぶ場合でも、まずは自社が求める共同編集の範囲とデータの持ち出し要件の整理が出発点になるでしょう。
まとめ:Excalidrawセルフホスト活用の3つの判断軸
本稿ではExcalidrawの機能とセルフホスト構築の要点を、公式GitHubリポジトリ・Docker Hub・開発者向けドキュメントの情報に基づいて整理しました。要点は次の3つに集約されるでしょう。第一に、手書き風の図形描画とPNG・SVG・JSON形式でのエクスポートはMITライセンスの無料OSSで実現でき、ライセンス費用は発生しません*1*2。第二に、公式Dockerイメージ単体では共同編集に対応しておらず、複数人での同時編集にはexcalidraw-roomの追加構築とビルド時の環境変数設定が必要です*3*4*5。第三に、機密性の高い設計図を社外に出さずに運用したいケースほど、構築範囲の見極めと実行を外部委託によって進めやすくなる場面が増えます。
よくある質問
Excalidrawは無料で商用利用できますか。
はい、MITライセンスのOSSであり、ソースコードは無料で利用・改変・商用利用ができます*2。著作権表記とライセンス条文の保持など、MITライセンスの条件を確認したうえで運用することが大切です。
セルフホストの公式Dockerイメージだけで複数人による同時編集はできますか。
できません。公式Dockerイメージ単体では、複数人によるリアルタイムの共同編集には対応していないと公式に明記されています*3。共同編集を行うには、excalidraw-roomという別のコラボレーションサーバーを構築する必要があります*4。
共同編集機能を自社サーバーだけで完結させるには何が必要ですか。
excalidraw-roomをDockerやPM2で構築し稼働させたうえで、Excalidraw本体をビルドする際に環境変数VITE_APP_WS_SERVER_URLで自社のコラボレーションサーバーを指定する必要があります*5*7。
Excalidrawではどのような図が作成できますか。
四角形・円・ひし形・矢印・線・フリードロー・消しゴムといった図形要素を組み合わせられ、アーキテクチャ図やフローチャートなど要件定義・設計のブレストで使う図を一通り作成できます*1。作成した図はPNG・SVG・クリップボードのほか、編集可能な.excalidraw形式でもエクスポートできます*1。
セルフホストにはどのくらいの専門知識が必要ですか。
Dockerコンテナの運用、excalidraw-roomのビルドと環境変数設定、本番運用時のPM2によるプロセス管理など複数分野の知識が求められます*3*4*5。
著者:テレリモ総研編集部 鈴木 亮佑
ご不明な点はお問い合わせフォームからもご連絡いただけます。
- *1 出典:Excalidraw公式GitHubリポジトリ「README」(https://github.com/excalidraw/excalidraw)
- *2 出典:Excalidraw公式GitHubリポジトリ「LICENSE」(https://github.com/excalidraw/excalidraw/blob/master/LICENSE)
- *3 出典:Docker Hub「excalidraw/excalidraw」公式イメージページ(https://hub.docker.com/r/excalidraw/excalidraw)
- *4 出典:Excalidraw開発者向けドキュメント「Development」(https://docs.excalidraw.com/docs/introduction/development)
- *5 出典:Excalidraw公式GitHubリポジトリ「excalidraw-room README」(https://github.com/excalidraw/excalidraw-room)
- *6 出典:Excalidraw公式GitHubリポジトリ「.env.development」(https://github.com/excalidraw/excalidraw/blob/master/.env.development)
- *7 出典:Excalidraw公式GitHubリポジトリ「.env.production」(https://github.com/excalidraw/excalidraw/blob/master/.env.production)