liujuntao123/smart-excalidraw-next

Smart Excalidraw – AI‑powered diagram creator

What it is – A web app that lets you describe a diagram in natural language and instantly gets a fully‑editable Excalidraw canvas. It uses a large language model (LLM) to understand the request, pick the right chart type, and place elements with an “intelligent‑arrow” algorithm that avoids messy line crossings.

Key capabilities

• Natural‑language to diagram – type something like “draw a user‑login flow” or “show a micro‑service architecture with gateway, auth, and business services” and the AI generates the whole chart.
• 20+ built‑in diagram styles – flowcharts, architecture diagrams, sequence diagrams, ER diagrams, mind maps, network topologies, etc. The model can also decide which style fits best.
• Excalidraw‑native output – the result is an Excalidraw JSON that can be edited, styled, or extended directly in the canvas.
• Smart connection routing – a proprietary algorithm automatically computes the best anchor points for arrows, keeping the layout tidy.
• Two ways to provide the LLM
  1. Server‑side LLM – an admin can set an access password and configure a shared Anthropic or OpenAI key. Users just enter the password.
  2. Personal LLM – users can plug in their own OpenAI or Anthropic API key and choose a model (the README recommends Claude sonnet‑4.5).
• Privacy‑first – API keys and passwords are stored only in the browser (or in a server‑side .env file); nothing is sent to a third‑party backend.

How to try it

1. Open the hosted demo at https://ai-draw-nexus.aizhi.site (or run locally).
2. Click “配置 LLM” to add your API key or use the “访问密码” button if the server admin has provided one.
3. Type a description in the input box and watch the diagram appear.
4. Edit the result on the Excalidraw canvas – move elements, change colors, add annotations.

Running it yourself

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

# install (pnpm recommended)
pnpm install

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

If you want the shared LLM mode, copy .env.example to .env and fill in:

• ACCESS_PASSWORD
• SERVER_LLM_TYPE (openai or anthropic)
• SERVER_LLM_BASE_URL
• SERVER_LLM_API_KEY
• SERVER_LLM_MODEL

Tech stack – Next.js 16, React 19, Excalidraw, Tailwind CSS 4, Monaco editor for the prompt box.

License – MIT.

Who might benefit – product designers, engineers, educators, or anyone who needs quick, clean diagrams without learning a drawing tool. The AI handles layout, letting users focus on content.