Mermaid Diagram Downloader (Next.js)

A modern Next.js application that allows you to create and download Mermaid diagrams in PNG and JPEG formats.

Features

• Live Preview: See your Mermaid diagrams rendered in real-time
• Multiple Formats: Download diagrams as PNG or JPEG
• Example Templates: Pre-built examples for different diagram types
• Responsive Design: Works on desktop and mobile devices
• Modern UI: Clean, intuitive interface with gradient backgrounds
• TypeScript Support: Full type safety and IntelliSense
• React Hooks: Modern React patterns with useState and useEffect
• SSR Compatible: Server-side rendering support with dynamic imports

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Install Dependencies:

   npm install
   # or
   yarn install

2. Run Development Server:

   npm run dev
   # or
   yarn dev

3. Open Application: Navigate to http://localhost:3000

How to Use

1. Enter Code: Type or paste your Mermaid diagram code in the left panel
2. Select Format: Choose PNG or JPEG from the dropdown
3. Render: Click "Render Diagram" or wait for auto-render (1 second delay)
4. Download: Click "Download" to save your diagram

Supported Diagram Types

• Flowcharts: Process flows and decision trees
• Sequence Diagrams: Interaction between actors
• Gantt Charts: Project timelines and schedules
• Class Diagrams: Object-oriented relationships
• And more: Any valid Mermaid diagram syntax

Example Diagrams

The application includes example buttons for:

• Flowchart: Basic process flow
• Sequence: Actor interactions
• Gantt: Project timeline
• Class: Object relationships

Technical Details

• Next.js 14: Latest Next.js with App Router
• React 18: Modern React with hooks
• TypeScript: Full type safety
• Mermaid.js: For diagram rendering
• html2canvas: For image conversion
• Dynamic Imports: SSR-compatible library loading

Development

# Development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

File Structure

Mermaid-Downloader/
├── app/
│   ├── globals.css     # Global styles
│   ├── layout.tsx      # Root layout
│   └── page.tsx        # Main page component
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration
├── next.config.js      # Next.js configuration
└── README.md          # This file

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge

Tips

• Use the example buttons to quickly try different diagram types
• The application auto-renders as you type (with a 1-second delay)
• Higher quality downloads are generated with 2x scaling
• All diagrams are rendered with a white background for clean downloads
• Libraries are dynamically imported to avoid SSR issues

Notes

Vibed up 👽