Comma

Free tool

Mermaid viewer.

Paste Mermaid code — a whole ```mermaid block from a chat or README works too — and watch the diagram draw as you edit. Syntax errors point at the line; the last good render stays up. Download it as SVG or PNG, or turn it into a link people can comment on.

Flowchart · 8 linesStays in your browser — nothing uploads.

Loading Mermaid…

Mermaid 11

Publishes the rendered diagram as a Comma report, with the Mermaid source kept underneath: one URL instead of a screenshot, and reviewers can comment on a specific node. Free, no card.

Why agents draw in Mermaid — and why that's a problem for readers

Ask Claude, ChatGPT or Cursor to explain an architecture, a request flow or a migration plan and the answer usually comes back as a Mermaid block. It's text, so a model can write it reliably and a diff can review it. But it only becomes a picture where something renders it — GitHub and a few editors do, Slack, email and most ticket trackers don't.

This page closes that gap: paste the block, check it parses, fix what the model got wrong, and hand the reader an image, an SVG or a link instead of forty lines of arrows.

Common syntax fixes

  • Quote labels with punctuation. A[Load (cached)] fails; A["Load (cached)"] works. The same goes for brackets, braces, # and ; inside a label.
  • Don't name a flowchart node end. Lowercase end closes a subgraph; call it End or done.
  • Flowcharts need two-dash arrows. -->, ---, -.-> and ==> are edges; -> is sequence-diagram syntax and breaks a flowchart.
  • Start with the diagram keyword. The first line that isn't a %% comment or front matter must be flowchart, sequenceDiagram, erDiagram and so on — the readout under the editor shows which type was detected.

Questions

How do I view a Mermaid diagram online?
Paste the Mermaid code into the editor on this page — with or without the ```mermaid fence around it — or open a .mmd or .md file. The diagram renders on the right as you type, and a syntax error shows the line Mermaid rejected while the last good version stays on screen.
How do I convert Mermaid to PNG or SVG?
Render the diagram, then click SVG for a vector file or pick 1×, 2× or 4× and click PNG. The PNG is drawn on the theme's background so dark-theme diagrams don't turn into light text on a transparent void.
Which diagram types are supported?
Everything the current Mermaid 11 release draws: flowcharts, sequence, class, state and entity-relationship diagrams, Gantt charts, pie charts, mindmaps, timelines, user journeys, git graphs, quadrant, XY and Sankey charts, C4, block, architecture, kanban and packet diagrams.
Why does my Mermaid diagram show a syntax error?
The usual culprits: a label with parentheses, brackets or quotes that isn't wrapped in double quotes (write A["Load (cached)"]), a node called end in lowercase, which closes a subgraph in flowcharts, a missing diagram keyword on the first line, or an arrow typo such as -> where flowcharts need -->. The error line under the preview says where the parser stopped.
Is my diagram uploaded anywhere?
No. The Mermaid library is downloaded from jsDelivr and runs in a sandboxed frame in this tab; your diagram code is handed to it locally and never sent to a server. It only leaves your machine if you click “Get a shareable link”.
How do I share a Mermaid diagram as a link?
Click “Get a shareable link”. The rendered diagram becomes a Comma report — one URL anyone can open, with the Mermaid source kept underneath it, and reviewers can comment on a specific node or arrow. Comma is free.

Related: SVG viewer · Markdown to HTML · HTML viewer · Markdown table generator · all free tools