Mit AppKit gezeichnet
Jeder Knoten ist eine echte View, kein div auf einer Webseite, das eins vortäuscht. Das Scrollen bleibt flüssig, weil es kein Dokument gibt, das neu umgebrochen werden müsste.
- AppKit
- NSView
- CoreGraphics
Mermaid, nativ gerendert
Der Mermaid-Editor, der auf deinem Mac nativ rendert
Bewege einen Knoten, und der Mermaid-Quellcode folgt. Ändere den Text, und die Canvas kompiliert neu.
- macOS 14.0+
- 34 Diagrammtypen
- PNG · SVG · PDF
- AI generieren & reparieren (Pro)
01
Alle drei Bereiche bearbeiten dasselbe Dokument
Ändere eine Farbe im Eigenschaften-Panel, und der Mermaid-Quellcode bekommt eine Stilregel, während sich die Canvas neu zeichnet. Keiner der drei ist ein Abbild der anderen.
christmas-flow.mmd
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
style C color:#ffffff,fill:#F4431E01
Änderungen werden als Mermaid zurückgeschrieben
Füge einen Knoten hinzu, verbinde zwei, ziehe eine Kante, füge etwas ein. Was die Canvas schreibt, ist Standard-Mermaid — keine Begleitdatei, kein privates Format.
02
Eigenschaften sind auch Mermaid
Füllung, Kontur, Textfarbe, Breite und Deckkraft werden zu gewöhnlichen Stilregeln, und der Inspektor sagt, woher der Stil stammt.
03
Ein Undo, nicht dreißig
Aufeinanderfolgende Eigenschaftenänderungen werden zu einem Text-Undo zusammengefasst. ⌥⌘I räumt das Dokument auf, ohne Kommentare oder die Reihenfolge der Anweisungen anzutasten.
02
Kein WebView. Keine JavaScript-Brücke. Kein Electron
Die meisten Mermaid-Werkzeuge sind ein Browser im Desktop-Kostüm. Mernyx zeichnet jeden Knoten nativ und berechnet jedes Layout nativ.
Layout nativ berechnet
Die Geometrie wird von einer eigenen Layout-Engine berechnet, nicht von einer Web-View. Mernyx kommt nicht ohne Abhängigkeiten aus — es ist nur kein Browser.
- Layout-Engine
- Kein JavaScript
Dateien, keine Dokumente
Öffne jede .mmd- oder .mermaid-Datei aus dem Finder. Sieh sie mit Quick Look an Ort und Stelle als Vorschau und sieh Thumbnails, ohne etwas zu starten.
- .mmd
- .mermaid
- Quick Look-Vorschau
03
34 Diagrammtypen
Flowchart, Sequence diagram, Class diagram, State diagram, ER diagram, Mindmap, C4 diagram, Gantt chart, User journey, Kanban diagram, XY chart, ZenUML diagram und 22 weitere — jeder mit eigener Tabelle für die Syntaxhervorhebung, eigenem Layout und eigenen Bearbeitungsregeln.
Flowchart
Sequence diagram
Class diagram
State diagram
ER diagram
Mindmap
Architecture diagram
Requirement diagram
Block diagram
Swimlane diagram
Agent flow diagram
Use case diagram
Pie chart
Gantt chart
Quadrant chart
Radar chart
Treemap
Kanban diagram
Packet diagram
Info diagram
Timeline
Sankey diagram
User journey
Venn diagram
C4 diagram
Cynefin diagram
Git graph
XY chart
Wardley map
Railroad diagram
ZenUML diagram
Event modeling diagram
Ishikawa diagram
Tree view
Abdeckung heißt: Jeder Diagrammtyp hat eine Vorlage, die zu einer nicht leeren Szene kompiliert. Es heißt nicht, dass jede Syntax- und jede visuelle Einzelheit fertig ist.
Flowcharts sind auf der Canvas vollständig bearbeitbar. Andere Diagrammtypen werden nach und nach fertig — was ein Typ nicht kann, wird in der App ausgegraut, mit Begründung.
04
Das Icon wird gezeichnet, nicht ausgeschrieben
Mermaid schreibt ein Icon als fa:fa-user. Der Mermaid-Renderer von GitHub zeichnet diese Buchstaben statt des Icons. Mernyx bringt die Glyphen von Font Awesome Free mit: Die Canvas zeigt das Icon — und das exportierte SVG trägt seinen Umriss statt eines Font-Verweises.
icons.mmd
flowchart LR
A([fa:fa-user User]) --> B([fa:fa-server Server])
B --> C([fa:fa-database Database])
Der ganze kostenlose Satz, in der App
Font Awesome Free 7.3.1 ist in Mernyx enthalten — 2.163 Icons in den Stilen solid, regular und brands. Nichts zu installieren, nichts zu laden: die Glyphen stecken in der Binärdatei, und die Datei, die du exportierst, braucht sie ebenfalls nicht.
Der Export trägt den Umriss
Das Icon landet als Pfad im SVG, nicht als Fontname. Öffnest du die Datei auf einem Rechner ohne Font Awesome Free, ist das Icon trotzdem da und skaliert mit dem Rest der Zeichnung.
Der Knoten kann das Icon sein
Ein Knoten kann das Icon selbst sein: @{ icon: “fa:user” } zeichnet einen Rahmen um die Glyphe, mit dem Label auf einem Band außerhalb. Derselbe Satz, eine Form mehr zur Auswahl.
Beide Formen stammen von Mermaid selbst — fa:fa-user in einem Label, @{ icon: … } an einem Knoten. Es gibt nichts Mernyx-Spezifisches zu lernen, und die Datei bleibt eine einfache .mmd.
05
Ein Diagramm beschreiben oder eines reparieren, das nicht kompiliert
Zwei Einstiege, beide auf deinem eigenen Endpunkt und deinem eigenen Schlüssel. Das Modell schreibt ausschließlich Mermaid-Quellcode — Mernyx kompiliert, layoutet und zeichnet ihn, und nichts erreicht deine Datei, bevor du zustimmst.
Ein Diagramm aus einem Satz erzeugen
Schreibe in die Leiste unterhalb der Canvas. Der Mermaid-Quellcode streamt in den Editor, und die Canvas zeichnet ihn schon während des Eintreffens, sodass du jede Zeile lesen kannst, bevor sie landet. Mernyx kompiliert das Ergebnis; lässt es sich nicht parsen, gehen die Fehler zurück an das Modell, das es erneut versucht. Deine Datei bleibt unangetastet, bis du Apply drückst — und ein Apply ist mit einem ⌘Z zurückgenommen.
Das Diagramm reparieren, das nicht kompiliert
Lässt sich der Quellcode nicht parsen, bietet die Diagnoseleiste Fix with AI an. Die fehlerhafte Datei und ihre Diagnosen gehen an dein Modell, und was zurückkommt, wird zuerst als Zeilendiff gezeigt — du siehst also genau, was sich geändert hat, bevor du es übernimmst. Apply erscheint nur, wenn die Fehlerzahl tatsächlich gesunken ist, und dieses Urteil kommt von der Engine, nicht vom Modell.
Dein Endpunkt, dein Schlüssel
Richte Mernyx auf einen beliebigen OpenAI-kompatiblen Endpunkt — OpenAI, OpenRouter, DeepSeek, Groq, Qwen oder ein Modell, das über Ollama oder LM Studio auf diesem Mac läuft. Der Schlüssel liegt in deiner macOS-Keychain, und die Anfrage geht von deinem Mac an den Anbieter, den du gewählt hast. Mernyx hat kein Konto und keinen Server dazwischen.
Ein Modell schreibt, die Engine zeichnet
Das Modell liefert Mermaid-Quellcode und nichts sonst. Layout, Farben und Formen entscheidet weiterhin die Engine von Mernyx, ein erzeugtes Diagramm wird also von demselben Renderer gezeichnet wie eines, das du von Hand gezeichnet hast.
Prüfen, dann anwenden
Beide Wege enden in Apply oder Discard. Discard fasst das Dokument nicht an und landet auch nicht im Undo-Stapel; Apply ersetzt es in einem Schritt, den du mit ⌘Z zurücknehmen kannst.
AI-Generierung und -Reparatur gehören zu Pro. In der kostenlosen Stufe kannst du Endpunkt, Modell und Schlüssel vorab einstellen — sie funktionieren, sobald Pro freigeschaltet ist.
Alles, was das Fenster sonst noch kann
Acht kleinere Dinge, die nie ein eigenes Kapitel bekommen und die dir sofort fehlen, wenn du sie nicht mehr benutzt.
Export
PNG, SVG und PDF, alle aus derselben Szene erzeugt und nicht durch den Umweg über den Druckdialog des Browsers — auch wenn manche Primitive in den Raster-Exporten noch leicht anders aussehen.
Dokument formatieren
⌥⌘I vereinheitlicht Leerraum und die Einrückung von Flowchart-Blöcken, ohne Token-Inhalt, Kommentare oder die Reihenfolge der Anweisungen anzutasten.
Verknüpfung von Quellcode ↔ Canvas
Setze den Cursor im Quellcode auf einen Knoten, und die Canvas hebt ihn hervor — sie scrollt nur, wenn er außerhalb des Bildschirms liegt, und nimmt nie den Tastaturfokus. Umschalten in Settings › Canvas › Linkage.
Quick Look & Thumbnails
Sieh dir .mmd- und .mermaid-Dateien direkt im Finder an, mit Scroll-Zoom, Ziehen zum Verschieben und dem hellen oder dunklen Systemmodus.
Beispiele & Vorlagen
14 Szenario-Beispiele plus ein Startgerüst für jeden der 34 Diagrammtypen, gruppiert in 5 durchsuchbare Kategorien.
Tastatur zuerst
Menüpunkte werden je Diagrammtyp und je Auswahl aktiviert, und Tastenkürzel und Menü teilen sich eine Bindungstabelle.
Diagnosen mit Position
Jeder Diagrammtyp führt seine eigene Schlüsselworttabelle mit Fakten der Engine zusammen, deshalb sind Diagnosen mit Position als Quellcode-Bereiche markiert.
Optionales Canvas-Raster
Standardmäßig aus, und es beeinflusst niemals das Export-Ergebnis.
Der Mermaid-Spickzettel
Die Sprache von Mermaid ist über Dutzende von Diagrammtypen verteilt dokumentiert. Der Spickzettel deckt die Kerntypen ab: den Quellcode, das Diagramm, das er zeichnet, und eine Zeile dazu, wozu jede Regel da ist.
Eine Regel aus dem Spickzettel
diagram.mmd
flowchart LR
A[Start] --> B[Middle] --> C[End]
Richtung · Die erste Zeile bestimmt den Fluss: TD und TB sind dasselbe, LR und RL laufen seitlich.
Spickzettel öffnenJedes Diagramm im Spickzettel zeichnet Mernyx selbst — mit demselben nativen Renderer, den die App für ihre Canvas benutzt.
Der Index des Spickzettels
34 Diagrammtypen, eine Seite pro Typ.
- Agent flow diagram4 Regeln
- Architecture diagram4 Regeln
- Block diagram4 Regeln
- C4 diagram3 Regeln
- Class diagram6 Regeln
- Cynefin diagram3 Regeln
- ER diagram4 Regeln
- Event modeling diagram4 Regeln
- Flowchart11 Regeln
- Gantt chart4 Regeln
- Git graph4 Regeln
- Info diagram1 Regel
- Ishikawa diagram2 Regeln
- Kanban diagram3 Regeln
- Mindmap4 Regeln
- Packet diagram2 Regeln
- Pie chart3 Regeln
- Quadrant chart4 Regeln
- Radar chart4 Regeln
- Railroad diagram4 Regeln
- Requirement diagram4 Regeln
- Sankey diagram3 Regeln
- Sequence diagram8 Regeln
- State diagram7 Regeln
- Swimlane diagram4 Regeln
- Timeline3 Regeln
- Tree view3 Regeln
- Treemap3 Regeln
- Use case diagram4 Regeln
- User journey3 Regeln
- Venn diagram3 Regeln
- Wardley map3 Regeln
- XY chart4 Regeln
- ZenUML diagram2 Regeln
Fragen
Braucht Mernyx einen Browser, um ein Diagramm zu rendern?
Nein — es gibt darin weder ein WebView noch eine JavaScript-Brücke. Die Geometrie wird von einer eigenen Layout-Engine berechnet, und jede Form wird mit CoreGraphics gezeichnet.
Welche Diagrammtypen kann ich auf der Canvas bearbeiten?
Flowcharts bieten das umfangreichste Bearbeiten auf der Canvas: Knoten hinzufügen und löschen, Kanten verbinden und neu verbinden, einen Knoten in eine Kante einfügen, umformatieren und vor Ort umbenennen. Andere Diagrammtypen unterstützen einen wachsenden Teil davon, und Umbenennen funktioniert fast überall. Statt hier aufzuzählen, was unterstützt wird und was nicht, ist die App selbst die Autorität — was ein Typ nicht kann, wird ausgegraut und kurz erklärt, statt still nichts zu tun.
Kann ich Font-Awesome-Icons verwenden?
Ja — die eigene Syntax von Mermaid, und Mernyx zeichnet die Glyphe statt der Buchstaben. Der komplette Satz Font Awesome Free ist dabei: 2.163 Icons in den Stilen solid, regular und brands, nichts zu installieren und nichts zu laden. Ein Knoten kann auch das Icon selbst sein, mit @{ icon: “fa:user” }. Zwei Dinge sind nicht dabei: die Stile, die es nur in Pro gibt (fal: und fak:), und jede Icon-Sammlung außer Font Awesome. Ein Name außerhalb des mitgelieferten Satzes lässt eine Lücke in der Breite eines Icons und zeichnet nichts — das Dokument geht nie kaputt.
Kann es ein Diagramm für mich schreiben?
Generate (⇧⌘G) macht aus einem Satz Mermaid-Quellcode. Er streamt in den Editor, während die Canvas ihn zeichnet, Mernyx kompiliert das Ergebnis, und lässt es sich nicht parsen, gehen die Fehler für einen weiteren Versuch zurück an das Modell. Deine Datei bleibt unangetastet, bis du Apply drückst — und ein Apply ist mit einem ⌘Z zurückgenommen. Es ist ein Formular und eine Prüfung, kein Chat-Fenster.
Kann es einen Syntaxfehler für mich beheben?
Lokal gibt es keine Reparatur per Klick — die Diagnosen werden gegen die Schlüsselworttabelle jedes Diagrammtyps abgeglichen, und dahinter stehen keine deterministischen Umschreibregeln. Fix with AI (⌥⌘F) gibt es: Es schickt den fehlerhaften Quellcode an den von dir konfigurierten AI-Endpunkt und liefert ein korrigiertes Dokument, das du vor dem Anwenden prüfst.
Wohin geht mein Diagramm, wenn ich die AI nutze?
Direkt von deinem Mac an den Endpunkt, den du konfiguriert hast. Mernyx hat kein Konto und keinen Server dazwischen: der Schlüssel liegt in deiner macOS-Keychain, die Anfrage geht an den Anbieter, den du gewählt hast, und sonst verlässt nichts deinen Mac. Deshalb gibt es auch nichts pro Nutzung abzurechnen — die Tokens sind deine. AI-Generierung und -Reparatur gehören zu Pro, und die kostenlose Stufe lässt dich Endpunkt, Modell und Schlüssel vorab einstellen.
Schreibt es mein Quellcode-Format um?
Änderungen an Eigenschaften und Beschriftungen patchen genau den betroffenen Bereich im Quellcode. Strukturelle Änderungen gruppieren das Dokument neu — erst Knoten, dann Kanten, dann Styles —, was Leerraum vereinheitlicht und deine ursprüngliche Anordnung nicht erhält. ⌥⌘I ist der sanftere Weg: Er behält Token-Inhalt, Kommentare und die Reihenfolge der Anweisungen.
Was braucht es?
macOS 14 oder neuer. Es ist eine native App, es gibt also keinen Browser, keine Laufzeitumgebung und kein Plugin, das man daneben installieren müsste.
Wie fertig ist Mernyx?
Ein fokussiertes Werkzeug statt eines fertigen — es steht bei Version 1.0.0 und ändert sich oft. Wenn einer deiner Abläufe davon abhängt, schreib an hi@mernyx.com, bevor du darauf aufbaust, und ich sage dir geradeheraus, ob es passt.
Wie melde ich einen Fehler oder schlage eine Funktion vor?
Schreib an hi@mernyx.com. Mernyx ist ein Ein-Personen-Projekt, und jede Nachricht wird gelesen.
Nativ zeichnen
Mernyx ist ein einziges natives Fenster: links der Quellcode, in der Mitte eine echte Vektor-Canvas, rechts die Eigenschaften.