N
NJHTools

Mermaid Live Editor

Write Mermaid diagram code and see flowcharts, sequence diagrams, ER diagrams, Gantt charts and more render as you type. It is free, needs no signup, runs entirely in your browser, and exports to SVG or PNG.

Zoom
100%
Export
Mermaid code17 lines

Tab inserts spaces. Press Esc, then Tab, to move focus out. Autosaved in this browser.

PreviewLoading Mermaid…

Rendering…

How to make a Mermaid diagram online

  1. 1Type or paste Mermaid code into the editor.
  2. 2Start with a diagram keyword such as flowchart, sequenceDiagram or gantt.
  3. 3Watch the live preview and fix any syntax errors it reports.
  4. 4Copy a share link to send the diagram to someone else.
  5. 5Export the diagram as SVG or PNG.

What Mermaid is and why diagrams-as-code

Mermaid is an open-source JavaScript library that turns short text definitions into diagrams. Because the source is plain text, it can live in your repository, be reviewed in pull requests, and be diffed like any other code.

Changing a diagram means editing a line, not dragging boxes. Layout is automatic, which keeps diagrams consistent and fast to update.

Diagram types at a glance

The first line of the code picks the diagram type: flowchart for process flows, sequenceDiagram for interactions over time, classDiagram and erDiagram for data models, stateDiagram-v2 for state machines, and gantt for project schedules.

Mermaid also supports pie charts, mind maps, timelines and git graphs. Each type has its own page here with syntax tips and examples.

Tips for readable diagrams

Keep node IDs short and put the readable text in labels, for example A[Check order status]. Wrap labels that contain special characters in double quotes.

Lines starting with %% are comments. Use them to annotate sections of a large diagram without changing the output.

Frequently Asked Questions

Will this diagram render on GitHub, GitLab or Notion?↓

Yes, all three render Mermaid. On GitHub and GitLab, put the code in a fenced code block that starts with ```mermaid. In Notion, add a code block and set its language to Mermaid. Hosted platforms may run an older Mermaid version, so very new syntax can fail there.

How do I export the diagram as PNG or SVG?↓

Use the export buttons above the preview. SVG stays sharp at any size and suits docs and slides; PNG is a raster image that works anywhere images are accepted. Both are created in your browser.

How does sharing work, and is my diagram private?↓

The share link stores your diagram code in the URL hash, the part after #, which browsers do not send to servers. Nothing is uploaded, and your work is autosaved in your own browser. Anyone with the link can see the diagram, so share it only with people you trust.

Is my work saved if I close the tab?↓

Yes. The editor autosaves your code in your browser's local storage, so it is still there when you come back on the same browser and device. Clearing site data removes it.

Why does my diagram show a syntax error?↓

Check that the first line is a valid diagram keyword, that brackets and quotes are balanced, and that labels containing characters such as parentheses or colons are wrapped in double quotes.

Last updated: