Mermster Benutzerhandbuch

Schnellstart: Ihr erstes Diagramm

In etwa 60 Sekunden gelangen Sie vom Startpunkt bis zu einem fertigen Diagramm.

1. Starten Sie Mermster. Der Willkommensbildschirm bietet Optionen, um ein neues Diagramm zu erstellen oder eine der 12 integrierten Vorlagen auszuwählen.
2. Wählen Sie eine Vorlage (oder beginnen Sie mit einem leeren Diagramm). Die Vorlagen umfassen Flussdiagramme, Sequenzdiagramme, Klassendiagramme und mehr. Klicken Sie auf eine beliebige Vorlage, um sie in einem neuen Tab bearbeitungsbereit zu öffnen.
3. Bearbeiten Sie links; sehen Sie rechts die Vorschau. Tippen Sie die Mermaid-Syntax in den Code-Editor auf der linken Seite. Das Diagramm wird rechts in Echtzeit gerendert.
4. Exportieren Sie Ihr Diagramm. Drücken Sie Cmd+Shift+E (macOS) oder Ctrl+Shift+E (Windows), um den Export-Dialog zu öffnen. Wählen Sie SVG, PNG oder PDF, passen Sie die Einstellungen an und speichern Sie.

Das war’s. Sie haben ein Diagramm erstellt und exportiert.

Kostenlos vs. kostenpflichtig

Mermster funktioniert sofort und bietet vollen Zugriff auf alle Funktionen. Der einzige Unterschied zwischen der kostenlosen und der lizenzierten Version besteht darin, wie die Exporte aussehen.

Was kostenlos enthalten ist

• Vollständiger Monaco-Code-Editor mit allen 10 Themen
• Alle über 12 Mermaid-Diagrammtypen
• Live-Vorschau mit Verschieben, Zoomen und Minikarte
• Export nach SVG, PNG und PDF (mit einem kleinen Wasserzeichen „Made with Mermster”)
• In die Zwischenablage kopieren (PNG und SVG)
• Druckunterstützung
• Befehlspalette, Diagramm-Builder, Gliederungsnavigator
• Versionsverlauf mit Vergleichsansicht
• Automatisches Speichern und Wiederherstellen nach Abstürzen
• 12 integrierte Vorlagen plus eigene Vorlagen
• Export-Voreinstellungen (5 integrierte plus eigene)
• 4 farbenblindheitssichere Diagrammpaletten
• 7 Oberflächensprachen

Was eine Lizenz hinzufügt

Saubere Exporte ohne das Wasserzeichen. Das ist der einzige Unterschied.

Beide Lizenzen sind einmalige Käufe. Kein Abonnement. Updates sind inbegriffen.

Der Editor

Der linke Bereich ist ein voll ausgestatteter Code-Editor, der auf derselben Technologie wie Visual Studio Code basiert (Monaco-Editor). Er ist darauf ausgelegt, das Schreiben in Mermaid-Syntax so reibungslos wie möglich zu machen.

Syntaxhervorhebung

Mermaid-Schlüsselwörter, Knoten-IDs, Pfeile, Beschriftungen und Kommentare sind farblich gekennzeichnet, sodass Sie Ihr Diagramm auf einen Blick erfassen können. Die Hervorhebung passt sich dem von Ihnen gewählten Editor-Thema an.

Autovervollständigung

Während Sie tippen, schlägt Mermster Folgendes vor:

• Mermaid-Schlüsselwörter: Diagrammtypen (graph, sequenceDiagram, classDiagram usw.), Richtungen (TD, LR, BT, RL) und Blockschlüsselwörter (loop, alt, opt, end).
• Knoten-IDs: Sobald Sie einen Knoten definieren, steht seine ID überall sonst zur Autovervollständigung zur Verfügung. Das verhindert Tippfehler und spart Zeit bei großen Diagrammen.

Drücken Sie Tab oder Enter, um einen Vorschlag zu übernehmen.

Fehlerdiagnose

Wenn Ihre Syntax einen Fehler enthält, unterstreicht Mermster die Problemstelle mit einer roten Wellenlinie und zeigt eine Beschreibung am Editor-Rand an. Dies wird in Echtzeit aktualisiert, während Sie tippen.

Suchen und Ersetzen

Verwenden Sie Cmd+F (macOS) oder Ctrl+F (Windows), um die Suche zu öffnen. Verwenden Sie Cmd+H / Ctrl+H für Suchen und Ersetzen.

Editor-Einstellungen

Passen Sie den Editor unter Einstellungen (Cmd+, / Ctrl+,) im Bereich Editor an:

Live-Vorschau

Der rechte Bereich zeigt Ihr Diagramm in Echtzeit gerendert. Änderungen erscheinen etwa 300 Millisekunden, nachdem Sie aufgehört haben zu tippen, sodass sich die Vorschau reaktionsschnell anfühlt, ohne bei jedem Tastenanschlag zu flackern.

Verschieben und Zoomen

• Scrollen Sie, um hinein- und herauszuzoomen.
• Spreizen Sie auf dem Trackpad, um zu zoomen.
• Klicken und ziehen Sie, um sich im Diagramm zu bewegen.
• Verwenden Sie die Zoom-Steuerung in der unteren rechten Ecke für präzise Anpassungen.

An Ansicht anpassen

Klicken Sie auf die Schaltfläche Anpassen in der Zoom-Steuerung, um das Diagramm so zu skalieren, dass es vollständig in die Vorschau passt. Klicken Sie auf 1:1, um die Ansicht auf die tatsächliche Größe zurückzusetzen.

Vollbild-Vorschau

Drücken Sie Cmd+Shift+F (macOS) oder Ctrl+Shift+F (Windows), um den Editor auszublenden und das Fenster nur mit dem Diagramm zu füllen. Drücken Sie Escape, um zur geteilten Ansicht zurückzukehren. Das ist nützlich für Präsentationen.

Diagramm-Minikarte

Bei großen Diagrammen erscheint in der Vorschau-Ecke eine Miniaturübersicht. Sie zeigt Ihren aktuellen Ausschnitt als Rechteck an. Klicken Sie auf eine beliebige Stelle der Minikarte, um zu diesem Bereich zu springen. Schalten Sie sie unter Einstellungen > Vorschau > Diagramm-Minikarte ein oder aus.

Diagrammpaletten

Mermster bietet vier Diagramm-Farbpaletten, darunter drei farbenblindheitssichere Optionen:

Ändern Sie die Palette unter Einstellungen > Darstellung > Diagrammpalette. Die Palette beeinflusst sowohl die Live-Vorschau als auch die exportierten Diagramme.

Mit Dateien arbeiten

Ein neues Diagramm erstellen

Drücken Sie Cmd+N (macOS) oder Ctrl+N (Windows). Sie können mit einem leeren Diagramm beginnen, eine der 12 integrierten Vorlagen wählen oder eine Ihrer eigenen gespeicherten Vorlagen verwenden.

Die integrierten Vorlagen umfassen:

• Grundlegend: Flussdiagramm, Sequenzdiagramm, Klassendiagramm, ER-Diagramm, Zustandsdiagramm
• Projekt: Gantt-Diagramm, Zeitleiste
• Kreativ: Mindmap
• Daten: Kreisdiagramm, Quadrantendiagramm
• Entwicklung: Git-Graph
• UX: User Journey

Dateien öffnen

Drücken Sie Cmd+O / Ctrl+O, um eine vorhandene .mmd- oder .mermaid-Datei zu öffnen. Sie können auch eine Datei per Drag-and-Drop in das Fenster ziehen oder im Finder bzw. Explorer auf eine .mmd-Datei doppelklicken.

Speichern

• Cmd+S / Ctrl+S: Speichern. Wurde die Datei noch nicht gespeichert, werden Sie aufgefordert, einen Speicherort auszuwählen.
• Cmd+Shift+S / Ctrl+Shift+S: Speichern unter.

Mermster verwendet standardmäßig die Dateiendung .mmd. Dateien mit der Endung .mermaid werden ebenfalls unterstützt.

Bearbeiten mit mehreren Tabs

Jede Datei öffnet sich in einem eigenen Tab. Ihre Bearbeitungen und Ihr Rückgängig-Verlauf werden für jeden Tab unabhängig gespeichert.

• Cmd+W / Ctrl+W: Den aktuellen Tab schließen (fragt nach, ob ungespeicherte Änderungen vorhanden sind).
• Cmd+Shift+T / Ctrl+Shift+T: Den zuletzt geschlossenen Tab wieder öffnen.

Dateiüberwachung

Wenn eine geöffnete Datei extern geändert wird (z. B. durch einen anderen Editor, eine Git-Operation usw.), erkennt Mermster die Änderung. Wenn Sie keine ungespeicherten Bearbeitungen haben, wird sie automatisch neu geladen. Wenn doch, fragt ein Dialog, ob von der Festplatte neu geladen werden soll oder ob Ihre Version behalten werden soll.

Zuletzt verwendete Dateien

Der Willkommensbildschirm zeigt Ihre zuletzt geöffneten Dateien. Sie sind außerdem im Menü Datei aufgeführt.

Diagramme exportieren

Mermster exportiert in drei Formate: SVG, PNG und PDF.

Export-Dialog

Drücken Sie Cmd+Shift+E (macOS) oder Ctrl+Shift+E (Windows), um ihn zu öffnen. Jedes Format hat einen eigenen Tab mit formatspezifischen Optionen:

Schnellexport

Drücken Sie Cmd+E / Ctrl+E, um sofort mit Ihrer zuletzt verwendeten Voreinstellung zu exportieren. Wenn Sie zuvor noch nicht exportiert haben, öffnet sich stattdessen der vollständige Dialog.

Export-Voreinstellungen

Speichern Sie Ihre Export-Einstellungen als benannte Voreinstellung, damit Sie jedes Mal ein einheitliches Ergebnis erhalten. Mermster enthält 5 integrierte Voreinstellungen:

• Schnelles PNG (Retina)
• Schnelles SVG
• Retina-PNG für Dokumente
• A4-PDF
• Letter-PDF

Sie können so viele eigene Voreinstellungen erstellen, wie Sie benötigen. Wenn Sie nach der Auswahl einer Voreinstellung Optionen ändern, zeigt das Dropdown-Menü (Geändert) an, damit Sie wissen, dass sich die Einstellungen geändert haben.

In die Zwischenablage kopieren

• Cmd+Shift+C / Ctrl+Shift+C: Als PNG kopieren (zum Einfügen in Präsentationen, Dokumente oder Chats).
• Als SVG kopieren ist über die Befehlspalette oder das Menü Bearbeiten verfügbar.

Eine kurze Benachrichtigung bestätigt, wenn das Kopieren erfolgreich war.

Drucken

Drücken Sie Cmd+P / Ctrl+P, um den Druckdialog Ihres Systems zu öffnen.

Werkzeuge und Navigation

Befehlspalette

Drücken Sie Cmd+K (macOS) oder Ctrl+K (Windows), um die Befehlspalette zu öffnen. Beginnen Sie zu tippen, um nach einem beliebigen Befehl zu suchen: Themen wechseln, exportieren, Einstellungen öffnen, Panels umschalten und mehr. Die Tastenkürzel werden neben jedem Befehl angezeigt, was eine hervorragende Möglichkeit bietet, sie nebenbei zu lernen.

Gliederungsnavigator

Drücken Sie Cmd+Shift+O / Ctrl+Shift+O, um das Gliederungs-Panel zu öffnen. Es zeigt eine strukturierte Übersicht Ihres Diagramms: Knoten, Verbindungen, Teilnehmer, Zustände und weitere Elemente, nach Typen gruppiert. Klicken Sie auf ein beliebiges Element, um zu seiner Zeile im Editor zu springen.

Diagramm-Builder

Drücken Sie Cmd+Shift+B / Ctrl+Shift+B, um das Diagramm-Builder-Panel zu öffnen. Es zeigt kontextbezogene Schaltflächen für den Diagrammtyp, den Sie gerade bearbeiten. Klicken Sie auf eine beliebige Schaltfläche, um die entsprechende Mermaid-Syntax an Ihrer Cursorposition einzufügen, inklusive Platzhaltertext, durch den Sie sich per Tabulator bewegen können.

Der Diagramm-Builder passt sich Ihrem Diagrammtyp an:

Vorlagen

Mermster unterstützt zwei Arten von Vorlagen:

• Integrierte Vorlagen: 12 Startdiagramme, verfügbar auf dem Willkommensbildschirm und beim Erstellen einer neuen Datei.
• Eigene Vorlagen: Speichern Sie ein beliebiges Diagramm als wiederverwendbare Vorlage über Datei > Als Vorlage speichern oder über die Befehlspalette. Geben Sie ihr einen Namen, eine optionale Beschreibung und eine Kategorie. Ihre Vorlagen werden unter Meine Vorlagen angezeigt, sobald Sie eine neue Datei erstellen.

Datensicherheit

Mermster schützt Ihre Arbeit automatisch, damit Sie sich keine Sorgen machen müssen, sie zu verlieren.

Automatisches Speichern

Mermster speichert in regelmäßigen Abständen eine Wiederherstellungskopie Ihrer ungespeicherten Arbeit. Wenn die App unerwartet beendet wird, wartet Ihre Arbeit beim Neustart auf Sie. Sie können das Intervall unter Einstellungen > Datensicherheit > Intervall für automatisches Speichern anpassen (Optionen: deaktiviert, 15 Sekunden, 30 Sekunden, 1 Minute oder 2 Minuten).

Wiederherstellung nach Abstürzen

Wenn Mermster nicht sauber beendet wird (durch einen Absturz, ein erzwungenes Beenden oder einen Stromausfall), erscheint beim nächsten Start ein Wiederherstellungsdialog. Er listet alle Dokumente mit ungespeicherten Änderungen auf und ermöglicht Ihnen Folgendes:

• Wiederherstellen: das Dokument in einem neuen Tab wiederherstellen.
• Verwerfen: die Wiederherstellungsdaten dauerhaft löschen.
• Alle wiederherstellen / Alle verwerfen: alles auf einmal erledigen.

Sie können auch jederzeit in der Befehlspalette nach Ungespeicherte Arbeit wiederherstellen suchen.

Versionsverlauf

Jedes Mal, wenn Sie speichern, erstellt Mermster eine Momentaufnahme. Durchsuchen Sie frühere Versionen, vergleichen Sie sie nebeneinander mit Ihrer aktuellen Datei und stellen Sie eine beliebige Version wieder her.

Öffnen Sie den Versionsverlauf mit Cmd+Shift+H (macOS) oder Ctrl+Shift+H (Windows) oder über Datei > Versionsverlauf.

Im Versionsverlauf-Panel können Sie:

• Vergleichen: einen Vergleich Ihrer aktuellen Datei mit einer ausgewählten Version nebeneinander ansehen.
• Wiederherstellen: eine frühere Version in einem neuen Tab öffnen.
• Löschen: einzelne Versionen entfernen oder den gesamten Verlauf einer Datei löschen.

Konfigurieren Sie die maximale Anzahl an Versionen pro Datei unter Einstellungen > Datensicherheit > Maximale Versionen pro Datei (Optionen: 10, 25, 50 oder 100). Identische Speicherungen werden automatisch übersprungen.

Anpassung

Öffnen Sie die Einstellungen mit Cmd+, (macOS) oder Ctrl+, (Windows).

App-Themen

Mermster bietet fünf Themenmodi:

Editor-Themen

Unabhängig vom App-Thema können Sie ein Farbschema für den Code-Editor wählen. Mermster enthält 10 Editor-Themen:

Stellen Sie es auf Auto (die Standardeinstellung), damit das Editor-Thema Ihrem App-Thema automatisch folgt. Ändern Sie die Editor-Themen unter Einstellungen > Darstellung > Editor-Thema.

Sprache

Mermster ist in 7 Sprachen verfügbar: Englisch, Japanisch (日本語), Vereinfachtes Chinesisch (简体中文), Traditionelles Chinesisch (繁體中文), Spanisch (Español), Französisch (Français) und Deutsch. Ändern Sie die Sprache unter Einstellungen > Allgemein > Sprache oder stellen Sie sie auf System, um Ihrer Betriebssystemeinstellung zu folgen.

Funktionshinweise

Wenn Sie bestimmte Funktionen zum ersten Mal nutzen, zeigt Mermster einen kurzen Hinweis, der erklärt, was diese Funktionen tun. Hinweise erscheinen für den Gliederungsnavigator, den Diagramm-Builder, den Versionsverlauf, die Export-Voreinstellungen, die Befehlspalette und die Diagramm-Minikarte. Wenn Sie einen Hinweis schließen, können Sie ihn erneut anzeigen, indem Sie auf die Schaltfläche ? neben der Funktion klicken oder zu Einstellungen > Hinweise > Alle Hinweise erneut anzeigen gehen.

Lizenzierung

So aktivieren Sie

1. Beim ersten Export: Mermster öffnet den Aktivierungsdialog. Geben Sie Ihren Lizenzschlüssel ein oder klicken Sie auf eine Schaltfläche zum Kauf, um einen zu erwerben.
2. Über das Menü: Gehen Sie zu Hilfe > Lizenz aktivieren oder öffnen Sie Einstellungen > Lizenz.

Fügen Sie Ihren Lizenzschlüssel ein (Format: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX) und klicken Sie auf Aktivieren. Die Aktivierung erfordert eine kurze Internetverbindung; danach funktioniert Ihre Lizenz jedoch 30 Tage lang offline, bevor Sie sich erneut anmelden müssen.

So deaktivieren Sie

So übertragen Sie Ihre Lizenz auf einen neuen Computer:

1. Öffnen Sie Einstellungen > Lizenz.
2. Klicken Sie auf Lizenz deaktivieren.
3. Bestätigen Sie die Deaktivierung.

Dadurch wird ein Geräteplatz frei, sodass Sie es auf einem anderen Rechner aktivieren können. Wenn Sie ohne Deaktivierung deinstallieren, wenden Sie sich an mermster@viaelo.app, um den Platz wiederherzustellen.

Tastenkürzel

Ersetzen Sie unter Windows Cmd durch Ctrl.

Datei

Bearbeiten

Ansicht

Export

Häufige Fragen (FAQ)

Benötigt Mermster eine Internetverbindung?

Nein. Mermster funktioniert vollständig offline. Die einzigen Funktionen, die Internet benötigen, sind die Lizenzaktivierung bzw. Deaktivierung und Suche nach Updates. Die kostenlose Version benötigt überhaupt kein Internet.

Welche Mermaid-Diagrammtypen werden unterstützt?

Alle: Flussdiagramme, Sequenzdiagramme, Klassendiagramme, ER-Diagramme, Gantt-Diagramme, Zustandsdiagramme, Mindmaps, Kreisdiagramme, Git-Graphen, Zeitleisten, User Journeys, Quadrantendiagramme und alle neuen Typen, die in künftigen Mermaid-Versionen hinzukommen.

Kann ich Mermster auf mehreren Geräten verwenden?

Ja. Eine Persönlich-Lizenz erlaubt bis zu 5 Geräte. Eine Kommerziell-Lizenz erlaubt bis zu 10 Geräte. Sie können ein Gerät jederzeit deaktivieren, um einen Platz freizumachen.

Werden meine Daten irgendwohin gesendet?

Nein. Mermster hat keinerlei Telemetrie, keine Analyse und kein Tracking. Ihre Diagramme, Dateien und Einstellungen bleiben vollständig auf Ihrem Computer. Die einzigen Netzwerkanfragen sind die Lizenzvalidierung und die Updateprüfung.

Welches Dateiformat verwendet Mermster?

Standard-Textdateien im Format .mmd und .mermaid. Es ist reiner Text. Versionieren Sie sie mit Git, öffnen Sie sie in jedem Editor und teilen Sie sie ganz nach Belieben.

Kann ich die kostenlose Version für kommerzielle Zwecke nutzen?

Ja. Die kostenlose Version hat keine Einschränkung beim Anwendungsfall. Wenn Sie jedoch Diagramme professionell teilen und das Wasserzeichen nicht angemessen ist, entfernt es die Lizenz Persönlich (29 $) oder Kommerziell (59 $).

Wie suche ich nach Updates?

Gehen Sie zu Hilfe > Nach Updates suchen. Mermster benachrichtigt Sie, wenn eine neuere Version verfügbar ist.

Fehlerbehebung

Windows-SmartScreen-Warnung

Wenn Sie Mermster zum ersten Mal unter Windows ausführen, sehen Sie möglicherweise eine SmartScreen-Warnung mit dem Hinweis „Der Computer wurde durch Windows geschützt”. Das liegt daran, dass wir noch kein Extended-Validation-Zertifikat für die Code-Signatur unter Windows erworben haben. Die macOS-Version ist vollständig von Apple signiert und notarisiert.

So fahren Sie fort:

1. Klicken Sie im SmartScreen-Dialog auf Weitere Informationen.
2. Klicken Sie auf Trotzdem ausführen.
3. Das passiert nur einmal. Windows merkt sich Ihre Wahl.

Diagramm wird nicht gerendert

Wenn die Vorschau einen Fehler statt Ihres Diagramms anzeigt:

• Prüfen Sie den Editor auf rote Wellenlinien. Sie weisen auf Syntaxfehler hin.
• Stellen Sie sicher, dass Ihr Diagramm mit einer gültigen Typdeklaration beginnt (z. B. graph TD, sequenceDiagram, classDiagram).
• Versuchen Sie, eine neue Datei aus einer Vorlage zu erstellen, um zu bestätigen, dass die Vorschau funktioniert, und vergleichen Sie sie dann mit Ihrem Code.

Export sieht unscharf aus

Wenn Ihr PNG-Export unscharf aussieht, erhöhen Sie die DPI-Einstellung im Export-Dialog. Verwenden Sie 144 DPI für Retina-Bildschirme oder 300 DPI für den Druck. Für scharfe Ausgabe in jeder Größe exportieren Sie stattdessen als SVG.

Lizenzaktivierung fehlgeschlagen

• Prüfen Sie Ihre Internetverbindung. Die Aktivierung benötigt eine einmalige Online-Prüfung.
• Stellen Sie sicher, dass Sie den vollständigen Lizenzschlüssel inklusive Bindestrichen kopieren.
• Wenn Sie Ihr Gerätelimit erreicht haben, deaktivieren Sie zuerst ein vorhandenes Gerät (Einstellungen > Lizenz auf diesem Gerät).
• Wenden Sie sich an mermster@viaelo.app, wenn das Problem weiterhin besteht.

Lizenzschlüssel verloren

Schreiben Sie eine E-Mail an mermster@viaelo.app mit der E-Mail-Adresse, die Sie für den Kauf verwendet haben. Wir können ihn nachschlagen.

Support erhalten

Schreiben Sie eine E-Mail an mermster@viaelo.app. Sie können uns auch innerhalb der App über Hilfe > Feedback senden oder Hilfe > Problem melden erreichen.