🧜‍♀️ Mermaid Diagram Viewer

A beautiful, responsive web application for creating and visualizing Mermaid diagrams with real-time preview, multiple themes, and export capabilities.

✨ Features

• Real-time Preview: See your diagrams update as you type with intelligent debouncing
• Multiple Themes: Choose from various diagram themes (default, dark, forest, neutral) and UI themes (light, dark, system)
• File Import: Load existing Mermaid diagrams from .md, .mmd, .mermaid, .txt, or .json files
• SVG Export: Download your diagrams as SVG files for use in presentations or documentation
• Responsive Design: Resizable panels with full mobile support
• Keyboard Shortcuts:
  • Ctrl/Cmd + Enter: Render diagram
  • Ctrl/Cmd + S: Download as SVG
• Dark Mode: Full dark mode support with optimized color schemes for better visibility
• No Installation Required: Runs entirely in the browser with no backend dependencies

🚀 Quick Start

Option 1: Direct Browser Opening

Simply open the index.html file in your web browser:

open index.html

Option 2: Local Web Server

For a better development experience, serve the file using a local web server:

Using Python:

python3 -m http.server 8000
# Navigate to http://localhost:8000

Using Node.js:

npx http-server -p 8000
# Navigate to http://localhost:8000

Using PHP:

php -S localhost:8000
# Navigate to http://localhost:8000

📖 Usage

1. Write Your Diagram: Enter Mermaid syntax in the left editor panel
2. Preview in Real-time: Your diagram renders automatically in the right panel
3. Customize Appearance:
   • Use the UI theme selector to switch between light/dark modes
   • Choose a diagram theme that suits your needs
4. Load External Files: Click "Load File" to import existing diagrams
5. Export Your Work: Click "Download SVG" to save your diagram

Example Diagram

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]

Loading

🎨 Supported Diagram Types

This viewer supports all Mermaid diagram types including:

• Flowcharts: Basic flow diagrams with various node shapes
• Sequence Diagrams: Interaction between actors over time
• Gantt Charts: Project timeline visualization
• Class Diagrams: Object-oriented design representation
• State Diagrams: State machine visualization
• Entity Relationship Diagrams: Database schema design
• User Journey Maps: User experience visualization
• Pie Charts: Statistical data representation
• Git Graphs: Git branch and commit visualization
• Quadrant Charts: Four-quadrant analysis
• Timeline Diagrams: Chronological event display
• Mind Maps: Hierarchical information organization
• Sankey Diagrams: Flow quantity visualization

📁 File Format Support

Markdown Files (.md)

The viewer automatically extracts Mermaid code blocks from Markdown files:

# My Document

Some text here...

```mermaid
graph TD
    A --> B

More text...

### Direct Mermaid Files
- `.mmd` - Mermaid diagram files
- `.mermaid` - Alternative Mermaid extension
- `.txt` - Plain text files with Mermaid syntax

### JSON Configuration
Load diagrams from JSON files with structure:
```json
{
  "mermaid": "graph TD\n  A --> B",
  "theme": "dark"
}

⚙️ Browser Compatibility

• ✅ Chrome/Edge (Latest)
• ✅ Firefox (Latest)
• ✅ Safari (Latest)
• ✅ Opera (Latest)
• ✅ Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

📄 License

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

🙏 Acknowledgments

• Mermaid.js - The amazing diagramming library that powers this viewer
• All contributors who help improve this tool

🐛 Bug Reports & Feature Requests

Found a bug or have a feature request? Please open an issue on GitHub.

📊 Project Status

This project is actively maintained. Feel free to use it in production environments.

---

Made with ❤️ for the developer community