Mermalaid - Free Mermaid Diagram Editor | Source-available

Mermalaid helps you create Mermaid diagrams faster, without paywalls or sign-ups. Build flowcharts, sequence diagrams, class diagrams, and more with live preview and visual editing. The source code is available under CC BY-NC-SA 4.0 (non-commercial).

🎯 Why Mermalaid

If you need a free Mermaid editor without limits, subscriptions, or account walls, Mermalaid is built for you. It stays free and source-available, with no document caps and no premium lock-in.

Key Differentiators

✅ 100% Free - No usage limits, no hidden fees, no premium upsell
✅ Source-available Codebase - Full source under CC BY-NC-SA 4.0 (non-commercial)
✅ No Sign-Up Required - Open the editor and start diagramming instantly
✅ Unlimited Diagrams - Create as many Mermaid charts as you need
✅ Professional Features - Live preview, visual editor, syntax checks, flexible export, and private share links
✅ Privacy-First - Your diagrams stay local; no cloud sync required
✅ Web & Desktop - Use it in your browser or as a native macOS or Windows app

🚀 Quick Start - Create Your First Mermaid Diagram

Use Online (Web Version)

Visit Mermalaid to start creating Mermaid diagrams instantly in your browser—no installation needed.

Download Desktop App (macOS and Windows)

Download the latest release from GitHub Releases
Install the .dmg file on macOS or the x64 .exe setup file on Windows
Start creating unlimited free Mermaid diagrams

The desktop app includes automatic updates: when a new version is available, you'll see a banner to update with one click.

✨ Features - Professional Editor, Zero Cost

Mermalaid includes the features teams usually pay for, while staying free to use:

Editor Features

Monaco Editor - Write Mermaid with robust syntax highlighting
Live Preview - See updates in real time with smooth debounced rendering (500ms)
Resizable Panels - Drag the divider to set the editor width; your layout is saved across sessions
Visual Editor - Drag and connect flowchart nodes, then sync changes back to code
Real-time Syntax Validation - Catch errors early and fix faster
Auto-save - Keep work in local storage so progress is not lost
Dark/Light Mode - Work comfortably in your preferred theme
beautiful-mermaid Themes - Style both diagrams and app UI with curated themes
Toast Notifications - Get clear feedback for save, export, and error actions
AI Syntax Fix - Fix broken Mermaid syntax quickly using your own OpenAI API key (stored locally on your machine)

File Management

Open Files - Import .mmd, .txt, or .md files
Live Reload (desktop) - Edit the open file in any external editor; Mermalaid re-renders on save
Save Diagrams - Export Mermaid diagrams to local files
Export Options:
- SVG Export - Vector graphics for presentations and documents
- PNG Export - Raster images for documentation and web use
ASCII Export - Unicode box-drawing for terminals (flowcharts, state, sequence, class, ER diagrams)
Copy to Clipboard - Copy Markdown-ready Mermaid blocks for docs and GitHub
Private URL Share - Copy private link stores encrypted diagram data in the URL fragment only (no upload, no server-side storage)

Mermaid Diagram Types Supported

Create diagrams across the full Mermaid ecosystem:

Flowcharts (graph, flowchart)
Sequence Diagrams (sequenceDiagram)
Class Diagrams (classDiagram, classDiagram-v2)
State Diagrams (stateDiagram, stateDiagram-v2)
Entity Relationship Diagrams (erDiagram)
User Journey (journey)
Gantt Charts (gantt)
Pie Charts (pie)
Git Graphs (gitGraph)
And More - Broad Mermaid.js coverage

Cross-Platform Support

Web Application - Works in any modern browser
Native Desktop App - Lightweight application for macOS and Windows
Vercel Hosting - Static Vite deployment with preview and production URLs

💻 Technical Excellence

Built with Modern Technologies

Tauri - Lightweight, secure, native desktop framework (~10MB vs ~100MB+ Electron apps)
React + TypeScript - Modern, type-safe UI development
Monaco Editor - The same editor that powers VS Code
beautiful-mermaid - Beautiful, themed Mermaid diagram rendering with customizable themes
@xyflow/react - Visual editor for drag-and-drop flowchart editing

Why Tauri?

Mermalaid uses Tauri instead of Electron for a superior experience:

🚀 Much smaller app size (~10MB vs ~100MB+ for Electron)
⚡ Better performance using system webview instead of bundled Chromium
🔒 Enhanced security with Rust backend
💰 Lower memory usage - Runs efficiently on any machine
🎯 Better native integration - Feels like a real native app

📚 Use Cases - When to Use Mermalaid

Mermalaid works well for:

Software Developers - Document architecture, workflows, and system design
Technical Writers - Add clear diagrams to docs and tutorials
Project Managers - Visualize processes and delivery plans
Students - Create diagrams for assignments and presentations
DevOps Engineers - Map infrastructure and deployment pipelines
Anyone - Build Mermaid diagrams without limits or subscriptions

🎨 Example Mermaid Diagrams

Try these examples in Mermalaid:

Flowchart Example

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Sequence Diagram Example

sequenceDiagram
    Alice->>Bob: Hello Bob, how are you?
    Bob-->>Alice: Great!

Class Diagram Example

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
    }
    class Dog {
        +bark()
    }
    Animal <|-- Dog

🔧 Development & Installation

Prerequisites

Node.js 18+
Rust (Tauri will install automatically if not present)
macOS (to build the macOS app) or Windows 10/11 with the Microsoft C++ Build Tools (to build the Windows installer)

Running in Development

# Install dependencies
npm install

# Run Tauri in development mode (desktop app)
npm run tauri:dev

# Or run web version only
npm run dev

This will:

Start the Vite dev server on http://localhost:5173
Launch Tauri with the development server (if using desktop)
Hot reload your React app

Building for Production

# Build web assets
npm run build

# Build the desktop app for the current platform
npm run tauri:build

The built app will be in src-tauri/target/release/bundle/:

macOS: .app bundle and .dmg installer
Windows: x64 NSIS .exe installer

Installing the Desktop App

macOS

Download the .dmg file from GitHub Releases
Open the DMG and drag Mermalaid to your Applications folder
Double-click to open the app

The macOS app is signed and notarized, so it opens without Gatekeeper warnings.

Windows

The Windows installer is unsigned, so SmartScreen shows "Windows protected your PC" when you run the .exe. Click More info, then Run anyway to continue with the installation.

⌨️ Keyboard Shortcuts

⌘N (Mac) / Ctrl+N (Windows/Linux): New diagram
⌘O / Ctrl+O: Open file
⌘S / Ctrl+S: Save file

🤝 Contributing

Mermalaid is source-available and welcomes contributions! See CONTRIBUTING.md for guidelines.

Areas where contributions are especially welcome:

Additional Mermaid diagram types
Export formats (PDF, etc.)
Platform support (Linux)
Performance improvements
Documentation and examples

📖 Documentation

Contributing Guide - How to contribute to Mermalaid
Project Structure - Codebase organization and file structure
Deployment Guide - Deploy the Mermalaid web version on Vercel
AI Agent Integration - Let Claude, Cursor & other MCP agents edit diagrams live
macOS Signing Guide - Configure code signing and notarization for releases (maintainers)
Auto-Updates Guide - Configure in-app auto-updates for the desktop app (maintainers)

🐛 Troubleshooting

Tauri won't start:

Make sure Rust is installed: rustc --version
Tauri will prompt to install Rust if missing
Check that port 5173 is available for dev server

Build fails:

Ensure you've run npm run build first
Check that dist/ directory exists with built files
On macOS, you may need to allow the app in Security & Privacy settings

App size concerns:

Tauri apps are much smaller than Electron (~10MB vs ~100MB+)
First build may take longer as Rust compiles dependencies

📄 License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

CC BY-NC-SA 4.0 - Free to use, modify, and share for non-commercial use.

Because this license includes a non-commercial clause, Mermalaid is source-available rather than OSI open source.

🌟 Why Choose Mermalaid Over Other Mermaid Editors?

Feature	Mermalaid	Other Tools
Cost	✅ 100% Free	❌ Free tier with limits, paid for unlimited
Source-available	✅ Yes (CC BY-NC-SA 4.0, non-commercial)	❌ Usually closed source
Document Limits	✅ Unlimited	❌ Often 3-5 documents max
Sign-Up Required	✅ No	❌ Usually required
Privacy	✅ Local storage only	❌ Cloud sync required
Export Options	✅ SVG, PNG, ASCII	✅/❌ Varies
Syntax Validation	✅ Real-time	✅/❌ Varies
Desktop App	✅ Native macOS and Windows	❌ Often web-only
Visual Editor	✅ Yes (flowcharts)	❌ Usually code-only

⭐ Star this repo if you find Mermalaid useful for creating free, unlimited Mermaid diagrams!

🔗 Share Mermalaid with others who need a completely free, source-available Mermaid editor.

💬 Have questions? Open an issue or check our documentation.

Mermalaid - Free Mermaid Diagram Editor. Source-available. 100% free. Forever.

highvoltag3/mermalaid

Dokumentasi proyek