Mermaid Visualizer

A beautiful React + TypeScript 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 22 (see .nvmrc)
• yarn

Installation

1. Clone the repository:

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

2. Install dependencies:

yarn install

3. Start the development server:

yarn dev

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

Building for Production

yarn build

This type-checks the project (tsc -b) and then creates a dist folder with the built application ready for deployment.

Type Checking and Linting

yarn typecheck
yarn lint

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

yarn 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 19: Modern React with hooks
• TypeScript: Type-safe components in strict mode
• 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.