liujuntao123/smart-excalidraw-next

Smart Excalidraw – AI搭載の図表作成ツール

概要 – 自然言語で図表を説明するだけで、完全に編集可能なExcalidrawキャンバスを即座に生成するWebアプリです。大規模言語モデル (LLM) を使用してリクエストを理解し、適切なチャートタイプを選択し、「インテリジェント矢印」アルゴリズムで要素を配置することで、線が交差する煩雑さを回避します。

主な機能

• 自然言語から図表へ – “draw a user-login flow” や “show a micro-service architecture with gateway, auth, and business services” のように入力するだけで、AIが図表全体を生成します。
• 20種類以上の内蔵スタイル – フローチャート、アーキテクチャ図、シーケンス図、ER図、マインドマップ、ネットワークトポロジーなど。モデルが最適なスタイルを自動判断します。
• Excalidrawネイティブ出力 – 結果はExcalidraw JSONとして出力され、キャンバス上で直接編集、スタイル変更、拡張が可能です。
• スマート接続ルーティング – 独自のアルゴリズムが矢印の最適なアンカーポイントを自動計算し、レイアウトを整頓します。
• LLMの提供方法（2通り）
  1. サーバーサイドLLM – 管理者が アクセスパスワード を設定し、共有のAnthropicまたはOpenAIキーを構成します。ユーザーはパスワードを入力するだけです。
  2. 個人用LLM – ユーザー自身のOpenAIまたはAnthropic APIキーを入力し、モデルを選択できます（READMEではClaude sonnet-4.5を推奨）。
• プライバシー重視 – APIキーとパスワードはブラウザ内（またはサーバー側の .env ファイル）にのみ保存され、サードパーティのバックエンドには送信されません。

試用方法

1. ホストされているデモ https://ai-draw-nexus.aizhi.site を開く（またはローカルで実行）。
2. “配置 LLM” をクリックしてAPIキーを追加するか、サーバー管理者が提供している場合は “访问密码” ボタンを使用します。
3. 入力ボックスに説明を入力し、図表が表示されるのを待ちます。
4. Excalidrawキャンバス上で結果を編集します（要素の移動、色の変更、注釈の追加など）。

ローカルでの実行

# clone
git clone <repo-url>
cd smart-excalidraw-next

# install (pnpm recommended)
pnpm install

# start dev server
pnpm dev   # then open http://localhost:3000

共有LLMモードを使用する場合は、.env.example を .env にコピーし、以下を記入してください：

• ACCESS_PASSWORD
• SERVER_LLM_TYPE (openai または anthropic)
• SERVER_LLM_BASE_URL
• SERVER_LLM_API_KEY
• SERVER_LLM_MODEL

技術スタック – Next.js 16, React 19, Excalidraw, Tailwind CSS 4, プロンプトボックス用Monaco editor。

ライセンス – MIT。

対象ユーザー – プロダクトデザイナー、エンジニア、教育者など、作図ツールを習得せずに素早く綺麗な図表を作成したい方。AIがレイアウトを処理するため、ユーザーはコンテンツに集中できます。