Building MermaidAI: An AI Diagram Studio with Gemini 3.6

Visualizing system architecture, sequence workflows, and database schemas is central to engineering design reviews. However, manually crafting diagram code—especially in declarative syntax like Mermaid.js—often leads to syntax errors, layout frustrations, and constant context switching between code editors and preview tools.

To streamline this workflow, I created MermaidAI Studio: an open-source, AI-powered diagram studio and interactive visual workspace built with Next.js 15 (App Router), React 19, Google Gemini 3.6 Flash, Monaco Editor, and Mermaid.js v11.

🎬 Demo Showcase

The Vision Behind MermaidAI Studio

Traditional text-to-diagram generators are often glorified textboxes with standard previews. If the LLM generates a syntax error—such as an unescaped bracket or broken node linkage—the diagram silently breaks, leaving the developer to debug raw code.

MermaidAI Studio addresses this with an end-to-end studio experience designed specifically for engineers:

1. Natural Language Intent: Describe any distributed pipeline, ER model, or OAuth sequence in plain English to generate clean Mermaid.js syntax.
2. Self-Healing Syntax Banner: Automated client and server-side pre-processing (autoFixMermaidCode) detects render failures and exposes an instant "Fix with AI" resolution workflow.
3. Interactive Visual Viewport: Smooth pan, drag, and zoom (40% to 300%) canvas controls built directly around rendered SVG outputs.
4. Professional Editor Integration: A collapsible Monaco Code Editor featuring live bi-directional sync, custom dark themes, and smooth line-number carets.

Architectural Deep Dive & Key Features

 [User Prompt / Refactor Action]
              │
              ▼
   [Next.js 15 API Route] ──► [Gemini 3.6 Flash Model]
              │
              ▼ (autoFixMermaidCode Sanitizer)
  [Monaco Code Editor] ◄────► [Mermaid.js v11 Renderer]
                                       │
                                       ▼
                          [Interactive SVG Canvas]

1. Gemini 3.6 Flash Integration & Prompt Engineering

The system uses @google/genai to stream diagram updates directly from Google Gemini 3.6 Flash. Low latency combined with structural system prompts ensures generated outputs strictly adhere to valid Mermaid v11 syntax specs without Markdown wrapper noise.

2. Floating AI Copilot & Architecture Presets

Rather than forcing developers to re-type complex prompts when iterating on architecture, MermaidAI Studio provides in-canvas floating presets:

• Add Cache Layer: Injects Redis caching tiers into existing API workflows.
• Error Handling: Adds fallback paths, circuit breakers, and dead-letter queues.
• Metrics Node: Integrates Prometheus/Grafana monitoring telemetry nodes.
• Simplify Layout: Cleans up diagram directions (e.g. TD vs LR) for readability.

3. Self-Healing Code Pipeline

Syntax validation occurs before and during DOM mounting. When Mermaid's parser hits an invalid node or mismatched arrow token, the UI captures the syntax exception message and feeds it back to Gemini 3.6 Flash to self-correct the diagram in real time.

4. High-Resolution SVG & HD PNG Exports

Exporting clean graphics for documentation or slide decks is painless. MermaidAI Studio handles font-import sanitization during rasterization, allowing 1-click downloads in raw SVG or 2x High-Definition PNG.

🛠️ Technical Stack Summary

Open Source & Try It Out

MermaidAI Studio is fully open source. You can explore the codebase, run it locally with your Gemini API key, or contribute to its feature set.

• 🌐 GitHub Repository: adnanahmaddev/mermaid-ai
• 🎬 YouTube Demo Video: Watch the Showcase Video