Drawn by AppKit
Every node is a real view, not a div in a web page pretending to be one. Scrolling stays smooth because there is no document to reflow.
- AppKit
- NSView
- CoreGraphics
Visual Mermaid, Natively
A Mermaid editor that renders natively on your Mac.
Move a node and the Mermaid source follows. Edit the text and the canvas recompiles.
- macOS 14.0+
- 34 diagram families
- PNG · SVG · PDF
- AI generate & fix (Pro)
01
All three panes edit the same document.
Change a colour in the properties panel and the Mermaid source gains a style rule while the canvas redraws. None of the three is a picture of the others.
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
Edits write back as Mermaid
Add a node, connect two, drag an edge, paste. What the canvas writes is standard Mermaid — not a sidecar file, not a private format.
02
Properties are Mermaid too
Fill, stroke, text colour, width and opacity become ordinary style rules, and the inspector says where the style came from.
03
One undo, not thirty
Consecutive property edits merge into one text undo. ⌥⌘I tidies the document without touching comments or statement order.
02
No WebView. No JavaScript bridge. No Electron.
Most Mermaid tooling is a browser wearing a desktop costume. Mernyx draws every node natively and resolves every layout natively.
Layout computed natively
Geometry is computed by a dedicated layout engine, not laid out by a web view. Mernyx is not dependency-free — it is just not a browser.
- Layout engine
- No JavaScript
Files, not documents
Open any .mmd or .mermaid file from Finder. Preview it in place with Quick Look, and see thumbnails without launching anything.
- .mmd
- .mermaid
- Quick Look
03
34 diagram families
Flowchart, sequence, class, state, ER, mindmap, C4, gantt, journey, kanban, xychart, ZenUML and 22 more — each with its own syntax-highlighting keyword table, its own layout, and its own editing rules.
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
Coverage means every family has a template that compiles to a non-empty scene. It does not mean every syntax and visual detail is finished.
Flowcharts are fully editable on the canvas. Other families support a growing subset — the capability matrix lists what each of the 34 can do, and in the app an action a family cannot do is not offered at all.
04
The icon is drawn, not spelled out
Mermaid spells an icon as fa:fa-user. GitHub’s Mermaid renderer draws those letters instead of the icon. Mernyx ships the Font Awesome Free glyphs, so the canvas shows the icon — and the exported SVG carries its outline rather than a font reference.
icons.mmd
flowchart LR
A([fa:fa-user User]) --> B([fa:fa-server Server])
B --> C([fa:fa-database Database])
The whole free set, in the app
Font Awesome Free 7.3.1 ships inside Mernyx — 2,163 icons across the solid, regular and brands styles. Nothing to install and nothing to download: the glyphs are in the binary, and the file you export does not need them either.
The export carries the outline
The icon goes into the SVG as a path, not as a font name. Open that file on a machine with no Font Awesome Free installed and the icon is still there, scaling with the rest of the drawing.
The node can be the icon
A node can be the icon itself: @{ icon: “fa:user” } draws a frame around the glyph with the label on a band outside it. Same set, one more shape to reach for.
Both forms are Mermaid’s own — fa:fa-user in a label, @{ icon: … } on a node. Nothing Mernyx-specific to learn, and the file stays a plain .mmd.
05
Describe the diagram, or fix the one that won’t compile.
Two entry points, both running on your own endpoint and your own key. The model only ever writes Mermaid source — Mernyx still compiles, lays out and draws it, and nothing reaches your file until you approve it.
Generate a diagram from a sentence
Type into the bar at the bottom of the canvas. The Mermaid source streams into the editor and the canvas draws it while it is still arriving, so you can read every line before it lands. Mernyx compiles the result; if it does not parse, the errors go back to the model and it tries again. Your file stays untouched until you press Apply — and Apply is a single ⌘Z from undone.
Fix the one that will not compile
When the source does not parse, the diagnostics bar offers Fix with AI. The broken file and its diagnostics go to your model, and what comes back is shown as a line diff first — so you see exactly what changed before you take it. Apply only appears when the error count actually went down, and that verdict comes from the engine, not from the model.
Your endpoint, your key
Point Mernyx at any OpenAI-compatible endpoint — OpenAI, OpenRouter, DeepSeek, Groq, Qwen, or a model running on this Mac through Ollama or LM Studio. The key lives in your macOS keychain and the request goes from your Mac to the provider you picked. Mernyx has no account and no server in the middle.
A model writes, the engine draws
The model returns Mermaid source and nothing else. Layout, colours and shapes are still decided by Mernyx’s engine, so a generated diagram is drawn by the same renderer as one you drew by hand.
Review, then apply
Both paths end in Apply or Discard. Discard never touches the document and never enters the undo stack; Apply replaces it in one step you can undo with ⌘Z.
AI generate and fix are part of Pro. On the free tier you can set the endpoint, the model and the key up front — they start working the moment Pro is unlocked.
Everything else the window does
Eight smaller things that never get a chapter of their own, and that you would miss the moment you stopped using them.
Export
PNG, SVG and PDF, all produced from the same Scene rather than by round-tripping through a browser print dialog — though a few primitives still come out slightly differently in the raster exports.
Format Document
⌥⌘I normalises whitespace and flowchart block indentation without touching token content, comments or statement order.
Source ↔ canvas linkage
Put the caret on a node in the source and the canvas highlights it — scrolling only if it is off-screen, and never stealing keyboard focus. Toggle in Settings › Canvas › Linkage.
Quick Look & thumbnails
Preview .mmd and .mermaid files straight in Finder, with scroll-zoom, drag-pan and system light/dark.
Samples & templates
14 scenario samples, plus a starting skeleton for every one of the 34 families, grouped into 5 searchable categories.
Keyboard-first
Menu items enable per diagram family and per selection, and the shortcuts and the menu share one binding table.
Diagnostics with positions
Each family merges its own keyword table with facts from the engine, so diagnostics that have a location are marked as source ranges.
Optional canvas grid
Off by default, and it never affects exported output.
The Mermaid cheat sheet
Mermaid's language is documented across dozens of families. The cheat sheet covers the core ones: the source, the diagram it draws, and one line on what each rule is for.
One rule from the sheet
diagram.mmd
flowchart LR
A[Start] --> B[Middle] --> C[End]
Direction · The first line picks the flow: TD and TB are the same, LR and RL run sideways.
Open the cheat sheetEvery diagram on the cheat sheet is drawn by Mernyx itself — the same native renderer the app uses for its canvas.
The cheat sheet's index
34 families, one page each.
- Agent flow diagram4 rules
- Architecture diagram4 rules
- Block diagram4 rules
- C4 diagram3 rules
- Class diagram6 rules
- Cynefin diagram3 rules
- ER diagram4 rules
- Event modeling diagram4 rules
- Flowchart11 rules
- Gantt chart4 rules
- Git graph4 rules
- Info diagram1 rule
- Ishikawa diagram2 rules
- Kanban diagram3 rules
- Mindmap4 rules
- Packet diagram2 rules
- Pie chart3 rules
- Quadrant chart4 rules
- Radar chart4 rules
- Railroad diagram4 rules
- Requirement diagram4 rules
- Sankey diagram3 rules
- Sequence diagram8 rules
- State diagram7 rules
- Swimlane diagram4 rules
- Timeline3 rules
- Tree view3 rules
- Treemap3 rules
- Use case diagram4 rules
- User journey3 rules
- Venn diagram3 rules
- Wardley map3 rules
- XY chart4 rules
- ZenUML diagram2 rules
Questions
Does Mernyx need a browser to render a diagram?
No — there is no WebView and no JavaScript bridge anywhere in it. Geometry is computed by a dedicated layout engine, and every shape is drawn with CoreGraphics.
Which diagram families can I edit on the canvas?
Flowcharts get the fullest canvas editing: add and delete nodes, connect and reconnect edges, insert a node mid-edge, restyle, and rename in place. Other families support a growing subset of that, and renaming works almost everywhere. The capability matrix lists all 34 families and exactly what each one can do — on the canvas and in the source — so you can check your own diagram before you buy. The app says the same thing: an action a family cannot do is not offered at all, and one that is only unavailable right now is greyed out rather than quietly doing nothing.
Can I use Font Awesome icons?
Yes — Mermaid’s own syntax, and Mernyx draws the glyph instead of the letters. The whole Font Awesome Free set is bundled: 2,163 icons across the solid, regular and brands styles, nothing to install and nothing to download. A node can also be the icon itself, with @{ icon: “fa:user” }. Two things are not in the box: the Pro-only styles (fal: and fak:) and any icon pack beyond Font Awesome. A name outside the bundled set leaves a gap the width of one icon and draws nothing — it never fails the document.
Can it write a diagram for me?
Generate (⇧⌘G) turns a sentence into Mermaid source. It streams into the editor while the canvas draws it, Mernyx compiles the result, and if it does not parse the errors go back to the model for another attempt. Your file is untouched until you press Apply — and Apply is a single ⌘Z from undone. It is a form and a review, not a chat window.
Can it fix a syntax error for me?
There is no local one-click fix — diagnostics are matched against each family’s keyword table, and there are no deterministic rewrite rules behind them. Fix with AI (⌥⌘F) does exist: it sends the broken source to the AI endpoint you configured and returns a corrected document you review before applying.
Where does my diagram go when I use the AI?
Straight from your Mac to the endpoint you configured. Mernyx has no account and no server in the middle: the key sits in your macOS keychain, the request goes to the provider you picked, and nothing else leaves your Mac. That is also why there is nothing to bill per use — the tokens are yours. AI generate and fix are part of Pro, and the free tier lets you set the endpoint, the model and the key up front.
Will it rewrite my source formatting?
Property and label edits patch the exact source range. Structural edits re-group the document — nodes, then edges, then styles — which normalises whitespace and does not preserve your original layout. ⌥⌘I is the gentler path: it keeps token content, comments and statement order.
What does it need?
macOS 14 or later. It is a native app, so there is no browser, runtime or plugin to install alongside it.
How finished is Mernyx?
A focused tool rather than a finished one — it is at version 1.0.0 and it changes often. If a workflow of yours depends on it, email hi@mernyx.com before you build on it, and I will tell you straight whether it fits.
How do I report a bug or request a feature?
Email hi@mernyx.com. Mernyx is a one-person project and every message is read.
Draw it natively.
Mernyx is a single native window: source on the left, a real vector canvas in the middle, properties on the right.