Mermaid Visualizer

A beautiful React application for creating and visualizing Mermaid diagrams with an interactive editor and real-time preview.

Features

• Interactive Code Editor: Real-time editing of Mermaid diagram code
• Live Preview: Instant diagram rendering with error handling
• Template Library: Quick start with Flowchart, Sequence, Pie Chart, Gantt, and Class Diagram templates
• Zoom & Pan: Interactive diagram navigation with zoom controls
• Fullscreen Mode: Dedicated view for detailed diagram inspection
• Export Options: Copy code to clipboard and download diagrams as SVG
• Responsive Design: Works seamlessly on desktop and mobile devices
• Touch Support: Pan and pinch-to-zoom for mobile devices

Getting Started

Prerequisites

• Node.js (version 16 or higher)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/sravanth-space/mermaid.git
cd mermaid

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

This creates a dist folder with the built application ready for deployment.

Deployment

The application is automatically deployed to GitHub Pages at mermaid.sravanth.co.uk when changes are pushed to the main branch. The deployment workflow:

1. Builds the React application using Vite
2. Deploys the static files to GitHub Pages
3. Uses the custom domain configured in the CNAME file

Preview Production Build

npm run preview

Usage

1. Edit Code: Use the left panel to write or edit Mermaid diagram code
2. Quick Start: Click any template button to load pre-built diagram examples
3. Navigate: Use zoom controls to zoom in/out, reset view, or go fullscreen
4. Export: Copy the code or download the diagram as SVG
5. Mobile: Use touch gestures to pan and pinch-to-zoom on mobile devices

Technology Stack

• React 18: Modern React with hooks
• Vite: Fast build tool and development server
• Tailwind CSS: Utility-first CSS framework
• Lucide React: Beautiful icon library
• Mermaid.js: Diagram generation library

Diagram Types Supported

• Flowcharts
• Sequence diagrams
• Pie charts
• Gantt charts
• Class diagrams
• And many more Mermaid diagram types

License

This project is licensed under the MIT License - see the LICENSE file for details.