This project addresses the generation of professional Draw.io diagrams from natural language descriptions or reference images. It targets engineers and researchers seeking to automate diagram creation, offering a significant time-saving benefit by producing editable, structured charts in seconds.

How It Works

The system integrates Next.js 16, Draw.io embed, and streaming LLM calls. Users provide text prompts or upload images; LLMs then generate diagram code (JSON/XML). This code is simultaneously displayed in a Monaco Editor for fine-tuning and rendered in an embedded Draw.io canvas for visual adjustments. Key advantages include a native LLM drawing experience with streaming output and multi-modal input capabilities.

Quick Start & Requirements

• Install: Clone the repository, cd smart-drawio-next, run pnpm install, then pnpm dev.
• Prerequisites: Node.js ≥ 18.18, pnpm ≥ 8, and a valid OpenAI/Anthropic compatible API Key (or server-side configuration).
• Access: Local development runs at http://localhost:3000. An online demo is available at https://smart-drawio-next.vercel.app/ (requires API key).

Highlighted Details

• LLM Native Drawing: Features streaming generation progress, "continue generation" for long content, and automatic or manual chart type selection.
• Multi-modal Input: Accepts PNG/JPG/WebP/GIF uploads (≤5MB) for conversion to editable diagram data via Vision models.
• Dual Canvas Linkage: Synchronizes a Monaco code editor (JSON/XML) with an embedded Draw.io canvas, allowing seamless code-to-visual editing.
• Smart Optimization: Offers one-click fixes for common issues (e.g., arrow anchors) and advanced AI-driven layout/styling adjustments.
• Config Manager: UI for managing multiple LLM configurations (OpenAI/Anthropic compatible), including import/export and online testing, stored locally.
• UX Enhancements: Includes browser localStorage for history (20 items), notifications, and confirmation dialogs.

Maintenance & Community

This project is a fork of liujuntao123/smart-excalidraw-next. No specific community channels (e.g., Discord, Slack) or notable contributors/sponsorships are detailed in the README.

Licensing & Compatibility

• License: MIT License.
• Compatibility: Permissive for use, modification, and distribution, including commercial applications, provided the copyright notice is retained.

Limitations & Caveats

Users must supply their own LLM API keys for frontend configuration, or set up a server-side access password mode. Tailwind CSS v4 is experimental. Image recognition is limited to specific formats, file sizes, and requires Vision-capable LLM models. Local history storage is capped at 20 items.