Excalidraw

手書き風の図を作成できる仮想ホワイトボード GitHub: https://github.com/excalidraw/excalidraw

---

概要

Excalidrawは、ユーザーが独特の手書き風の美しさを持つ図、フローチャート、ワイヤーフレーム、スケッチを作成できる、無料のオープンソース仮想ホワイトボードアプリケーションです。Reactコンポーネントとして構築され、npmパッケージとして公開されており、excalidraw.comでスタンドアロンで使用することも、他のアプリケーションに直接埋め込むこともできます。

このプロジェクトは当初Christopher Chedeau (vjeux)によって作成され、その後、Google Cloud、Meta、CodeSandbox、Replit、Notion、Obsidianなどの企業に採用された活気あるオープンソースコミュニティへと成長しました。

---

主要機能

作成ツール

• 基本図形：長方形、円、ひし形、矢印、線
• フリーハンド描画と消しゴム
• カスタムフォント（Excalifont）によるテキストツール
• 矢印の接続とラベル付き矢印
• 再利用可能なコンポーネント用の図形ライブラリ

キャンバスとUI

• ズームとパンをサポートする無限キャンバス
• ダークモード
• 元に戻す/やり直し履歴
• 効率的なワークフローのためのキーボードショートカット
• カスタマイズ可能な線の太さ、ラフさ、色、塗りつぶし

コラボレーションと共有

• 共有可能なリンクによるリアルタイムのマルチプレイヤーコラボレーション
• 安全なセッションのためのエンドツーエンド暗号化
• 表示用の読み取り専用共有リンク
• PWAサポート — オフラインで完全に動作
• ローカルファースト：ブラウザストレージに自動保存

エクスポートと統合

• PNG、SVG、クリップボードへのエクスポート
• .excalidraw JSON形式でのエクスポート/インポート（オープン、人間が読める形式）
• npmパッケージ@excalidraw/excalidrawを介してReactコンポーネントとして埋め込み可能
• Obsidian、VS Code拡張機能、Notionなどのツールに統合

ローカライゼーション

• 複数の言語による完全なi18n（国際化）サポート

---

技術スタック

レイヤー	テクノロジー
フロントエンド	React、TypeScript
キャンバス	HTML5 Canvas API
描画	Rough.js（手書き風レンダリング）
フォント	Excalifont（カスタム）、Virgil（レガシー）
パッケージ	npmで@excalidraw/excalidrawとして公開
ライセンス	MIT

---

ユースケース

• システムアーキテクチャ図 — 技術チーム向けのインフォーマルだが表現力豊かなスケッチ
• ワイヤーフレームとUIモックアップ — Figmaの前に素早く作成する低忠実度プロトタイプ
• ブレインストーミングとアイデア出し — 会議や非同期でのビジュアルシンキング
• 教育とプレゼンテーション — 手書き風スタイルでコンテンツを親しみやすくする
• ドキュメント — Wiki、Notionページ、READMEファイルにライブ図を埋め込む

---

Excalidraw+（プレミアム）

無料のオープンソースバージョンに加えて、チームは有料のクラウド製品である**Excalidraw+**を提供しており、以下を追加します。

• クラウドストレージと整理されたワークスペース
• 持続的なコラボレーションセッション
• キャンバス内でのボイスチャット
• プレゼンテーションモード（PPTX/PDFへのスライドベースのエクスポート）
• 権限管理とゲスト共有
• 14日間の無料トライアルあり

---

コミュニティと採用

• スター数: 90,000以上のGitHubスター（最もスターの多いホワイトボードツールの1つ）
• コントリビューター: 800人以上のオープンソースコントリビューター
• 利用企業: Google Cloud、Meta、CodeSandbox、Obsidian、Replit、Slite、Notion、HackerRank
• 統合: VS Code拡張機能、Obsidianプラグイン、Confluenceプラグインなど

---

はじめに

オンラインで利用する

https://excalidraw.comにアクセスしてください — サインアップは不要です。

セルフホスト/埋め込み

npm install @excalidraw/excalidraw

import { Excalidraw } from "@excalidraw/excalidraw";

export default function App() {
  return <Excalidraw />;
}

ローカルで実行する

git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install
npm start

---

まとめ

Excalidrawは、意図的に手書き風の美学（ラフなエッジと流れるような線で、コンテンツをインフォーマルに保ち、洗練さよりもアイデアに焦点を当てる）を採用している点で、図作成ツールの中でも際立っています。手間のかからないオンボーディング（ログイン不要）、強力なコラボレーション、オープンフォーマット、そしてReactライブラリとしての埋め込み可能性の組み合わせにより、世界中の開発者、デザイナー、チームにとって定番の選択肢となっています。