Draw Professional Charts with Natural Language
Visit our online website to use directly: https://smart-excalidraw.aizhi.site/
Operation Interface
Technical Architecture Diagram
Infographic
Powered by advanced large language models to understand your requirements and generate professional-grade charts with clear structure and logical layout.
Featuring a proprietary intelligent arrow optimization algorithm that automatically calculates optimal connection points, ensuring charts are well-organized and logically clear, eliminating messy line crossings.
Supports 20+ chart types, including flowcharts, architecture diagrams, sequence diagrams, ER diagrams, mind maps, and more. AI can also automatically select the most suitable chart type based on your description.
Generated charts are fully based on Excalidraw format, allowing free editing, style adjustments, and detail additions on the canvas—achieving the perfect combination of AI generation and manual refinement.
Simply configure an AI API key to get started, no complex environment setup required. All configurations are stored locally in your browser for privacy and security.
Now supports both Chinese and English interfaces, making it accessible to a global audience.
If the server administrator has configured an access password, you can directly use the server-side LLM configuration without providing your own API Key:
- Click the "Access Password" button in the top right corner
- Enter the access password provided by the administrator
- Click "Validate Password" to test the connection
- Check "Enable Access Password" and save
Once enabled, the application will prioritize the server-side configuration, and you can start creating without configuring your own API Key!
- Click the "Configure LLM" button in the top right corner
- Select provider type (OpenAI or Anthropic)
- Enter your API Key
- Select model (Highly recommend claude-sonnet-4.5 for best results)
- Save configuration
That's it! You're ready to start creating.
Describe your needs in natural language in the input box, for example:
- "Draw a user login flowchart"
- "Create a microservices architecture diagram including gateway, authentication service, and business services"
- "Design a database ER diagram for an e-commerce system"
AI will automatically generate the chart, which you can directly edit and adjust on the canvas.
If you want to run the project locally:
# Clone the project
git clone https://github.com/liujuntao123/smart-excalidraw-next.git
cd smart-excalidraw-next
# Install dependencies
pnpm install
# Start development server
pnpm devVisit http://localhost:3000 to start using.
If you want to provide a unified LLM configuration for users and avoid requiring them to obtain their own API Keys, you can configure the server-side access password feature:
- Copy the environment variables example file:
cp .env.example .env- Configure the following variables in
.env:
# Access password (users need to enter this password to use server-side LLM)
ACCESS_PASSWORD=your-secure-password
# LLM provider type (openai or anthropic)
SERVER_LLM_TYPE=anthropic
# API base URL
SERVER_LLM_BASE_URL=https://api.anthropic.com/v1
# API key
SERVER_LLM_API_KEY=sk-ant-your-key-here
# Model name
SERVER_LLM_MODEL=claude-sonnet-4-5-20250929- Restart the development server, and users can use the server-configured LLM through the access password.
Benefits:
- Users don't need to apply for and configure their own API Keys
- Centralized management of API usage and costs
- Suitable for team or organizational internal use
- Provide free trial experience to users
- OpenAI: GPT-4, GPT-3.5 and other compatible models
- Anthropic: Claude-3.5-Sonnet, Claude-3-Opus and other compatible models
- Get API keys from your chosen provider
- Configure base URL (use default or custom endpoint)
- Select appropriate model
- All configurations are stored locally and securely
Q: Which AI model is recommended? A: claude-sonnet-4.5 is highly recommended for best performance in understanding requirements and generating charts.
Q: Is data secure? A: All configuration information is stored only in your local browser and never uploaded to any servers.
Q: What chart types are supported? A: Supports 20+ types including flowcharts, architecture diagrams, sequence diagrams, ER diagrams, mind maps, network topology diagrams, etc. AI will automatically select the most suitable type.
Q: Can generated charts be modified? A: Absolutely! After generation, you can freely edit on the Excalidraw canvas, including adjusting positions, modifying styles, adding elements, and more.
Q: What is the access password feature? A: The access password feature allows server administrators to configure a unified LLM. Users only need to enter the password to use it, without needing to apply for their own API Key. When access password is enabled, the server-side configuration takes priority over local configuration.
Q: What is the priority between access password and local configuration? A: If access password is enabled, the system will prioritize the server-side LLM configuration. Local configured API Keys will only be used when access password is not enabled.
Q: Does it support multiple languages? A: Yes! The interface now supports both Chinese and English, with automatic language detection based on browser settings.
Next.js 16 · React 19 · Excalidraw · Tailwind CSS 4 · Monaco Editor · next-intl
This project supports multiple languages:
- 🇨🇳 Chinese (Simplified) - Default
- 🇺🇸 English
Language is automatically detected based on your browser settings, or you can access different language versions:
- Chinese:
http://localhost:3000/zh - English:
http://localhost:3000/en
MIT License
Draw Professional Charts with Natural Language - Making visual creation simple again