Build a Free AI Diagramming Tool and Stop Hand‑Drawing Architecture Charts

next-ai-draw-io

next-ai-draw-io is a pure‑frontend application built with Next.js that integrates AI models (OpenAI, DeepSeek, etc.) to generate flowcharts, sequence diagrams, and mind maps from textual prompts. The generated diagrams are exported in draw.io format and remain editable.

Getting Started

Configuration

After cloning the repository, copy env.example to .env.local and set the default large model, e.g. AI_PROVIDER=openai and AI_MODEL=gpt-4o.

Compile and Run

git clone https://github.com/DayuanJiang/next-ai-draw-io
cd next-ai-draw-io
npm install
cp env.example .env.local
npm run dev

Docker alternative:

docker run -d -p 3000:3000 \
  -e AI_PROVIDER=openai \
  -e AI_MODEL=gpt-4o \
  -e OPENAI_API_KEY=your_api_key \
  ghcr.io/dayuanjiang/next-ai-draw-io:latest

Using an environment file:

cp env.example .env
docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest

Access the UI at http://localhost:3000 and adjust model settings.

MCP Service

The project provides an MCP (Model Configuration Provider) service that can return diagrams in Mermaid format.

{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@next-ai-drawio/mcp-server@latest"]
    }
  }
}

Vercel Free Deployment

Because the app is a Next.js project, it can be deployed on Vercel under the Hobby plan.

Fork the repository at https://github.com/DayuanJiang/next-ai-draw-io.

Import the forked repository into Vercel (login with GitHub).

Set environment variables, for example:

AI_PROVIDER=deepseek
AI_MODEL=deepseek-chat
DEEPSEEK_API_KEY=your_key
DEEPSEEK_BASE_URL=https://api.deepseek.com

Deploy; Vercel provides a xxx.vercel.app URL within 1‑2 minutes.

Custom domains can be pointed to Vercel’s IP 76.76.21.21 via the Settings → Domain → Add Domain flow. Example custom domain: https://drawio.xiaofucode.com/zh.

Summary

AI‑generated drafts reduce manual diagram creation time from roughly half an hour to a few minutes. Remaining adjustments may be needed for color schemes, layout, and very large diagrams.