この記事は ゆっくりテックウォッチ Advent Calendar 2025 の 14 日目の記事です。
個人開発の「ゆっくり動画スタジオ」でGitHub人気リポジトリの解説動画を自動生成しており、その分析データをもとに本記事も生成しています。
TL;DR
- Google・Meta・Notionなど大手企業が採用する信頼性
- 手描き風スタイルで美しい図を誰でも作成可能
- リアルタイム共同編集とエンドツーエンド暗号化
このリポジトリについて
手描き風ホワイトボードをブラウザで実現するオープンソースツール
Excalidrawは、手描き風のスタイルで図やワイヤーフレームを作成できる無限キャンバスのホワイトボードアプリ。リアルタイムコラボレーションとエンドツーエンド暗号化に対応し、Google、Meta、Notionなど大手企業でも採用されている。
| 項目 | 内容 |
|---|---|
| リポジトリ | excalidraw/excalidraw |
| スター数 | 112,435 |
| 言語 | TypeScript |
| ライセンス | MIT License |
| 作成日 | 2020-01-02 |
なぜ今注目されているのか
システム構成図やワイヤーフレーム、毎回ツール選びで悩んでいませんか？
ブラウザだけで手描き風の美しい図が作れるExcalidrawなら、その悩みを解決できます。インストール不要、アカウント登録不要で、すぐに使い始められます。
スター推移
2020年1月の公開直後から急成長を遂げ、わずか2週間で1,400スターを獲得。その後も安定した成長を続け、2023年2月には約40,000スター、そして現在は112,000スターを超える大人気プロジェクトとなっています。
コロナ禍でリモートワークが普及した2020年以降、オンラインでのコラボレーションツールの需要が急増したことも、Excalidrawの成長を後押ししました。
主な機能・特徴
1. Google・Meta・Notionなど大手企業が採用する信頼性
Excalidrawは、Google Cloud、Meta、Notion、CodeSandbox、Replit、HackerRankなど、名だたるテック企業で採用されています。これだけの企業が本番環境で使用しているということは、品質と安定性が証明されていると言えるでしょう。
2. 手描き風スタイルで美しい図を誰でも作成可能
Excalidrawの最大の特徴は、自動的に手描き風のスタイルになること。デザインセンスに自信がなくても、誰でも親しみやすくプロフェッショナルな見た目の図が描けます。堅苦しくないカジュアルな雰囲気は、ブレインストーミングやラフスケッチに最適です。
3. リアルタイム共同編集とエンドツーエンド暗号化
複数人で同時に編集できるリアルタイムコラボレーション機能を搭載。しかも、エンドツーエンド暗号化により、サーバー側でもデータの中身を見ることができない高いセキュリティを実現しています。
エンドツーエンド暗号化とは、送信者と受信者だけがデータを読める仕組み。鍵付きのメッセージのように、途中経路やサーバーでは中身が見えないため、機密性の高い図面も安心して共有できます。
4. npmパッケージで自分のアプリに簡単に組み込み可能
開発者向けには、npmパッケージとして提供されており、自分のReactアプリに簡単にホワイトボード機能を追加できます。ゼロから描画機能を実装する手間を大幅に削減できます。
技術スタック
React 19 + TypeScript + Vite のモダンなフロントエンドスタック
| 分類 | 技術 |
|---|---|
| 主要技術 | TypeScript, React 19 |
| フレームワーク/ライブラリ | Vite, Vitest, ESLint, Prettier, Socket.io |
| インフラ | Vercel, Firebase, Docker |
| 連携サービス | VS Code拡張, npm package, PWA |
ユースケース
ユースケース1: スタートアップのバックエンドエンジニア
背景: 新規プロジェクトのアーキテクチャ図を作成する必要があるが、専用ツールのライセンス費用が高い
課題: 社内ミーティング用にシステム構成図を素早く作りたいが、PowerPointでは限界がある
解決策: Excalidrawでマイクロサービス構成図を手描き風で作成、Slackで共有リンクを送付
結果: 30分でプロフェッショナルな見た目のアーキテクチャ図が完成、チームから好評
ユースケース2: フリーランスのUIデザイナー
背景: 複数のクライアントを抱え、初回ミーティングでワイヤーフレームを見せながら議論したい
課題: Figmaを開くほどではない簡単なスケッチを共有したい
解決策: Excalidrawでラフなワイヤーフレームを作成、共有リンクでクライアントと画面共有しながらリアルタイムでフィードバックを反映
結果: ミーティング効率が大幅向上、クライアントからの信頼度アップ
ユースケース3: 個人開発者
背景: ノートアプリを開発中で、生徒が手書きで回答できるホワイトボード機能が必要
課題: 描画機能をゼロから実装するのは時間がかかりすぎる
解決策: Excalidrawのnpmパッケージをインストールしてアプリに組み込み
結果: 1日で本格的なホワイトボード機能を実装完了
競合との比較
Draw.io (diagrams.net)との違い
| 観点 | Excalidraw | Draw.io |
|---|---|---|
| スタイル | 手描き風でカジュアル | 正確な図形で堅い印象 |
| 価格 | 完全無料 | 完全無料 |
| コラボレーション | リアルタイム共同編集対応 | Google Drive連携で共有可能 |
| 暗号化 | エンドツーエンド暗号化 | なし |
Excalidrawを選ぶべき場面: カジュアルな図やブレインストーミング、セキュアな共有が必要な場合
Miroとの違い
| 観点 | Excalidraw | Miro |
|---|---|---|
| 価格 | 完全無料 | 無料プランあり、有料機能多数 |
| 機能数 | シンプルな描画機能に特化 | 付箋、投票、タイマーなど豊富 |
| オープンソース | オープンソース（MIT） | プロプライエタリ |
Excalidrawを選ぶべき場面: 費用をかけずに手軽に図を描きたい場合、自社サーバーでホストしたい場合
始め方
Excalidrawは、excalidraw.com にアクセスするだけですぐに使えます。アカウント登録不要で、データはローカルに自動保存されます。
自分のアプリに組み込みたい場合は、以下のコマンドでインストールできます：
npm install react react-dom @excalidraw/excalidraw
# または
yarn add react react-dom @excalidraw/excalidraw
詳細は公式ドキュメントを参照してください。
まとめ
Excalidrawは、手描き風スタイルで誰でも美しい図が描けるオープンソースのホワイトボードアプリです。Google、Meta、Notionなど大手企業での採用実績が示すとおり、品質と信頼性は折り紙付き。完全無料でリアルタイムコラボレーション、エンドツーエンド暗号化まで対応しています。
今すぐexcalidraw.comで試してみよう！
ゆっくり解説動画を配信しています
YouTubeチャンネル「ゆっくりテックウォッチ」では、GitHub の注目リポジトリをゆっくり解説しています。
この記事で紹介した Excalidraw の解説動画も公開していますので、ぜひご覧ください！
チャンネル登録よろしくお願いします！
関連リンク
この記事は AI によって自動生成されました。内容に誤りがある可能性があります。