AI-Powered Mermaid Diagram Generator

Project Overview

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 code-highlight// 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 code-highlight'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 code-highlight// 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

Sequence Diagrams

Entity Relationship Diagrams

Class Diagrams

Gantt Charts

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

• 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