DiagramPilot AI.
A production-ready, AI-native assistant that helps developers and software architects convert natural language descriptions into interactive Mermaid.js diagrams with real-time canvas tools.
Overview & Purpose
Designing system architecture diagrams manually in drag-and-drop design tools is time-consuming and quickly becomes out of sync with code. DiagramPilot AI bridges this gap by allowing engineers to describe database relations, microservice communications, or authentication flows in plain text, instantly generating structured Mermaid.js blueprints.
Architecture & Stack
Built as a unified full-stack Next.js application with zero separate backend requirements:
- Frontend: Next.js App Router, React 19, Tailwind CSS v4, Zustand for client state, and Mermaid.js for SVG vector rendering.
- Backend Proxy: Next.js API routes (
/api/chat) proxying requests to Google Gen AI SDK (Gemini 2.0 / 3.5 Flash) with strict Zod schema validation. - Interactive Canvas: Custom viewer featuring pan, zoom, rotate, fit-to-screen, and SVG export.
- State & History: Version history tracking allowing instant rollback across iterative diagram revisions.
Local Setup & Installation
Clone the repository and launch the full-stack server with one command:
Production Features
Zero raster distortion with pure SVG rendering
Pan, zoom, fit, rotate, and export controls
Instant rollback across diagram iterations