A Mermaid Live Editor alternative with a visual canvas
TryMermaid is a visual Mermaid editor: build flowcharts by dragging shapes, or write Mermaid code, with both kept in sync. Create a free account and it saves your diagrams online so they open on any device. Same Mermaid syntax, same rendering engine, so anything you have already written works unchanged.
Disclosure: this page is written by TryMermaid, and TryMermaid is built on the Mermaid Live Editor, which is the official open-source editor from the Mermaid project (MIT licence). We are independent and not affiliated with or endorsed by the Mermaid project. Everything about their editor below was checked against their own source code and published pages on .
The Mermaid Live Editor is the official, free, open-source editor from the Mermaid project, and TryMermaid is built on it. Use the Mermaid Live Editor if you are happy writing Mermaid by hand and want the canonical tool. Use TryMermaid if you want to build flowcharts by dragging shapes, keep diagrams in an account, or let an AI agent work with them.
A visual Mermaid editor, not just a code box
The Mermaid Live Editor is a code editor with a live preview: you write Mermaid and it renders. That is the right tool if you already know the syntax. If you do not, the blank editor is the obstacle.
TryMermaid adds a drag-and-drop canvas for flowcharts. Drop a shape and the Mermaid code is written for you. Edit that code and the canvas updates. Move a node by hand and the position is remembered, travelling with the diagram through share links and saved copies. You are never locked into one side: the code is always ordinary Mermaid.
Save Mermaid diagrams online, not just in a link
The Mermaid Live Editor has no accounts. Your diagram lives in the URL you copy, so keeping work means keeping links — and losing the link means rebuilding the diagram.
A free TryMermaid account saves diagrams to a dashboard you can come back to from any device. Share links still work exactly the same way and still carry the whole diagram, so nothing about the old workflow breaks. Export stays PNG, SVG or the Mermaid code itself, which means you can leave at any time and take everything with you.
TryMermaid vs the Mermaid Live Editor, feature by feature
| Feature | Mermaid Live Editor | TryMermaid |
|---|---|---|
| Mermaid code editor with live preview Both use the same Mermaid rendering engine | ||
| Every Mermaid diagram type | ||
| PNG and SVG export | ||
| Shareable links and a read-only viewer | ||
| Drag-and-drop canvas for flowcharts Shapes and code kept in sync, either side updates the other | ||
| Diagrams saved to an account | Up to 50 free, unlimited on Pro | |
| MCP connectors for AI agents Lets Claude, Cursor and other MCP clients create and edit diagrams | Pro | |
| Embeddable live diagrams The Mermaid Live Editor added embeds in August 2026 | ||
| Diagram syntax guides on the same site | 18 guides with examples | |
| Open source and self-hostable The Mermaid Live Editor is MIT licensed | ||
| Official Mermaid project tool | ||
| Price | Free | Free, or $9/mo for Pro |
Verified September 18, 2026 against the Mermaid Live Editor's published source and pages. Pricing and features change; tell us at [email protected] if anything here is out of date.
Which one to choose
Use the Mermaid Live Editor if…
- You want the official editor from the Mermaid project itself
- You want to self-host it, audit the source, or contribute to it
- You already write Mermaid comfortably and do not need a canvas
- You never need a diagram saved anywhere except a link or your own repository
Use TryMermaid if…
- You would rather drag shapes than write flowchart syntax, or you want to do both and keep them in sync
- You want your diagrams saved to an account and available on another device
- You want an AI agent to create and edit diagrams in your account through MCP
- You want the syntax reference and worked examples on the same site as the editor
Common questions
What is the best Mermaid Live Editor alternative?
TryMermaid is the closest alternative that keeps the same Mermaid syntax and the same rendering engine, so nothing you have already written needs changing. It adds a drag-and-drop canvas for flowcharts and optional accounts that save diagrams. Other diagramming tools such as draw.io or Excalidraw are alternatives to diagramming in general, but they are not Mermaid tools and will not open your existing Mermaid code.
Is there a visual Mermaid editor with drag and drop?
Yes. TryMermaid is a visual Mermaid editor: flowcharts can be built by dragging shapes onto a canvas, and the Mermaid code is written for you as you go. Editing the code updates the canvas and moving shapes updates the code, so you are never locked into one or the other. Diagram types other than flowcharts are written in code with a live preview.
How do I save Mermaid diagrams online?
Create a free account and diagrams are saved to it, up to 50 on the Free plan and without limit on Pro. They open on any device you sign in from. Without an account the whole diagram still travels inside the share link, so nothing is lost, but there is no list of your work to come back to.
Is TryMermaid based on the Mermaid Live Editor?
Yes. TryMermaid is built on the Mermaid Live Editor, which is open source under the MIT licence, and on Mermaid.js itself. We say so on the about page and in our llms.txt. TryMermaid is independent and is not affiliated with or endorsed by the Mermaid project.
What does TryMermaid add that the Mermaid Live Editor does not have?
The drag-and-drop canvas, and accounts. The Mermaid Live Editor is a code editor with a live preview: you write Mermaid and it renders. TryMermaid adds a canvas where flowcharts can be built by dragging shapes, with the code and the canvas kept in sync, plus optional accounts so diagrams are saved rather than living only in a URL.
Can I move my diagrams between the two?
Yes. Both render with the same Mermaid engine, and TryMermaid stores your work as ordinary Mermaid code. Anything you build here opens in the Mermaid Live Editor, in your repository, in GitHub or GitLab, or in any other Mermaid renderer.
Which one is cheaper?
The Mermaid Live Editor is free and always will be: it is an open-source project. TryMermaid is free to use with an optional Pro plan at $9 a month for unlimited saved diagrams and MCP connectors. If price is the deciding factor, use the Mermaid Live Editor.
Does the Mermaid Live Editor let me save diagrams to an account?
No. The Mermaid Live Editor has no accounts and no server-side storage; a diagram lives in the URL you share or in whatever file you paste it into. TryMermaid can save diagrams to an account, up to 50 on the Free plan.
Try the canvas for yourself
No account needed. Everything you build is ordinary Mermaid code, so it opens anywhere — including in the Mermaid Live Editor.
Open the editor