A real visual canvas
Drag shapes onto the canvas, connect them, and rename them in place. Your layout is saved with the diagram and used for every export.
Works with Mermaid syntax
Drag, type, and ship Mermaid diagrams.
TryMermaid is a visual diagram builder that writes the code for you. Sketch a flowchart on the canvas, fine-tune it in code, and export a crisp PNG or SVG.
Free to use · No account needed to start
Visual when it helps, code when it's faster
One diagram, two ways to edit it, and nothing lost switching between them.
Code when you want it
Every canvas change writes Mermaid code, and every code change updates the canvas. Use whichever is faster for the task.
Export anywhere
Download a PNG at the exact width or height you need, grab an SVG, or copy the image straight to your clipboard.
Save and share
Keep diagrams in your account, or share a link that opens exactly what you see, layout included.
From idea to image in three steps
- 01
Start
Pick a template or drop your first shape.
- 02
Shape it
Connect steps, move things around, tweak the code.
- 03
Ship it
Export an image or send a link to your team.
Which Mermaid diagrams can you build?
Every Mermaid diagram type works in the code editor with a live preview. Flowcharts can also be edited on the visual canvas. All of them export to PNG and SVG.
| Diagram type | Visual canvas | Code with live preview | PNG and SVG export |
|---|---|---|---|
| Flowchart | Yes | Yes | Yes |
| Sequence diagram | No | Yes | Yes |
| Class diagram | No | Yes | Yes |
| ER diagram | No | Yes | Yes |
| State diagram | No | Yes | Yes |
| Mind map | No | Yes | Yes |
| Gantt chart | No | Yes | Yes |
| Timeline | No | Yes | Yes |
| Pie chart | No | Yes | Yes |
| Git graph | No | Yes | Yes |
| User journey | No | Yes | Yes |
| Quadrant chart | No | Yes | Yes |
| Sankey diagram | No | Yes | Yes |
| XY chart | No | Yes | Yes |
| Block diagram | No | Yes | Yes |
| Packet diagram | No | Yes | Yes |
| Requirement diagram | No | Yes | Yes |
| C4 diagram | No | Yes | Yes |
Frequently asked questions
What is TryMermaid?
TryMermaid is an online editor for Mermaid, the text-based diagramming language. You can drag shapes on a visual canvas or write Mermaid code, and both stay in sync. Finished diagrams export as PNG or SVG, or you can share a link or embed them in a web page.
Is TryMermaid free?
Yes. The Free plan includes the full editor, PNG and SVG exports, share links and up to 50 saved diagrams. The Pro plan adds unlimited saved diagrams and MCP connectors so AI agents can work with your diagrams.
Do I need an account to make a diagram?
No. Open the editor and start drawing right away; your work is kept in your browser. Create a free account only if you want to save diagrams and reopen them on another device.
Which Mermaid diagram types can I edit visually?
Flowcharts can be edited on the drag-and-drop canvas, and every change is written back to Mermaid code. Sequence, class, ER, state, mind map, Gantt, timeline and the other Mermaid diagram types are edited in code with a live preview.
How do I export a Mermaid diagram as PNG or SVG?
Open the export menu in the editor and choose PNG or SVG. For PNG you can set an exact width or height, and you can also copy the image straight to your clipboard. When the canvas is open, the export uses your hand-placed layout.
How is TryMermaid different from Mermaid Live Editor?
Mermaid Live Editor is the Mermaid project's own online editor. TryMermaid is an independent editor built on its open-source code (MIT license). It adds a drag-and-drop canvas that stays in sync with the code, accounts for saving diagrams, and share links that keep your layout.
Can I share or embed my diagrams?
Yes. Copy a share link that opens an exact copy of your diagram, layout included, or generate an embed snippet to show a live diagram on your website, documentation or blog.
Where are my diagrams stored?
Until you save, a diagram lives only in your browser's local storage and in the page URL. Diagrams you save to your account are stored on TryMermaid's servers so you can open them from any device. The privacy policy explains the details.
From the blog
Guides and comparisons on diagramming with Mermaid, checked against primary sources.
Mermaid vs PlantUML vs Graphviz
Three text-to-diagram tools, three different jobs. What each one draws, what it needs installed, where it renders, and how to pick without rewriting your diagrams later.
Read the post →How to Generate Mermaid Diagrams with Claude
Claude can write Mermaid on its own. An MCP server lets it check that code against the real parser, save it and hand back an image. Setup for four clients, plus a live run.
Read the post →7 Best Mermaid Diagram Editors in 2026
The Mermaid Live Editor and mermaid.ai, TryMermaid, mermaideditor.io, draw.io, Mermaid Viewer, Lucidchart and Eraser, compared on price, free-plan limits, AI and drag-and-drop editing.
Read the post →