AI-Powered Mermaid Diagram Generator

Project Overview

flowchart LR
    User([User]) --> UI[Web Interface]
    UI --> API[API Endpoint]
    API --> OpenAI[(OpenAI API)]
    OpenAI --> API
    API --> UI
    UI --> Mermaid[Mermaid Renderer]
    Mermaid --> Export[Export Module]
    
    classDef primary fill:#3498db,stroke:#2980b9,color:white;
    classDef secondary fill:#2ecc71,stroke:#27ae60,color:white;
    classDef tertiary fill:#f39c12,stroke:#e67e22,color:white;
    
    class UI,Mermaid primary;
    class API,OpenAI secondary;
    class Export tertiary;
  

Key Features

• Natural Language Input: Describe diagrams in plain English
• Multiple Diagram Types: Support for flowcharts, sequence diagrams, class diagrams, and more
• Diagram Type Selection: Option to specify the type of diagram you want to create
• Export Options: Download diagrams as SVG or PNG
• Code Access: View and copy the generated Mermaid code
• Regeneration: Easily regenerate or refine diagrams
• Example Gallery: Browse examples of different diagram types
• Educational Resources: Learn about Mermaid syntax and diagram best practices

Technical Implementation

Core Components

1. User Interface

• A text input area for diagram descriptions
• Diagram type selection dropdown
• Generate/regenerate buttons
• Real-time diagram preview
• Download and copy options
• Example prompts for inspiration

2. API Endpoint

javascript// API endpoint for diagram generation
export async function POST(request) {
  // Parse request
  const { prompt, diagramType } = await request.json();
  
  // Create instructions based on diagram type
  let instructions = diagramType
    ? `Create a Mermaid diagram of type '${diagramType}'...`
    : 'Create an appropriate Mermaid diagram...';
  
  // Call OpenAI API with tailored prompt
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages: [
        {
          role: 'system',
          content: 'You are a diagram generator specialized in creating Mermaid diagrams...'
        },
        {
          role: 'user',
          content: `${instructions}\n\nDescription: "${prompt}"\n\n...`
        }
      ],
      temperature: 0.7,
      max_tokens: 2048,
    }),
  });
  
  // Process and return the diagram code
  const data = await response.json();
  const mermaidCode = data.choices[0].message.content.trim();
  
  // Clean up the code
  const cleanedMermaidCode = mermaidCode
    .replace(/^```mermaid\n/g, '')
    .replace(/^```\n/g, '')
    .replace(/\n```$/g, '')
    .trim();
  
  return NextResponse.json({ mermaidCode: cleanedMermaidCode });
}

3. Mermaid Renderer

javascript'use client';

import React, { useEffect, useRef, useState } from 'react';
import { Box, Typography, Paper, CircularProgress } from '@mui/material';

const MermaidDiagram = ({ chart, title, caption }) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const containerRef = useRef(null);

  useEffect(() => {
    const renderDiagram = async () => {
      try {
        setLoading(true);
        
        // Import mermaid dynamically
        const mermaid = (await import('mermaid')).default;
        
        // Initialize mermaid with configuration
        mermaid.initialize({
          startOnLoad: false,
          theme: document.documentElement.classList.contains('dark') 
            ? 'dark' 
            : 'default',
        });
        
        // Generate SVG
        const { svg } = await mermaid.render(
          `mermaid-diagram-${Math.random().toString(36).substr(2, 9)}`, 
          chart
        );
        
        // Add SVG to container
        if (containerRef.current) {
          containerRef.current.innerHTML = svg;
        }
        
        setLoading(false);
      } catch (err) {
        console.error('Error rendering Mermaid diagram:', err);
        setError(`Error rendering diagram: ${err.message}`);
        setLoading(false);
      }
    };
    
    renderDiagram();
  }, [chart]);

  // Component rendering logic...
};

export default MermaidDiagram;

4. Export Module

javascript// PNG export functionality
const captureAsPNG = async () => {
  if (!diagramRef.current) return;
  
  try {
    // Dynamically import html-to-image for client-side only
    const htmlToImage = await import('html-to-image');
    
    // Create a PNG from the diagram container
    const dataUrl = await htmlToImage.toPng(diagramRef.current, { 
      quality: 0.95,
      backgroundColor: 'white'
    });
    
    // Create a download link and trigger the download
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = 'diagram.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // Show success message
    setSnackbarMessage('Diagram downloaded as PNG');
    setSnackbarOpen(true);
  } catch (error) {
    console.error('Error capturing diagram as PNG:', error);
    setError('Failed to download diagram as PNG');
  }
};

Diagram Type Examples

Flowcharts

flowchart TD
    Start([Start]) --> Auth{Authenticated?}
    Auth -->|Yes| Dashboard[Dashboard]
    Auth -->|No| Login[Login Page]
    Login --> Credentials{Valid?}
    Credentials -->|Yes| Dashboard
    Credentials -->|No| Login
    Dashboard --> Logout([End])
  

Sequence Diagrams

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: Request Data
    activate API
    API->>DB: Query Data
    activate DB
    DB-->>API: Return Results
    deactivate DB
    API-->>User: Response
    deactivate API
  

Entity Relationship Diagrams

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int id
        date created_at
    }
  

Class Diagrams

classDiagram
    class User {
        +String username
        +String email
        +login()
        +logout()
    }
    class Post {
        +String title
        +String content
        +Date created
        +publish()
    }
    User "1" --> "*" Post: creates
  

Gantt Charts

gantt
    title Project Schedule
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements    :a1, 2023-01-01, 10d
    Design          :a2, after a1, 15d
    section Development
    Implementation  :a3, after a2, 25d
    Testing         :a4, after a3, 10d
  

AI Prompt Engineering

1. System Role: The AI is assigned a specialized role as a diagram generator
2. Type-Specific Instructions: Different instructions based on the diagram type
3. Clear Guidelines: Explicit instructions on style, organization, and syntax
4. Focused Output: Instructions to return only the Mermaid code

User Experience Design

flowchart TD
    subgraph "User Flow"
    A[Enter Description] --> B[Select Diagram Type]
    B --> C[Generate Diagram]
    C --> D{Satisfied?}
    D -->|No| E[Edit or Regenerate]
    E --> C
    D -->|Yes| F[Export or Copy]
    end
    
    style A fill:#bbdefb,stroke:#2196f3,stroke-width:2px
    style B fill:#bbdefb,stroke:#2196f3,stroke-width:2px
    style C fill:#c8e6c9,stroke:#4caf50,stroke-width:2px
    style D fill:#ffecb3,stroke:#ffc107,stroke-width:2px
    style E fill:#ffccbc,stroke:#ff5722,stroke-width:2px
    style F fill:#d1c4e9,stroke:#673ab7,stroke-width:2px
  

• Progressive Disclosure: Complex options are hidden until needed
• Instant Feedback: Real-time diagram rendering
• Error Handling: Clear error messages and recovery options
• Example Library: Ready-to-use examples for inspiration
• Educational Content: Tips and explanations for better results

Challenges and Solutions

Challenge 1: Inconsistent AI Outputs

Challenge 2: Diagram Complexity Management

Challenge 3: Export Quality

Real-World Applications

Example

1. Software Documentation: Create architecture diagrams, component relationships, and process flows
2. Project Planning: Develop Gantt charts and workflow diagrams
3. Database Design: Generate entity-relationship diagrams
4. Educational Materials: Create visual explanations for technical concepts
5. Presentations: Add professional diagrams to slide decks
6. Technical Discussions: Quickly visualize ideas during meetings

Future Enhancements

1. Diagram Editing: Direct editing of generated diagrams
2. Theme Customization: More control over colors and styles
3. Diagram Library: Save and reuse frequently used diagrams
4. Collaborative Editing: Real-time collaboration on diagrams
5. Integration API: Embed the generator in other applications
6. Enhanced Styling: More advanced styling options for diagrams

Conclusion