mermaid.leularia.com
Mermaid AI | Build Diagrams With AI
AI diagram generator reducing design time from 30min to 5min using Gemini Flash 2.0. Generates sequence diagrams, DB schemas, UML from natural language.
Problem Statement
Designers and developers spend 30+ minutes creating technical diagrams manually, slowing down documentation and planning workflows.
Solution
Built an AI-powered Mermaid.js playground that converts natural language descriptions into production-ready diagrams instantly, with safe AI code generation.
Technical Stack
Frontend
Backend
Deployment
Key Metrics
My Role
Sole developer - Full stack implementation, AI integration, and deployment
Challenges & Solutions
Integrating Gemini API safely while maintaining code quality and preventing prompt injection attacks. Optimized for latency (50ms mean) and cost ($0.03 per diagram) through model selection and prompt optimization. Implemented rate limiting and graceful degradation to handle 1M+ diagrams annually.
System Architecture
Overview
Built on Tanstack Start with server-side rendering for optimal performance. Gemini 2.0 Flash API integration with prompt sanitization layer to prevent injection attacks.
Performance Optimization
Implemented Redis caching for frequently generated diagrams, reducing API calls by 60%. Optimized prompt engineering reducing token usage by 40%, cutting costs from $0.15 to $0.03 per diagram.
Scalability
Designed for horizontal scaling with stateless architecture. Handles concurrent users through request queuing and rate limiting. Supports 1M+ diagrams annually with single-digit second response times.
Reliability
Achieved 99.2% API uptime through retry logic, circuit breakers, and fallback mechanisms. Graceful degradation when API is unavailable.