An AI-enhanced whiteboard application based on Excalidraw, supporting Mermaid diagram conversion and multiple AI model integrations.
| Link | Description |
|---|---|
| π Live Demo | Try AGNX Excalidraw now |
| π Documentation | Detailed docs and API reference |
| π» GitHub Repository | Source code and issues |
No API key? No problem! We provide free AI models via iFlow platform:
- GLM-4-Air - Zhipu AI's model with excellent Chinese understanding
- Kimi K2 - Moonshot AI's latest model with strong reasoning capabilities
π Get your free API key: https://platform.iflow.cn/profile?tab=apiKey
- π¨ Excalidraw Canvas - Full Excalidraw drawing capabilities
- π€ AI Chat - Support for multiple AI models (OpenAI, Anthropic, Gemini, iFlow free models, etc.)
- π Mermaid Support - Automatically convert Mermaid code to Excalidraw graphics
- πΎ Local Storage - Auto-save diagrams to browser local storage
- π Dark Mode - Light/dark theme switching
- π One-Click Deploy - Deploy to Vercel with one click
- Node.js >= 18.0.0
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/duo121/agnx-excalidraw.git
cd agnx-excalidraw
# Install dependencies
pnpm install
# Start development server
pnpm devCreate a .env or .env.local file in the project root:
# AI model configuration (at least one required)
OPENAI_API_KEY=your_openai_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
GEMINI_API_KEY=your_gemini_api_key
DEEPSEEK_API_KEY=your_deepseek_api_key
# Optional: Custom model configuration
VITE_PROVIDER_TYPE=openai
VITE_BASE_URL=https://api.openai.com/v1
VITE_MODEL=gpt-4o-mini# Build for production
pnpm build
# Preview build
pnpm preview- Click the AI icon in the right toolbar to open the AI panel
- Enter your request, e.g., "Draw a user login flowchart"
- AI will generate Mermaid code and convert it to Excalidraw graphics
- Select "Mermaid" mode in the AI panel
- Enter or let AI generate Mermaid code
- Click "Convert" to transform code into graphics
Supported Mermaid diagram types:
- Flowchart
- Sequence Diagram
- Class Diagram
- State Diagram
- ER Diagram
- Gantt Chart
| Provider | Environment Variable | Default Model |
|---|---|---|
| OpenAI | OPENAI_API_KEY |
gpt-4o-mini |
| Anthropic | ANTHROPIC_API_KEY |
claude-3-sonnet |
| Google Gemini | GEMINI_API_KEY |
gemini-pro |
| DeepSeek | DEEPSEEK_API_KEY |
deepseek-chat |
| iFlow (Free) | Configure in Settings | glm-4-air, kimi-k2 |
π Free option: Get free API key from https://platform.iflow.cn/profile?tab=apiKey
- Environment variables with
VITE_prefix are exposed to the client *_API_KEYvariables are NOT injected in production builds (for security)
Click the button below to deploy to Vercel:
- Fork this repository to your GitHub account
- Import the project in Vercel
- Configure environment variables in Vercel dashboard
- Deploy!
pnpm dev # Start dev server
pnpm typecheck # Type checking
pnpm build # Build for production
pnpm preview # Preview build- Framework: React 19 + TypeScript
- Build Tool: Vite 7
- Styling: Tailwind CSS
- Canvas: Excalidraw
- Diagrams: Mermaid
- Routing: React Router DOM
Contributions are welcome! Please see CONTRIBUTING.md for details.
- Fork the project
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Excalidraw - Excellent hand-drawn style whiteboard tool
- Mermaid - Text-based diagram generation tool
- Vercel - Excellent deployment platform
If you have any questions or suggestions, feel free to reach out:
- π Submit a GitHub Issue
- π¬ Add me on WeChat
