Mermaid Editor - Modern Diagram Editor

Mermaid Editor is a modern, feature-rich diagram editor built with React, TypeScript, and Vite. It provides a seamless experience for creating and editing Mermaid diagrams with real-time preview, multiple themes, and powerful sharing capabilities.

Why Use Mermaid Editor?

Creating diagrams and flowcharts is essential for documentation, presentations, and communication. Traditional diagram tools can be complex and slow. Mermaid Editor simplifies this process by providing a clean, modern interface with real-time preview, making it easy to create professional diagrams using simple text syntax.

Key Features

• Real-time Preview: See your Mermaid diagrams update instantly as you type, providing immediate visual feedback.
• Multiple Themes: Choose from various Mermaid themes including dark mode support for comfortable editing in any environment.
• Export Options: Export diagrams as PNG, JPG, or SVG formats for use in presentations, documentation, and web pages.
• Template Library: Start with pre-built diagram templates to quickly create flowcharts, sequence diagrams, and more.
• Route-based Sharing: Share diagrams with full configuration via clean URLs that preserve all settings and configurations.
• Responsive Design: Works seamlessly on desktop and mobile devices with a touch-friendly interface.
• Keyboard Shortcuts: Efficient editing with keyboard shortcuts for power users and faster workflow.

How It Works

Once you open Mermaid Editor, you can start typing your Mermaid syntax in the editor pane. The diagram preview updates in real-time as you type, allowing you to see exactly how your diagram will look. You can choose from multiple themes, adjust settings, and export your diagrams when ready.

The sharing feature creates clean URLs that include your complete diagram configuration, making it easy to collaborate with others or save your work for later.

User Interface & Options

The editor provides an intuitive interface where you can:

• Write Mermaid syntax with syntax highlighting
• Choose from multiple app themes (light/dark mode)
• Select different Mermaid diagram themes
• Adjust font size and word wrap preferences
• Control zoom level for detailed editing
• Access template library for quick starts

Technical Details

• Built with React 19, TypeScript, and Vite for modern development
• Uses Zustand for lightweight state management
• Styled with Tailwind CSS for responsive design
• Powered by Mermaid engine for diagram generation
• React Router for client-side routing and sharing
• Lucide React for modern icons
• Optimized for performance and mobile devices

Sharing Feature

The editor supports advanced route-based sharing with clean URLs. When you share a diagram, it includes:

• Complete Diagram Code: The full Mermaid diagram syntax
• Theme Configuration: Both app theme and Mermaid theme settings
• Editor Settings: Font size and word wrap preferences
• View Settings: Current zoom level and layout

Shared URLs use the format: https://mermaid.prmworks.com/shared/[encoded-config]

Keyboard Shortcuts

• Ctrl/Cmd + S: Save diagram
• Ctrl/Cmd + E: Export diagram
• Ctrl/Cmd + T: Toggle theme

Get Started

You can start using Mermaid Editor immediately by visiting mermaid.prmworks.com. No installation required - simply open the editor in your browser and start creating diagrams. The interface is intuitive, and you can access templates to get started quickly.

---

Mermaid Editor combines the power of Mermaid syntax with a modern, user-friendly interface. Create professional diagrams effortlessly with real-time preview and seamless sharing capabilities!