Mermster User Guide

Quick Start: Your First Diagram

You can go from launch to a finished diagram in about 60 seconds.

1. Launch Mermster. The Welcome screen shows options to create a new diagram or pick from 12 built-in templates.
2. Pick a template (or start blank). Templates cover flowcharts, sequence diagrams, class diagrams, and more. Click any template to open it in a new tab, ready to edit.
3. Edit on the left, preview on the right. Type Mermaid syntax in the code editor on the left. The diagram renders in real time on the right.
4. Export your diagram. Press Cmd+Shift+E (macOS) or Ctrl+Shift+E (Windows) to open the Export dialog. Choose SVG, PNG, or PDF, adjust settings, and save.

That is it. You have created and exported a diagram.

Free vs Paid

Mermster works out of the box with full access to every feature. The only difference between the free tier and a licensed copy is how exports look.

What’s Included for Free

• Full Monaco code editor with all 10 themes
• All 12+ Mermaid diagram types
• Live preview with pan, zoom, and minimap
• SVG, PNG, and PDF export (with a small “Made with Mermster” watermark)
• Copy to clipboard (PNG and SVG)
• Print support
• Command palette, diagram builder, outline navigator
• Version history with diff view
• Auto-save and crash recovery
• 12 built-in templates + custom templates
• Export presets (5 built-in + custom)
• 4 colorblind-safe diagram palettes
• 7 interface languages

What a License Adds

Clean exports without the watermark. That is the only difference.

Both licenses are one-time purchases. No subscription. Updates are included.

The Editor

The left pane is a full-featured code editor built on the same technology as Visual Studio Code (Monaco Editor). It is designed to make writing Mermaid syntax as smooth as possible.

Syntax Highlighting

Mermaid keywords, node IDs, arrows, labels, and comments are color-coded so you can scan your diagram at a glance. The highlighting adapts to whichever editor theme you choose.

Autocomplete

As you type, Mermster suggests:

• Mermaid keywords — diagram types (graph, sequenceDiagram, classDiagram, etc.), directions (TD, LR, BT, RL), and block keywords (loop, alt, opt, end).
• Node IDs — once you define a node, its ID is available for autocompletion everywhere else. This prevents typos and saves time on large diagrams.

Press Tab or Enter to accept a suggestion.

Error Diagnostics

If your syntax has an error, Mermster underlines the problem area with a red squiggle and shows a description in the editor margin. This updates in real time as you type.

Find and Replace

Use Cmd+F (macOS) or Ctrl+F (Windows) to open Find. Use Cmd+H / Ctrl+H for Find and Replace.

Editor Settings

Customize the editor in Settings (Cmd+, / Ctrl+,), under the Editor section:

Live Preview

The right pane shows your diagram rendered in real time. Changes appear about 300 milliseconds after you stop typing, so the preview feels responsive without flickering on every keystroke.

Pan and Zoom

• Scroll to zoom in and out.
• Pinch on a trackpad to zoom.
• Click and drag to pan around the diagram.
• Use the zoom controls in the bottom-right corner for precise adjustments.

Fit to View

Click the Fit button in the zoom controls to scale the diagram so it all fits in the preview. Click 1:1 to reset to actual size.

Fullscreen Preview

Press Cmd+Shift+F (macOS) or Ctrl+Shift+F (Windows) to hide the editor and fill the window with just the diagram. Press Escape to return to the split view. This is useful for presentations.

Diagram Minimap

For large diagrams, a thumbnail overview appears in the corner of the preview. It shows your current viewport as a rectangle. Click anywhere on the minimap to jump to that area. Toggle it in Settings > Preview > Diagram Minimap.

Diagram Palettes

Mermster offers four diagram color palettes, including three colorblind-safe options:

Change the palette in Settings > Appearance > Diagram Palette. The palette affects both the live preview and exported diagrams.

Working with Files

Creating a New Diagram

Press Cmd+N (macOS) or Ctrl+N (Windows). You can start from a blank diagram, pick from 12 built-in templates, or choose one of your own saved templates.

Built-in templates cover:

• Basic: Flowchart, Sequence Diagram, Class Diagram, ER Diagram, State Diagram
• Project: Gantt Chart, Timeline
• Creative: Mindmap
• Data: Pie Chart, Quadrant Chart
• Development: Git Graph
• UX: User Journey

Opening Files

Press Cmd+O / Ctrl+O to open an existing .mmd or .mermaid file. You can also drag and drop a file onto the Mermster window, or double-click a .mmd file in Finder or Explorer.

Saving

• Cmd+S / Ctrl+S — Save. If the file has not been saved before, you will be prompted to choose a location.
• Cmd+Shift+S / Ctrl+Shift+S — Save As.

Mermster uses the .mmd file extension by default. Files with the .mermaid extension are also supported.

Multi-Tab Editing

Each file opens in its own tab. Your edits and undo history are preserved independently for each tab.

• Cmd+W / Ctrl+W — Close the current tab (prompts to save if there are unsaved changes).
• Cmd+Shift+T / Ctrl+Shift+T — Reopen the last closed tab.

File Watching

If a file you have open is modified externally (by another editor, a Git operation, etc.), Mermster detects the change. If you have no unsaved edits, it reloads automatically. If you do, a dialog asks whether to reload from disk or keep your version.

Recent Files

The Welcome screen shows your recently opened files. They are also listed in the File menu.

Exporting Diagrams

Mermster exports to three formats: SVG, PNG, and PDF.

Export Dialog

Press Cmd+Shift+E (macOS) or Ctrl+Shift+E (Windows) to open it. Each format has its own tab with format-specific options:

Quick Export

Press Cmd+E / Ctrl+E to export immediately using your last-used preset. If you have not exported before, the full dialog opens instead.

Export Presets

Save your export settings as a named preset so you get consistent output every time. Mermster includes 5 built-in presets:

• Quick PNG (Retina)
• Quick SVG
• Retina PNG for Docs
• A4 PDF
• Letter PDF

You can create as many custom presets as you need. If you modify options after selecting a preset, the dropdown shows (Modified) so you know the settings have changed.

Copy to Clipboard

• Cmd+Shift+C / Ctrl+Shift+C — Copy as PNG (for pasting into presentations, docs, or chat).
• Copy as SVG is available through the Command Palette or Edit menu.

A toast notification confirms when the copy succeeds.

Printing

Press Cmd+P / Ctrl+P to open your system print dialog.

Tools & Navigation

Command Palette

Press Cmd+K (macOS) or Ctrl+K (Windows) to open the Command Palette. Start typing to search for any command — switch themes, export, open settings, toggle panels, and more. Keyboard shortcuts are shown next to each command, making it a great way to learn shortcuts as you go.

Outline Navigator

Press Cmd+Shift+O / Ctrl+Shift+O to open the Outline panel. It shows a structured overview of your diagram — nodes, edges, participants, states, and other elements grouped by type. Click any element to jump to its line in the editor.

Diagram Builder

Press Cmd+Shift+B / Ctrl+Shift+B to open the Diagram Builder panel. It shows context-aware buttons for the type of diagram you are editing. Click any button to insert the corresponding Mermaid syntax at your cursor position, complete with placeholder text you can tab through.

The Diagram Builder adapts to your diagram type:

Templates

Mermster supports two kinds of templates:

• Built-in templates — 12 starter diagrams available on the Welcome screen and when creating a new file.
• Custom templates — Save any diagram as a reusable template via File > Save as Template or the Command Palette. Give it a name, optional description, and category. Your templates appear under My Templates whenever you create a new file.

Data Safety

Mermster protects your work automatically so you do not have to worry about losing it.

Auto-Save

Mermster saves a recovery copy of your unsaved work at regular intervals. If the app closes unexpectedly, your work is waiting for you when you relaunch. You can adjust the interval in Settings > Data Safety > Auto-Save Interval (options: disabled, 15 seconds, 30 seconds, 1 minute, or 2 minutes).

Crash Recovery

If Mermster does not shut down cleanly — a crash, a forced quit, or a power outage — a Recovery dialog appears on the next launch. It lists all documents with unsaved changes and lets you:

• Recover — restore the document in a new tab.
• Discard — permanently delete the recovery data.
• Recover All / Discard All — handle everything at once.

You can also search for Recover Unsaved Work in the Command Palette at any time.

Version History

Every time you save, Mermster takes a snapshot. Browse previous versions, compare them side by side with your current file, and restore any version.

Open Version History with Cmd+Shift+H (macOS) or Ctrl+Shift+H (Windows), or go to File > Version History.

In the Version History panel you can:

• Compare — see a side-by-side diff of your current file versus a selected version.
• Restore — open a previous version in a new tab.
• Delete — remove individual versions or clear all history for a file.

Configure the maximum number of versions per file in Settings > Data Safety > Max Versions Per File (options: 10, 25, 50, or 100). Identical saves are automatically skipped.

Customization

Open Settings with Cmd+, (macOS) or Ctrl+, (Windows).

App Themes

Mermster offers five theme modes:

Editor Themes

Independent of the app theme, you can choose a color scheme for the code editor. Mermster includes 10 editor themes:

Set to Auto (the default) to have the editor theme follow your app theme automatically. Change editor themes in Settings > Appearance > Editor Theme.

Language

Mermster is available in 7 languages: English, Japanese (日本語), Simplified Chinese (简体中文), Traditional Chinese (繁體中文), Spanish (Español), French (Français), and German (Deutsch). Change the language in Settings > General > Language, or set it to System to follow your OS preference.

Feature Hints

When you first use certain features, Mermster shows a brief hint explaining what it does. Hints appear for the Outline Navigator, Diagram Builder, Version History, Export Presets, Command Palette, and Diagram Minimap. If you dismiss a hint, you can see it again by clicking the ? button next to the feature, or go to Settings > Hints > Show All Hints Again.

Licensing

How to Activate

1. On first export: Mermster shows the activation dialog. Enter your license key, or click a purchase button to buy one.
2. From the menu: Go to Help > Activate License, or open Settings > License.

Paste your license key (format: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX) and click Activate. Activation requires a brief internet connection, but after that your license works offline for 30 days before needing to check in again.

How to Deactivate

To move your license to a new computer:

1. Open Settings > License.
2. Click Deactivate License.
3. Confirm the deactivation.

This frees a device slot so you can activate on another machine. If you uninstall without deactivating, contact mermster@viaelo.app to recover the slot.

Keyboard Shortcuts

On Windows, replace Cmd with Ctrl.

File

Edit

View

Export

FAQ

Does Mermster require an internet connection?

No. Mermster works fully offline. The only features that require internet are license activation/deactivation and checking for updates. The free tier never needs internet at all.

What Mermaid diagram types are supported?

All of them — flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mindmaps, pie charts, git graphs, timelines, user journeys, quadrant charts, and any new types added in future Mermaid versions.

Can I use Mermster on multiple devices?

Yes. A Personal license allows up to 5 devices. A Commercial license allows up to 10. You can deactivate a device at any time to free up a slot.

Is my data sent anywhere?

No. Mermster has zero telemetry, zero analytics, and zero tracking. Your diagrams, files, and settings stay entirely on your computer. The only network requests are license validation and update checks.

What file format does Mermster use?

Standard .mmd and .mermaid text files. They are plain text — version them with Git, open them in any editor, share them however you like.

Can I use the free tier for commercial work?

Yes. The free tier has no use-case restriction. However, if you are sharing diagrams professionally and the watermark is not appropriate, the Personal ($29) or Commercial ($59) license removes it.

How do I check for updates?

Go to Help > Check for Updates. Mermster will notify you if a newer version is available.

Troubleshooting

Windows SmartScreen Warning

When you first run Mermster on Windows, you may see a SmartScreen warning saying “Windows protected your PC.” This happens because we have not yet purchased an Extended Validation code signing certificate for Windows. The macOS version is fully signed and notarized by Apple.

To proceed:

1. Click More info on the SmartScreen dialog.
2. Click Run anyway.
3. This only happens once — Windows remembers your choice.

Diagram Not Rendering

If the preview shows an error instead of your diagram:

• Check the editor for red squiggles — they indicate syntax errors.
• Make sure your diagram starts with a valid type declaration (e.g., graph TD, sequenceDiagram, classDiagram).
• Try creating a new file from a template to confirm the preview works, then compare with your code.

Export Looks Blurry

If your PNG export looks blurry, increase the DPI setting in the Export dialog. Use 144 DPI for Retina screens or 300 DPI for print. For sharp output at any size, export as SVG instead.

License Activation Failed

• Check your internet connection — activation needs a one-time online check.
• Make sure you are copying the full license key, including dashes.
• If you have reached your device limit, deactivate an existing device first (Settings > License on that device).
• Contact mermster@viaelo.app if the problem persists.

Lost My License Key

Email mermster@viaelo.app with the email address you used for the purchase. We can look it up.

Getting Support

Email mermster@viaelo.app. You can also reach us from within the app via Help > Send Feedback or Help > Report a Problem.