Free Online Mermaid Editor: Write Syntax and Preview the Diagram Live

You need a flowchart in a pull request, a sequence diagram for a client handoff, or an ER sketch before you write the migration. Opening Lucidchart for that means another account. Opening draw.io means dragging boxes for twenty minutes. A VS Code preview is fine if you are already in the editor and you only need to check the file on disk.

A free online Mermaid editor is the smaller tool: a text box for Mermaid syntax and a preview that updates as you type. You work in the same source you would commit to a README. GitHub and GitLab already render it.

That is what AgentLeverage's Diagram Editor is. You write Mermaid in a textarea. The browser draws the diagram. There is no prompt that invents the chart from a sentence, and there is no drag-and-drop canvas.

Why people write Mermaid instead of drawing boxes

Mermaid is a small text language for diagrams. A flowchart looks like this:

flowchart TD
    A[Invoice arrives] --> B{Amount over $500?}
    B -->|No| C[Ops lead approves]
    B -->|Yes| D[Owner reviews]
    D --> E{Approve?}
    E -->|Yes| C
    E -->|No| F[Send back to vendor]
    C --> G[Pay on net-30]

That block lives in markdown. You can diff it, review it, and keep it next to the code it describes. When the process changes, you edit a few lines instead of nudging arrows on a canvas.

The catch is you cannot see the boxes until something renders the syntax. A free online Mermaid editor is that renderer: type on the left, look on the right, then paste the source into the doc or export a picture.

Open the editor and start from a sample

Open the Diagram Editor. You can use it without an account. The run stays in your browser and costs zero credits.

1. Pick a Diagram Type. Flowchart, sequence, class, state, ER, or Gantt each loads a starter you can edit.
2. Change the text in Mermaid Syntax. The preview on the right re-renders after a short pause.
3. Use the reset button if you want the starter for that type back.

Switching the type dropdown replaces whatever is in the box with that type's sample. Copy your current source somewhere first if you still need it.

If you already have Mermaid in a README, paste it. The type dropdown is only a starter picker. The preview sends whatever is in the textarea to Mermaid.

Write a real flowchart

Say ops asked you to document invoice approval so a new hire stops pinging the owner for every $80 software bill.

Open the editor, leave Flowchart selected, and replace the sample with the invoice chart above. Watch the preview: a diamond for the amount check, a second diamond for the owner's yes/no, and a straight line from the ops lead to "Pay on net-30."

Common edits, and what they do:

• flowchart TD draws top-to-bottom. LR draws left-to-right, which is often clearer for a short pipeline.
• Square brackets are boxes (A[Invoice arrives]). Curly braces are decisions (B{Amount over $500?}).
• --> is an arrow. -->|No| labels the arrow.
• A typo (a missing bracket, a node you never defined) turns the preview into a syntax error. The message is Mermaid's own. Fix the line and the diagram comes back.

You do not need every Mermaid feature for a useful chart. Most process docs are a dozen nodes and two or three decisions.

When the preview matches the process, copy the source into the README or the runbook. Or export a picture for Slack and slides. The Mermaid intro covers the rest of the syntax; the editor links there under the textarea.

Sequence, ER, state, class, and Gantt

The other starters cover the diagrams people actually put in specs:

Sequence. Request and response between a user, a client, a server, and a database. Useful when you are explaining why a submit button waits, or which hop owns a failure.

ER. Tables and relationships. Paste this when you want a reviewer to see USER ||--o{ ORDER before they read the migration.

State. Draft → Review → Approved → Published, with a path back to Draft. Good for editorial calendars and ticket lifecycles.

Class. Types, fields, and "belongs to" arrows. Handy next to a domain model, less handy as a substitute for the code.

Gantt. Dated bars for planning, build, and launch. The sample uses YYYY-MM-DD and after so you can shift a section without rewriting every date.

You can paste other Mermaid the library understands (pie charts, git graphs, user journeys). If Mermaid cannot parse it, you get the error panel instead of a picture. The six dropdown types are the ones with starters; they are not a hard cap.

Export SVG or PNG

When the preview looks right:

• Copy as PNG or Copy as SVG puts the render on the clipboard for a doc or a ticket.
• Download PNG or Download SVG saves a file.

PNG is the "paste into Slack or a slide" format. SVG stays sharp when someone zooms a wiki page.

Export reads the preview you already see. Empty syntax disables the buttons. A syntax error means there is nothing to export until you fix the source.

The diagram is not saved to an account. If you close the tab, you still have whatever you copied into git or downloaded.

When mermaid.live or a local preview is the better fit

mermaid.live is the official playground. Use it when you need theme and config JSON, a wider set of examples, or you want the same sandbox the Mermaid docs point at. Our editor is a smaller textarea-plus-preview with export, sitting next to the other AgentLeverage tools.

A VS Code or JetBrains Mermaid preview is better when the file already lives in the repo and you are iterating in the editor. You stay on the branch. You do not get a PNG for Slack unless you add another step.

draw.io, Lucidchart, or FigJam are better when the diagram is the artifact (a workshop board, a messy systems sketch, something non-technical people will keep dragging). Mermaid is a poor fit for that. The syntax fights you, and the people in the meeting will not edit it.

Use the browser editor when you want a quick render of source you already have, or a starter you can finish in a few minutes, without installing anything.

Where this falls short

You have to write Mermaid. The left pane is a textarea. If you do not know the syntax, start from a sample or read mermaid.js.org. The tool will not draft the diagram from "show me our signup flow."

It is not a canvas. You cannot drag a box, snap an arrow, or drop icons. Layout comes from the syntax and Mermaid's renderer. For a crowded chart, you will spend time on subgraphs and link styles, not on pixel nudging.

The type dropdown wipes the editor. Changing Flowchart to Sequence loads the sequence sample. That is easy to miss once.

Nothing is stored. Refresh, and you are back to the default flowchart sample. Keep the source in the file you actually ship.

Export is the rendered SVG or a PNG of that render. You do not get a .mmd download or a share link. The portable form is the text in the box.

Busy or unsupported syntax can fail. Mermaid's error text is technical. A missing end on a subgraph, or a diagram type the bundled library does not handle, looks like a red alert rather than a hint.

Client-only also means no collaboration. Two people cannot edit the same preview. Put the source in a pull request and argue there.

Check the diagram before you commit

A concrete pass, the kind you do before a Friday docs PR:

1. Open the Diagram Editor.
2. Pick Flowchart (or paste Mermaid you already wrote).
3. Edit until the preview matches the process. If the preview errors, fix the syntax in the box. Do not guess from memory and commit blind.
4. Copy the source into the markdown file GitHub will render.
5. If someone needs a picture in Slack or a deck, download PNG or SVG from the same preview.

You leave with text you can diff and, if you need it, a file you can drop in a channel. No install, no credits, and no claim that the editor wrote the diagram for you.

Try the Diagram Editor with a chart you were about to draw by hand.