Live Experience: https://modern-mermaid.live/

(back to top)

• 10+ Beautiful Themes: Linear Light/Dark, Industrial, Hand Drawn, Studio Ghibli, Retro, and more
• Custom Backgrounds: Gradient, solid colors, and patterns
• Font Selection: Multiple professional fonts including Fira Code, JetBrains Mono, and more
• Dark Mode: Full dark mode support with automatic theme switching

• Syntax Highlighting: Real-time Mermaid syntax highlighting with color-coded keywords
• Line Numbers: Clear line numbering for easy reference
• Auto-completion: Smart suggestions for Mermaid syntax
• Resizable Panels: Adjustable editor and preview pane sizes

• High-Quality Export: Export diagrams in PNG (transparent) or JPG (with background)
• Clipboard Copy: One-click copy diagrams to clipboard with/without background
• Custom Resolution: Export at 3x resolution for crystal-clear images
• Batch Export: Export multiple diagrams at once

• Drawing Tools: Arrows, rectangles, circles, lines, and text annotations
• Color Customization: Customize annotation colors to match your theme
• Multi-language Support: Interface available in 6 languages

• Live Preview: Real-time rendering as you type
• Auto-scaling: Diagrams automatically scale to fit the viewport
• Zoom & Pan: Smooth zoom and pan controls with mouse/trackpad
• Fullscreen Mode: Distraction-free editing experience
• Node Coloring: Right-click on nodes to change colors

• Flowcharts & Flow Diagrams
• Sequence Diagrams
• Class Diagrams
• State Diagrams
• Entity Relationship Diagrams
• User Journey Diagrams
• Gantt Charts
• Pie Charts
• Git Graphs
• Mindmaps
• Timeline Diagrams
• Quadrant Charts
• XY Charts
• And more!

Click to expand screenshots

Main Interface

Themes

Brutalist	Cyberpunk	Ghibli
Merphis	Spotless	HandDrawn

(back to top)

• Node.js 20.19+ or 22.12+
• npm, pnpm, or yarn

# Clone the repository
git clone https://github.com/gotoailab/modern_mermaid.git
cd modern_mermaid

# Install dependencies (using pnpm recommended)
pnpm install

# Or using npm
npm install

# Or using yarn
yarn install

# Start development server
pnpm dev

# The app will be available at http://localhost:5173

# Build for production
pnpm build

# Preview production build
pnpm preview

(back to top)

1. Enter Mermaid Code: Type your Mermaid diagram code in the left editor panel
2. See Live Preview: The diagram renders in real-time on the right
3. Customize: Choose themes, backgrounds, and fonts from the toolbar
4. Annotate: Use annotation tools to highlight important parts
5. Export: Download or copy your diagram in your preferred format

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

More examples available in the examples directory.

(back to top)

We love contributions! Here's how you can help:

• 🐛 Report Bugs: Open an issue describing the bug
• 💡 Suggest Features: Share your ideas for new features
• 📝 Improve Documentation: Help us improve our docs
• 🌍 Translations: Add support for more languages
• 💻 Code Contributions: Submit pull requests

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

• Follow the existing code style
• Run pnpm lint before committing
• Write meaningful commit messages
• Add tests for new features

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

• Mermaid.js - Amazing diagram library
• React - UI framework
• Tailwind CSS - Styling framework
• Vite - Build tool
• All our contributors

• 🌐 Website: modern-mermaid.live
• 💬 Discord: Join our community
• 🐛 Issues: GitHub Issues
• 📧 Email: chg80333@gmail.com
• 𝕏 𝕏（Twitter）: @chg80333