Loading mermaid.tools…

Paste Mermaid code and watch it render

Paste Mermaid from a model, a README or a ticket into the editor above. It renders as you type, with no account and no upload.

This is the same editor as the rest of the site, pointed at one job: turning Mermaid that was written somewhere else into a picture you can use.

How it works

  1. Copy the Mermaid block from wherever it came from. The surrounding ```mermaid fence can come along; it is removed for you.
  2. Paste it into the editor above. The preview re-renders after every keystroke.
  3. If it does not render, open the fixer. It repairs the breakages that arrive with generated code and shows you what it changed.
  4. Export SVG, PNG, JPEG or PDF, or copy a link that carries the diagram inside the address.

What renders here

Every Mermaid v11 diagram type: flowcharts, sequence diagrams, class and state diagrams, entity relationship diagrams, Gantt charts, pie and quadrant charts, mindmaps, timelines, git graphs, sankey diagrams, C4 context diagrams, block diagrams, XY charts and user journeys. The toolbar picker follows whatever the first line of your source declares.

Nothing leaves your browser

The code you paste is parsed and drawn by Mermaid running in this page. There is no upload step and no server-side copy, which is why the page works the same whether the diagram is a public example or an internal system map. A share link is the one exception, and only because the link itself carries the diagram.

When the preview goes stale

After a parse error the last diagram that rendered stays on screen with a Stale badge, so you never lose your place. The badge carries a Fix it button that opens the repair flow with your current source already in it.

Frequently asked questions

Can I paste Mermaid straight from ChatGPT or Claude?

Yes. Paste the block, fence and all. The fence is stripped, curly quotation marks are straightened, and the diagram renders. If the model also wrote an explanation above the code, that is removed too.

Do I need an account to render a diagram?

No. There is no sign-up, no watermark and no daily limit. Rendering happens in your browser, so the only limit is the memory your browser will give a very large diagram.

Can I render Mermaid from a private repository?

Yes. Paste it. The source is never sent anywhere, so internal architecture and org data stay on your machine unless you deliberately copy a share link.

Keep reading

Fix diagram errors · the example library · all guides

mermaid.tools is an independent editor not affiliated with the Mermaid.js project or Mermaid Chart / mermaid.ai. Everything on this page runs in your browser with Mermaid 11.17.2.