Features
A top-to-bottom tour of what MMD Studio can do today. Everything here is available in the free plan with or without an account (sync and link sharing require signing in).
The editor
The editor is CodeMirror 6 configured with Mermaid syntax highlighting, fold-by-indent, search, and a custom dark theme. The right-hand pane is the live preview, rendered by Mermaid itself with debounced updates as you type.
- Pan and zoom on the preview for large diagrams.
- Fit to window returns you to a full view.
- Resizable split — drag the divider to give the editor or preview more room. The width is remembered across sessions.
- Hide the editor entirely with the file icon in the toolbar to review just the rendered preview.
Templates
The + New button in the top bar opens a two-option menu: Blank diagram or From template. Templates cover all of the major Mermaid diagram types with sensible starter content:
- Flowchart, sequence, class, state, entity-relationship
- User journey, gantt, pie, quadrant, requirement
- Git graph, mindmap, timeline, sankey, XY chart
- Block, packet, kanban, architecture, C4
If you're already editing something, picking a new template creates a new diagram so you don't lose the one you were on (unless the current diagram is unedited, in which case it's repurposed).
My Diagrams sidebar
The folder icon on the left of the toolbar toggles the My Diagrams sidebar. It shows all your diagrams sorted by recency, with a Users icon next to any that are currently shared. Clicking an entry opens it; hovering reveals a trash icon that deletes it.
The sidebar also lists any shared diagrams you've opened from other people's links. These appear with the owner's email underneath and are read-only — removing them from your sidebar doesn't touch the original on the server.
Sharing
See Sharing & permissions for the full write-up. In short:
- Private — only you can see the diagram. The default for everything you create.
- Anyone with the link — the
/d/<id>URL becomes a public read-only view. - Can edit — coming soon. Will let signed-in viewers edit the same diagram collaboratively.
Sync across devices account required
Signed-in users get automatic sync between every browser they sign
in from. The sync engine pushes local changes on every edit and
pulls the latest when the app regains focus. Conflicts are resolved
by last-write-wins on updatedAt, and deletes use
tombstones so you don't see a diagram silently reappear after
deleting it on another device.
Sync is also how anon → account migration works: any diagrams you created while signed out are folded into your account on first login and pushed to the server automatically.
URL-driven navigation
The browser URL tracks whichever diagram you're currently viewing.
You can bookmark https://mmd.studio/d/<id> for
any of your own diagrams and come back to it directly — it works
whether the diagram is private or shared.
Exports
- .mmd — download the raw Mermaid source. Good for version control, diffing, or opening in another editor.
- PNG — a 2× scaled rasterization of the current preview, with a white background for easy embedding in slides and documents.
Light & dark mode
Defaults to your system preference and can be toggled from the top bar. The Mermaid rendering theme swaps with the UI theme so your diagrams look right in both.
API tokens & agent integration account required
Every signed-in user can create API tokens from Settings → API tokens. Tokens authenticate a simple REST API that supports CRUD on your diagrams — enough surface area to drive the app from a script or an AI agent. See API tokens and Agent integration for setup.
Local-first & offline
MMD Studio works fully offline. Your diagrams live in browser localStorage and sync opportunistically when you're online and signed in. No network means no lost work — it just means the next sync hasn't run yet.