{"id":46510372,"url":"https://github.com/highvoltag3/mermalaid","last_synced_at":"2026-04-05T04:01:30.177Z","repository":{"id":321840464,"uuid":"1087328387","full_name":"highvoltag3/mermalaid","owner":"highvoltag3","description":"A lightweight native macOS app for creating, editing, and exporting Mermaid diagrams.","archived":false,"fork":false,"pushed_at":"2026-03-30T21:18:22.000Z","size":3240,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-30T21:29:28.229Z","etag":null,"topics":["editor","free-software","macos","macos-app","mermaid","mermaid-diagrams","mermaidjs"],"latest_commit_sha":null,"homepage":"https://mermalaid.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/highvoltag3.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-31T18:16:24.000Z","updated_at":"2026-03-30T21:18:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"f9e427a8-1177-4ef0-98a2-9e1d8ca87259","html_url":"https://github.com/highvoltag3/mermalaid","commit_stats":null,"previous_names":["highvoltag3/mermalaid"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/highvoltag3/mermalaid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highvoltag3%2Fmermalaid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highvoltag3%2Fmermalaid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highvoltag3%2Fmermalaid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highvoltag3%2Fmermalaid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/highvoltag3","download_url":"https://codeload.github.com/highvoltag3/mermalaid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/highvoltag3%2Fmermalaid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31423887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T02:22:46.605Z","status":"ssl_error","status_checked_at":"2026-04-05T02:22:33.263Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editor","free-software","macos","macos-app","mermaid","mermaid-diagrams","mermaidjs"],"created_at":"2026-03-06T16:03:55.462Z","updated_at":"2026-04-05T04:01:30.165Z","avatar_url":"https://github.com/highvoltag3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mermalaid - The #1 Free Mermaid Diagram Editor | 100% Open Source \u0026 Free\n\n**Mermalaid** is the premier free, open-source Mermaid diagram editor and chart creator. Create unlimited Mermaid diagrams, flowcharts, sequence diagrams, and more—completely free, no restrictions, no sign-ups required. The best free alternative to paid Mermaid editors.\n\n[![License: CC BY-NC-SA 4.0](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by-nc-sa/4.0/)\n[![Open Source](https://img.shields.io/badge/Open%20Source-Free%20Beer-success)](LICENSE)\n[![Free Forever](https://img.shields.io/badge/Free-Forever-green)]()\n\n## 🎯 Why Mermalaid? The Best Free Mermaid Editor\n\nLooking for a **free Mermaid editor**? Tired of **Mermaid diagram tools** with limits, subscriptions, or hidden costs? **Mermalaid is completely free and open source**—no document limits, no premium features, no credit cards required.\n\n### Key Differentiators\n\n- ✅ **100% Free** - No restrictions, no limits, free forever (free as in free beer 🍺)\n- ✅ **Completely Open Source** - Full source code available, modify as you need\n- ✅ **No Sign-Up Required** - Start creating Mermaid diagrams instantly\n- ✅ **Unlimited Diagrams** - Create as many Mermaid charts as you need\n- ✅ **Professional Features** - Live preview, visual editor, syntax highlighting, SVG/PNG/ASCII export, *Private Share Link*\n- ✅ **Privacy-First** - All data stays local, no cloud sync required\n- ✅ **Web \u0026 Desktop** - Use in browser or download native macOS app\n\n## 🚀 Quick Start - Create Your First Mermaid Diagram\n\n### Use Online (Web Version)\n\nVisit [Mermalaid](https://mermalaid.com) to start creating Mermaid diagrams instantly in your browser—no installation needed.\n\n### Download Desktop App (macOS)\n\n1. Download the latest release from [GitHub Releases](https://github.com/highvoltag3/mermalaid/releases)\n2. Install the `.dmg` file\n3. Start creating unlimited free Mermaid diagrams\n4. 🏴‍☠️ IMPORTANT: Follow this step: [Installing the Desktop App](#installing-the-desktop-app).\n\n\n## ✨ Features - Professional Mermaid Editor, Zero Cost\n\nMermalaid provides professional-grade features typically found in paid Mermaid editors—all completely free:\n\n### Editor Features\n\n- **Monaco Editor** with syntax highlighting for Mermaid code\n- **Live Preview** with debounced updates (500ms) - See changes in real-time\n- **Visual Editor** - Drag-and-drop flowcharts with React Flow; switch to visual mode for supported diagrams\n- **Real-time Syntax Validation** - Instant error detection and feedback\n- **Auto-save** to localStorage - Never lose your work\n- **Dark/Light Mode** - Work in your preferred theme\n- **beautiful-mermaid Themes** - Multiple themes (GitHub Light/Dark, Tokyo Night, Catppuccin, Dracula, Nord, and more) that style both diagrams and the app UI\n- **Toast Notifications** - Clear feedback for actions (save, export, errors)\n- **AI Syntax Fix** - Copy-pasted the diagram from somewhere but it has syntax errors? 🤖 Let AI fix it ✨ for you. (**You will need an OpenAI API key, it's __stored locally__ in your machine so it's only yours**).\n\n### File Management\n\n- **Open Files** - Import `.mmd`, `.txt`, or `.md` files with Mermaid code\n- **Save Diagrams** - Export your Mermaid diagrams to local files\n- **Export Options**:\n  - **SVG Export** - Vector graphics for presentations and documents\n  - **PNG Export** - Raster images for documentation and web use\n  - **ASCII Export** - Unicode box-drawing for terminals (flowcharts, state, sequence, class, ER diagrams)\n- **Copy to Clipboard** - Export code blocks ready for Markdown, GitHub, or documentation\n- **Private URL share** - **Copy private link** puts the diagram in `#v1.\u003cpayload\u003e` only (fragment, not query). The payload is compressed, encrypted locally with AES-GCM (Web Crypto), then base64url-encoded. There is no upload and no server sees the ciphertext in HTTP requests (fragments are not sent). Anyone who has the full link can decrypt it; treat links like secrets.\n\n### Mermaid Diagram Types Supported\n\nCreate unlimited diagrams of all types:\n\n- **Flowcharts** (`graph`, `flowchart`)\n- **Sequence Diagrams** (`sequenceDiagram`)\n- **Class Diagrams** (`classDiagram`, `classDiagram-v2`)\n- **State Diagrams** (`stateDiagram`, `stateDiagram-v2`)\n- **Entity Relationship Diagrams** (`erDiagram`)\n- **User Journey** (`journey`)\n- **Gantt Charts** (`gantt`)\n- **Pie Charts** (`pie`)\n- **Git Graphs** (`gitGraph`)\n- **And More** - Full Mermaid.js support\n\n### Cross-Platform Support\n\n- **Web Application** - Works in any modern browser\n- **Native macOS App** - Lightweight desktop application\n- **Static Hosting** - Deploy anywhere (Vercel, Netlify, Appwrite Sites, etc.)\n\n## 💻 Technical Excellence\n\n### Built with Modern Technologies\n\n- **Tauri** - Lightweight, secure, native desktop framework (~10MB vs ~100MB+ Electron apps)\n- **React** + **TypeScript** - Modern, type-safe UI development\n- **Monaco Editor** - The same editor that powers VS Code\n- **beautiful-mermaid** - Beautiful, themed Mermaid diagram rendering with customizable themes\n- **@xyflow/react** - Visual editor for drag-and-drop flowchart editing\n\n### Why Tauri?\n\nMermalaid uses Tauri instead of Electron for a superior experience:\n\n- 🚀 **Much smaller app size** (~10MB vs ~100MB+ for Electron)\n- ⚡ **Better performance** using system webview instead of bundled Chromium\n- 🔒 **Enhanced security** with Rust backend\n- 💰 **Lower memory usage** - Runs efficiently on any machine\n- 🎯 **Better native integration** - Feels like a real macOS app\n\n## 📚 Use Cases - When to Use Mermalaid\n\nMermalaid is perfect for:\n\n- **Software Developers** - Document architecture, workflows, and system designs\n- **Technical Writers** - Create diagrams for documentation and tutorials\n- **Project Managers** - Visualize project flows and processes\n- **Students** - Create diagrams for assignments and presentations\n- **DevOps Engineers** - Document infrastructure and deployment pipelines\n- **Anyone** - Who needs to create Mermaid diagrams without limits or costs\n\n## 🎨 Example Mermaid Diagrams\n\nTry these examples in Mermalaid:\n\n### Flowchart Example\n\n```mermaid\ngraph TD\n    A[Start] --\u003e B{Decision}\n    B --\u003e|Yes| C[Action 1]\n    B --\u003e|No| D[Action 2]\n    C --\u003e E[End]\n    D --\u003e E\n```\n\n### Sequence Diagram Example\n\n```mermaid\nsequenceDiagram\n    Alice-\u003e\u003eBob: Hello Bob, how are you?\n    Bob--\u003e\u003eAlice: Great!\n```\n\n### Class Diagram Example\n\n```mermaid\nclassDiagram\n    class Animal {\n        +String name\n        +int age\n        +eat()\n    }\n    class Dog {\n        +bark()\n    }\n    Animal \u003c|-- Dog\n```\n\n## 🔧 Development \u0026 Installation\n\n### Prerequisites\n\n- Node.js 18+\n- Rust (Tauri will install automatically if not present)\n- macOS (for building macOS apps)\n\n### Running in Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run Tauri in development mode (desktop app)\nnpm run tauri:dev\n\n# Or run web version only\nnpm run dev\n```\n\nThis will:\n1. Start the Vite dev server on `http://localhost:5173`\n2. Launch Tauri with the development server (if using desktop)\n3. Hot reload your React app\n\n### Building for Production\n\n```bash\n# Build web assets\nnpm run build\n\n# Build macOS desktop app\nnpm run tauri:build\n```\n\nThe built app will be in `src-tauri/target/release/bundle/`:\n- `.app` file for macOS\n- `.dmg` installer\n\n### Installing the Desktop App\n\n**Important:** The app is currently unsigned (not code-signed). macOS may show a \"damaged\" warning when you first open it.\n\n**Recommended Installation Method:**\n```bash\n# 1. Copy the app from the DMG to Applications\ncp -R /Volumes/Mermalaid_*/Mermalaid.app /Applications/\n\n# 2. Remove quarantine attribute\nxattr -cr /Applications/Mermalaid.app\n\n# 3. Open the app\nopen /Applications/Mermalaid.app\n```\n\n**Alternative: System Settings**\n1. Open **System Settings** → **Privacy \u0026 Security**\n2. Scroll down to see the blocked app message\n3. Click **\"Open Anyway\"** next to the Mermalaid warning\n4. Click **\"Open\"** in the confirmation dialog\n\n## ⌨️ Keyboard Shortcuts\n\n- `⌘N` (Mac) / `Ctrl+N` (Windows/Linux): New diagram\n- `⌘O` / `Ctrl+O`: Open file\n- `⌘S` / `Ctrl+S`: Save file\n\n## 🤝 Contributing\n\nMermalaid is open source and welcomes contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.\n\nAreas where contributions are especially welcome:\n- Additional Mermaid diagram types\n- Export formats (PDF, etc.)\n- Platform support (Windows, Linux)\n- Performance improvements\n- Documentation and examples\n\n## 📖 Documentation\n\n- [Contributing Guide](CONTRIBUTING.md) - How to contribute to Mermalaid\n- [Project Structure](PROJECT_STRUCTURE.md) - Codebase organization and file structure\n- [Deployment Guide](DEPLOYMENT.md) - Deploy Mermalaid web version\n- [Appwrite Setup](APPWRITE_SETUP.md) - Step-by-step Appwrite Sites setup\n- [Static Hosting](STATIC_HOSTING.md) - Hosting configuration details\n\n## 🐛 Troubleshooting\n\n**Tauri won't start:**\n- Make sure Rust is installed: `rustc --version`\n- Tauri will prompt to install Rust if missing\n- Check that port 5173 is available for dev server\n\n**Build fails:**\n- Ensure you've run `npm run build` first\n- Check that `dist/` directory exists with built files\n- On macOS, you may need to allow the app in Security \u0026 Privacy settings\n\n**App size concerns:**\n- Tauri apps are much smaller than Electron (~10MB vs ~100MB+)\n- First build may take longer as Rust compiles dependencies\n\n## 📄 License\n\nThis work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).\n\n**CC BY-NC-SA 4.0** - Free to use, modify, and share (non-commercial)\n\n## 🌟 Why Choose Mermalaid Over Other Mermaid Editors?\n\n| Feature | Mermalaid | Other Tools |\n|---------|-----------|-------------|\n| **Cost** | ✅ 100% Free | ❌ Free tier with limits, paid for unlimited |\n| **Open Source** | ✅ Yes, fully open | ❌ Usually closed source |\n| **Document Limits** | ✅ Unlimited | ❌ Often 3-5 documents max |\n| **Sign-Up Required** | ✅ No | ❌ Usually required |\n| **Privacy** | ✅ Local storage only | ❌ Cloud sync required |\n| **Export Options** | ✅ SVG, PNG, ASCII | ✅/❌ Varies |\n| **Syntax Validation** | ✅ Real-time | ✅/❌ Varies |\n| **Desktop App** | ✅ Native macOS | ❌ Often web-only |\n| **Visual Editor** | ✅ Yes (flowcharts) | ❌ Usually code-only |\n\n## 🎯 SEO Keywords \u0026 Search Terms\n\nMermalaid is optimized for these search terms:\n- **free mermaid editor**\n- **mermaid diagram editor free**\n- **open source mermaid editor**\n- **free mermaid chart creator**\n- **mermaid diagram tool free**\n- **online mermaid editor free**\n- **mermaid flowchart editor**\n- **free mermaid diagram generator**\n- **mermaid editor no sign up**\n- **best free mermaid tool**\n\n---\n\n**⭐ Star this repo** if you find Mermalaid useful for creating free, unlimited Mermaid diagrams!\n\n**🔗 Share Mermalaid** with others who need a completely free, open-source Mermaid editor.\n\n**💬 Have questions?** Open an issue or check our documentation.\n\n---\n\n*Mermalaid - The #1 Free Mermaid Diagram Editor. Completely Open Source. 100% Free. Forever.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhighvoltag3%2Fmermalaid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhighvoltag3%2Fmermalaid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhighvoltag3%2Fmermalaid/lists"}