MMD Studio
Open app

Getting started

MMD Studio is a browser-based editor for Mermaid diagrams. You can be drawing within thirty seconds without signing up for anything — this page walks you through the essentials.

Open the app

Head to mmd.studio. On your first visit you'll see a welcome dialog summarizing the app; dismiss it with Get started.

Create your first diagram

Click + New in the top-right corner and choose Blank diagram. An empty editor appears on the left and an empty preview on the right. Type some Mermaid: 

flowchart TD
    A[Start] --> B{Logged in?}
    B -->|Yes| C[Show app]
    B -->|No| D[Show sign-in]
    C --> E[End]
    D --> E

The preview updates automatically as you type (debounced to avoid flicker). Syntax errors surface inline so you know exactly where to fix them.

Start from a template

MMD Studio ships with 20+ starter templates covering every major Mermaid diagram type. Click the + New button and choose From template to browse them. Pick the one that matches what you're trying to show, tweak the starter content, and you've got a diagram.

  • Flowchart — step-by-step processes with decisions, branches, and loops.
  • Sequence diagram — time-ordered interactions between users, services, or systems.
  • Class diagram — object-oriented class hierarchies, fields, methods, and relationships.
  • State diagram — state machines and lifecycle transitions for any kind of entity.
  • Entity relationship — database schemas with tables, columns, and foreign keys.
  • User journey — user-experience steps annotated with satisfaction scores.
  • Gantt chart — project schedules with task durations, dependencies, and milestones.
  • Pie chart — proportional breakdowns of a whole.
  • Quadrant chart — 2×2 matrices for prioritization, positioning, or competitive mapping.
  • Requirement diagram — engineering requirements linked to the elements that verify them.
  • Git graph — branch and merge history, useful for explaining release flows.
  • Mindmap — hierarchical brainstorming and idea capture.
  • Timeline — events in chronological order, grouped by era or year.
  • Sankey — flow volumes between nodes (budgets, energy, user drop-off).
  • XY chart — line and bar charts on numeric axes for trends and comparisons.
  • Block diagram — free-form blocks with an arbitrary grid layout, for system sketches.
  • Packet diagram — byte-level network packet and file-format layouts.
  • Kanban — todo / in-progress / done boards for tracking work.
  • Architecture — cloud and service architecture with clear service/connection notation.
  • C4 diagram — system context, containers, and components in the C4 model.

Save and autosave

Saving is automatic. Every change is debounced and written to your browser's localStorage a second later. You'll see the diagram appear in the My Diagrams sidebar (click the folder icon on the left of the toolbar to open it).

Sign in to sync across devices account required

When you sign in via email + password or "Continue with Google", every diagram you created while signed out is migrated into your account and uploaded to the server. From then on, any browser you sign in from sees the same diagrams, kept in sync via a last-write-wins reconciliation on every focus and every edit.

If you were in the middle of editing a diagram when you signed in, don't worry — it's carried over under its new account-side id, with no interruption to your editing.

Share a diagram

Click the share icon in the toolbar. Logged-out users get a long URL that embeds the diagram's source directly — anyone who opens it gets a copy in their own browser.

Logged-in users get a proper share dialog: flip the diagram from Private to Anyone with the link and copy the short /d/<id> URL. Anyone who opens that URL gets a read-only view with your email as the owner, plus a Save a copy button if they want their own editable version. Read more in Sharing & permissions.

Export

Use the toolbar download icons to export:

  • .mmd — the raw Mermaid source as a text file.
  • PNG — a 2× scaled rasterization of the rendered diagram, good for slides and docs.

Next steps