Privacy-first, offline-capable Mermaid diagram generator for developers
A modern, native desktop application for creating and editing Mermaid diagrams with real-time preview, Monaco editor integration, and powerful batch processing capabilities.
- 100% Offline Operation - No internet required, no data leaves your machine
- Local File Processing - All diagrams stay on your computer
- Zero Telemetry - We don't track you, period
- Monaco Editor - Full-featured code editor with syntax highlighting
- Live Preview - Real-time diagram preview with error detection
- Smart Debouncing - Efficient preview updates without performance hits
- Keyboard Shortcuts - Vim-like efficiency with modern UX
- Split-Panel Layout - Resizable editor and preview panes
- Dark/Light Themes - Easy on the eyes, day or night
- Responsive Design - Adapts to different screen sizes
- Professional UI - Clean, intuitive interface
- Multiple Export Formats - PNG, SVG, PDF, JPG
- Batch Processing - Process multiple diagrams at once
- Recent Files - Quick access to your work
- Error Handling - Helpful error messages and recovery
-
Install Mermaid CLI (required for diagram generation):
npm install -g @mermaid-js/mermaid-cli
-
System Requirements:
- Linux: Ubuntu 20.04+ / Fedora 35+ / Arch Linux
- macOS: 10.15+ (Intel/Apple Silicon)
- Windows: 10+ (x64)
- Go to Releases
- Download the appropriate binary for your platform
- Run the installer or extract the archive
# Clone the repository
git clone https://github.com/baris-sinapli/mermaid-diagram.git
cd mermaid-gui-v2
# Install dependencies
npm install
# Run in development mode
npm run tauri dev
# Or build for production
npm run tauri build- Launch the application
- Start typing Mermaid code in the left panel
- Watch the preview update in real-time on the right
- Generate diagrams with
Ctrl+Eor the Generate button
Boost your productivity with these essential keyboard shortcuts:
| Shortcut | Action | Description |
|---|---|---|
Ctrl+N |
📄 New file | Create a new Mermaid diagram |
Ctrl+O |
📂 Open file | Open an existing .mmd file |
Ctrl+S |
💾 Save file | Save current diagram to file |
Ctrl+E |
🚀 Generate | Export diagram to image format |
Ctrl+F |
🔍 Find & Replace | Search and replace in editor |
💡 Pro Tip: All shortcuts work in both the editor and preview panes for seamless workflow!
- Flowcharts (
graph/flowchart) - Sequence Diagrams (
sequenceDiagram) - Class Diagrams (
classDiagram) - State Diagrams (
stateDiagram) - Gantt Charts (
gantt) - Pie Charts (
pie) - Git Graphs (
gitgraph) - And more!
graph TD
A[Start] --> B{Decision?}
B -->|Yes| C[Process A]
B -->|No| D[Process B]
C --> E[End]
D --> E
- Frontend: SvelteKit + TypeScript
- Backend: Rust + Tauri 2.0
- Editor: Monaco Editor with custom Mermaid syntax
- Diagram Engine: Mermaid CLI (mmdc)
- Styling: Custom CSS with CSS Variables
mermaid-gui-v2/
├── src/ # Frontend (SvelteKit)
│ ├── lib/
│ │ ├── components/ # UI components
│ │ ├── services/ # Business logic
│ │ ├── stores/ # State management
│ │ ├── styles/ # CSS styles
│ │ └── utils/ # Helper functions
│ └── routes/ # SvelteKit routes
├── src-tauri/ # Backend (Rust)
│ ├── src/
│ │ ├── commands/ # Tauri commands
│ │ ├── models/ # Data structures
│ │ ├── services/ # Core services
│ │ └── utils/ # Utilities
│ └── Cargo.toml
├── static/ # Static assets
└── docs/ # Documentation
- Zero Data Collection - We don't collect any personal information
- Local Storage Only - All files remain on your computer
- No Network Requests - Application works completely offline
- No Telemetry - No usage analytics or crash reporting
- Sandboxed Execution - Tauri security model
- Memory Safe - Written in Rust for memory safety
- No Arbitrary Code Execution - Safe diagram processing
- Regular Security Audits - Community-driven security reviews
- ✅ GDPR Compliant - No data processing
- ✅ CCPA Compliant - No personal information collection
- ✅ SOC 2 Ready - Enterprise security standards
- ✅ Open Source Transparency - Full code visibility
| Feature | Mermaid GUI v2.0 | Mermaid Live | VS Code + Extensions | Draw.io |
|---|---|---|---|---|
| Offline Support | ✅ Yes | ❌ Online only | ✅ Yes | |
| Privacy | ✅ Complete | ❌ Data sent to servers | ✅ Local | |
| Live Preview | ✅ Real-time | ✅ Real-time | ❌ No | |
| Batch Processing | ✅ Built-in | ❌ No | ❌ No | ❌ No |
| Native Performance | ✅ Tauri/Rust | ❌ Web app | ❌ Web app | |
| File Management | ✅ Advanced | ✅ VS Code | ✅ Good | |
| Export Formats | ✅ PNG, SVG, PDF, JPG | ✅ PNG, SVG | ✅ Many formats | |
| Cost | 🆓 Free & Open Source | 🆓 Free | 🆓 Free | 🆓 Free |
We welcome contributions! Please see our Contributing Guide for details.
-
Prerequisites:
# Install Rust curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh # Install Node.js 18+ # Install Tauri CLI cargo install tauri-cli --version "^2.0.0"
-
Clone and setup:
git clone https://github.com/baris-sinapli/mermaid-diagram.git cd mermaid-diagram npm install -
Start development:
npm run tauri dev
- Linting:
npm run lint - Formatting:
npm run format - Type Checking:
npm run type-check - Testing:
cargo test(Rust) +npm test(Frontend)
Found a bug? Have a feature request? Please use our issue templates:
This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.
We chose GPL v3 to ensure that:
- ✅ The software remains free and open source
- ✅ Improvements benefit the entire community
- ✅ No one can create proprietary forks
- ✅ Your privacy and freedom are protected
- Mermaid.js - The amazing diagramming syntax
- Tauri - For the excellent native app framework
- Monaco Editor - For the VS Code-quality editor
- Svelte - For the reactive UI framework
Made with ❤️ by the open source community