7 Best Mermaid Diagram Editors in 2026

TL;DR: The Mermaid Live Editor is the free official editor, and mermaid.ai is its paid sibling for AI and teams. For a free drag-and-drop canvas that keeps your diagram as Mermaid code, with 50 saved diagrams, use TryMermaid (ours). For the lowest price with AI, use mermaideditor.io. For free general-purpose diagramming, use draw.io. Mermaid Viewer adds real-time co-editing, and Lucidchart and Eraser suit teams already on those suites.

Mermaid is a text syntax for diagrams. You write flowchart TD and a few arrows, and you get a flowchart. Because the diagram is text, it lives in version control and changes in a pull request like any other file.

The catch is that you have to write the syntax. The seven tools below answer that in different ways: some add AI to write it for you, some add a canvas so you can drag shapes instead, and some fold Mermaid into a larger diagramming suite.

The seven at a glance

1. Mermaid Live Editor and mermaid.ai — the official pair

These two are best understood as one product family from the team behind Mermaid.js. The free Mermaid Live Editor is where you write Mermaid; mermaid.ai is where the paid features live, and the Live Editor links to it for them.

The Mermaid Live Editor is open source under the MIT licence and needs no account. It gives you a code pane with a live preview, PNG and SVG export, share links and, since August 2026, embeddable diagrams. There is no drag-and-drop canvas and no manual layout: you arrange a diagram by editing the code. Nothing is saved to an account either, because there are no accounts.

mermaid.ai is the product formerly called Mermaid Chart; the old mermaidchart.com domain now redirects there. It adds AI generation from a description or document, and a drag-and-drop visual editor that writes changes back to Mermaid code. It also offers real-time collaboration and integrations with Claude, VS Code, Cursor, GitHub Copilot and Confluence.

mermaid.ai's pricing, as listed on its pricing page on September 18, 2026:

• Basic, free: 3 diagrams, limited diagram size, limited AI.
• Plus, $10 per user a month, billed annually: unlimited diagrams, no size limit, 300 AI credits a year.
• Premium, $20 per user a month, billed annually: 2,000 AI credits a year, unlimited free viewer seats, unlimited teams and projects.
• Enterprise, custom: adds SSO and a dedicated success manager.

Best for: the Live Editor if you know Mermaid and want the canonical free tool; mermaid.ai if your team wants AI drafting and live collaboration and will pay for it.

2. TryMermaid — the most generous free plan on this list

This is our product. TryMermaid is built on the open-source Mermaid Live Editor (MIT) and is independent of the Mermaid project.

What it adds is a drag-and-drop canvas for flowcharts that stays in sync with the code. Drop a shape and the Mermaid is written for you; edit the code and the shapes move. Hand-placed positions are remembered. Unlike draw.io and Eraser below, the canvas writes plain Mermaid back, so the diagram still opens anywhere Mermaid does. mermaid.ai's visual editor does this too, but its product page does not say which plan includes it; TryMermaid's canvas is on the free plan. Other diagram types are written in code with a live preview, and there are guides for 18 of them.

The free plan is the largest here among tools that save to an account: 50 saved diagrams, the full canvas and exports without a watermark. mermaid.ai, Eraser and Mermaid Viewer each stop at 3. When you reach 50, you can delete an old diagram or upgrade.

Pro is $9 a month, billed monthly, for unlimited diagrams and MCP connectors that let AI agents such as Claude create and edit diagrams in your account. That makes it the cheapest plan we could price for unlimited diagrams saved to an account: mermaid.ai Plus is $10 per user a month billed annually, and Mermaid Viewer Pro is $119.99 a year.

What to know, honestly: TryMermaid has no built-in AI generation and no real-time collaboration. If you want to type a sentence and get a diagram, or co-edit live with a team, mermaid.ai, mermaideditor.io or Mermaid Viewer will serve you better. We have a longer comparison with the Mermaid Live Editor too.

3. mermaideditor.io — the cheapest way to get AI

mermaideditor.io, made by StarMorph, is a code editor built on Monaco with syntax highlighting, autocomplete and more than 21 diagram types. Its Pro plan adds AI that writes Mermaid from a plain-English description and repairs syntax errors. It exports PNG, SVG and PDF, and shares diagrams through links.

It is the cheapest paid option on this list: $7 a month, or $19 once for lifetime access. Pro includes 200 AI generations a month and syncs up to 50 diagrams to the cloud. On the free plan, its pricing page lists exports at 1× with a watermark and no AI, though its homepage says free SVG exports carry no watermark.

Best for: individuals who want AI help writing Mermaid at the lowest price, especially with the one-off lifetime option.

What to know: there is no drag-and-drop canvas; everything is edited as code.

4. draw.io — free, and not only for Mermaid

draw.io is a general-purpose diagramming tool, free forever and open source under the Apache 2.0 licence, with no sign-up. Its Mermaid support turns pasted Mermaid into native draw.io shapes, which you can then restyle, resize and move. The Mermaid source is kept with the diagram, so you can reopen it and regenerate.

Best for: anyone who wants Mermaid as a fast starting point for a diagram they will then finish by hand, at no cost.

What to know: the result is a draw.io diagram, not Mermaid. Your visual edits live in the draw.io file and do not flow back into Mermaid code, so it is a one-way street if the diagram must stay in your repository as Mermaid.

5. Mermaid Viewer — AI plus real-time co-editing

Mermaid Viewer is a code editor with live preview, AI generation, and real-time collaboration through shared editor links. It exports SVG, PNG, PDF and Markdown, and can be self-hosted with Docker.

Free covers 3 diagrams, 5 AI conversations a day and low-resolution PNG exports with a watermark. Starter is $69.99 a year for 30 diagrams and Pro is $119.99 a year for unlimited diagrams and all export formats.

Best for: small teams that want to co-edit Mermaid live without paying per-seat prices.

What to know: there is no drag-and-drop canvas.

6. Lucidchart — Mermaid inside an established suite

Lucidchart lets you enter Mermaid directly in its editor; to change the diagram, you "edit the Mermaid code in Lucidchart and click 'Update'". It makes most sense if your organisation already works in Lucid.

What we could not verify: Lucidchart has a free plan, but its pricing page publishes no figures we could read, and we could not confirm whether Mermaid is included on the free tier. Check both before you commit.

Best for: teams already paying for Lucid who want Mermaid in the same place.

7. Eraser — AI and visual editing, in its own syntax

Eraser takes a description or pasted Mermaid and draws it, then lets you edit by AI prompt, by code, or by dragging elements. Generating a diagram needs no sign-up; editing, saving and exporting need a free account.

Free covers 3 files and 3 AI diagrams. Starter is $15 per member a month billed annually ($20 monthly), and Business is $45 per member a month billed annually ($60 monthly).

What to know: Eraser converts Mermaid into its own syntax. Its FAQ suggests using an AI model to convert back to Mermaid, which tells you that edits made in Eraser do not come back out as Mermaid on their own.

Best for: teams that want AI and a visual editor and do not need to keep Mermaid.

How to choose

The same decision as a flowchart, written in Mermaid:

• Free, official, and you know the syntax → Mermaid Live Editor
• AI drafting and team collaboration, budget available → mermaid.ai
• Drag shapes for free and keep the diagram as Mermaid → TryMermaid
• AI at the lowest price → mermaideditor.io
• A free general diagram that starts from Mermaid → draw.io
• Real-time co-editing on a small budget → Mermaid Viewer
• Already on Lucid or Eraser → stay there

One check is worth making before you commit: does the diagram need to stay as Mermaid? If it lives in a repository or docs site, choose a tool that saves plain Mermaid. draw.io and Eraser are excellent diagramming tools, but they turn Mermaid into their own formats.

Frequently asked questions