Mermaid Studio

A beautiful, native macOS-style Mermaid diagram editor built with Tauri and Vite.

Features • Installation • Usage • Tech Stack

✨ Features

• Beautiful Diagrams: Powered by beautiful-mermaid for stunning, customizable visualizations.
• Smart Fallback: Automatically falls back to standard Mermaid rendering for diagram types not yet supported by beautiful-mermaid.
• Extensive Theming: Support for a wide variety of themes to match any aesthetic.
• High-Quality Export: Export your diagrams as high-definition PNG or vectorized SVG/PDF for professional use.
• Real-time Preview: Type your Mermaid code and see the diagram update instantly.
• Rich Editor: Integrated Monaco Editor for a premium coding experience with syntax highlighting.
• macOS Native Aesthetic: Designed with a focus on macOS design guidelines.
• Theme Support: Fully supports Light, Dark, and Auto (System) appearance modes.
• Examples Library: Includes a collection of varied Mermaid diagram examples to get you started.

🛠 Tech Stack

• Tauri: For a lightweight, secure, and fast desktop application runtime.
• Vite: For lightning-fast frontend tooling.
• Mermaid.js: The core diagramming engine.
• beautiful-mermaid: For enhanced diagram styling and aesthetics.
• Monaco Editor: The code editor that powers VS Code.
• Vanilla JS/CSS: For maximum performance and control over the UI without framework overhead.

🚀 Installation

See Release Page

Notice (macOS): Because of the required certificate, macOS may show a warning that the app “can’t be verified.” If you see this warning, go to System Settings → Privacy & Security and manually allow/open the app to dismiss the alert.

💻 Usage

Development

To run the application in development mode with hot reloading:

npm run tauri dev

Build

To build the application for production:

npm run tauri build

The build artifacts will be located in src-tauri/target/release/.

🔁 GitHub Auto Build & Release

This repository includes a GitHub Actions workflow at:

• .github/workflows/release.yml

It will automatically build macOS / Windows / Linux binaries and attach them to a GitHub Release when you push a tag like:

git tag v0.8.0
git push origin v0.8.0

Notes

• Target matrix:
  • macOS Intel (x86_64-apple-darwin): .dmg, .app.tar.gz
  • macOS Apple Silicon (aarch64-apple-darwin): .dmg, .app.tar.gz
  • Windows x64 (x86_64-pc-windows-msvc): *-setup.exe
  • Windows ARM64 (aarch64-pc-windows-msvc): *-setup.exe
  • Linux x64 (x86_64-unknown-linux-gnu): .deb, .rpm

Optional secrets for signing/notarization

For production distribution (especially macOS notarization / updater signing), configure the relevant TAURI_* and Apple signing secrets in:

• GitHub Repo Settings -> Secrets and variables -> Actions

👤 Author

Woody-sudo

• GitHub: @Woody-sudo

📄 License

This project is open source and available under the MIT License.