Mermaid Online
Good for: Drawing flowcharts, sequence, class and other diagrams by typing Mermaid code in the browser, with a live preview, starter templates and PNG or SVG export; optional AI can turn a description or a screenshot into an editable diagram
Details
Note: Reader submission via /submit/ (2026-10-24, not the maker). Home and pricing pages checked Oct 24, 2026: browser Mermaid editor with templates (flowchart, sequence, class, pie), live preview, export and copy as SVG or PNG; a 'Diagram Agent' and text-to-diagram / screenshot-to-diagram need sign-in and AI credits. Independent site built on the open-source Mermaid.js library; it is not the official Mermaid Live Editor (mermaid.live) or Mermaid Chart. Submitter asked us to test manual editing and export of a simple flowchart.
Prices are from the official pricing page on Oct 24, 2026 and can change; check the pricing page before you buy.
Real test
PassedOne task from the recorded test on this date. A failing task is shown when the record has one.
- Client
- details not recorded for this run Plan we tested: Free plan.
- Date
- Oct 29, 2026
- The task we gave
Type our own flowchart in the code editor
- What it promised
- details not recorded for this run
- What happened
Tool calls: details not recorded for this run
Note recorded with this task
We replaced the starter code with a 6-line flowchart (an order with a stock decision and two branches). The live preview redrew it within about 3 seconds with every label and both Yes/No branches, no account.Output excerpt: details not recorded for this run
- Verdict
- Passed
Our test
The free Mermaid editor does what the submitter asked with no account: type a flowchart, see it redraw live, and download it as SVG or PNG, with a clear error when the code is wrong. The catch: the AI diagram features need sign-in and credits, and we did not test them.
Tested on free plan · Oct 29, 2026 · verdict Pass (4/4 tasks passed)
What we tested
- Type our own flowchart in the code editor PassWe replaced the starter code with a 6-line flowchart (an order with a stock decision and two branches). The live preview redrew it within about 3 seconds with every label and both Yes/No branches, no account.
- Export the diagram as SVG PassExport SVG downloaded a 13.7 KB .svg file that holds all our labels.
- Export the diagram as PNG PassExport PNG downloaded a 1946 × 1976 PNG with a transparent background; the diagram matched the preview.
- Break the syntax on purpose PassWith an unclosed node bracket the preview showed 'Render Error' and the parse error with the line number instead of a blank or a crash.
What the free plan limited
The code editor, live preview and SVG/PNG export work with no account. The AI features (describe a diagram or upload a screenshot) open a sign-in box first and use credits, so we did not test them.