← all repositories
liujuntao123/smart-excalidraw-next

Diagrams from prose, minus the hand cramps

A Next.js wrapper that turns natural language into editable Excalidraw diagrams via LLM.

3.4k stars JavaScript Creative · Design
smart-excalidraw-next
Velocity · 7d
+15
★ / day
Trend
steady
star history

What it does You type “draw a microservices architecture with gateway and auth service,” and it generates an actual Excalidraw diagram you can drag, resize, and redraw. Under the hood, a Next.js 16 app calls an LLM (OpenAI or Anthropic), runs the output through a custom arrow-routing algorithm, and drops the result onto an Excalidraw canvas. Supports 20+ chart types—flowcharts, ER diagrams, sequence diagrams, mind maps—or lets the AI pick.

The interesting bit The “smart arrow optimization” is the project’s own claim to novelty: it auto-calculates connection points to reduce line crossings. Most AI-to-diagram tools stop at generating boxes and text; this one tries to solve the layout problem that usually leaves you manually untangling spaghetti.

Key highlights

  • Output is native Excalidraw JSON—fully editable, not a static image export
  • Browser-local config: API keys stay in your browser, not a remote database
  • Optional server-side LLM via access password, for teams who don’t want everyone managing keys
  • Built on a modern stack: Next.js 16, React 19, Tailwind CSS 4, Monaco Editor
  • MIT licensed

Caveats

  • The README heavily promotes a “new version” at a different repo (ai-draw-nexus), suggesting this codebase may be in maintenance mode
  • Only two LLM providers supported (OpenAI, Anthropic); no local model or custom endpoint option is documented
  • The .env.example file is referenced but the copy command (cp .env.example) is truncated—small rough edge in the setup docs

Verdict Worth a spin if you already live in Excalidraw and want to skip the blank-canvas paralysis. Skip it if you need offline-only operation or deep integration with non-Excalidraw tools.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.