Mermaid Editor

Mermaid live editor, visual and code in one place

Most mermaid editors give you a text box and a preview. This one also gives you a canvas: click to add a block, drag an arrow, group things into areas — and the mermaid code writes itself. Switch to the code tab and edit it by hand; the canvas follows.

  • Renders as you type

    The real mermaid engine, redrawn a few hundred milliseconds after your last keystroke.

  • Code and canvas sync

    Edit either side. The other one catches up — no copy-paste between two tools.

  • 14 node shapes

    Rectangle, rounded, pill, circle, diamond, database, hexagon and the rest, one click each.

  • Free, no sign-up

    No trial, no watermark — the editor opens straight away. Sign in only if you want more than one diagram.

A canvas, not just a text box

The visual tab is a real editor on top of the rendered diagram: click a node to select it, double-click to rename it in place, drag anywhere to pan.

  • Click to buildAdd a block, point an arrow at another one, label the arrow. No syntax to remember before you start.

  • Pick a shapeFourteen mermaid flowchart shapes — decision diamonds, database cylinders, subroutines — from one picker.

  • Colour anythingEight presets plus a colour picker, applied to a single node or to a whole area.

Mermaid code that stays yours

The text tab is plain mermaid — the same syntax GitHub, GitLab, Notion and Obsidian already render. Nothing here is a proprietary format.

  • Write it by handType mermaid directly and watch it render. Six ready-made examples to start from.

  • Round-tripsFlowcharts you paste in are parsed back onto the canvas — nodes, shapes, colours, subgraphs and all.

  • Every diagram typeFlowchart, sequence, class, state, ER, gantt, git graph, pie — the preview renders whatever mermaid supports.

Big diagrams stay readable

Architecture diagrams outgrow one screen fast. Pan, zoom and grouping are built for that instead of fighting it.

  • Areas and nestingGroup blocks into subgraphs, nest an area inside another, move a whole subtree in one gesture.

  • Zoom from 2% to 1600%Scroll to pan, ctrl-scroll to zoom, or re-centre with one button.

  • Saved as you goYour diagram autosaves in your browser as you edit. Sign in and it saves to your account instead, so it follows you to any device.

Export and get on with it

Nothing is locked in. Take the picture, take the source, or take a Markdown block ready to paste into a document.

  • No paywallEvery feature, including export, is free. There is no paid tier to upgrade to.

  • Rendered in your browserRendering happens in your browser; without an account the diagram never leaves it, and a saved document follows you to any device.

  • SVG, PNG, .mmd, .mdCopy the SVG markup, download a 2x PNG, save the mermaid source, or grab a fenced Markdown block.

How it compares to the usual options

Diagram-as-code tools make you write everything by hand. Drag-and-drop tools give you a picture you cannot diff. This one refuses to pick a side.

Getting started

IQ Mermaid: Double-click the canvas and a node appears. You can learn the syntax later, or never.

Typical tool: Read the syntax reference first, or accept a drawing tool with no text representation at all.

The output format

IQ Mermaid: Plain mermaid — the same text GitHub, GitLab and Notion render natively.

Typical tool: A proprietary file that only opens in the tool that made it.

Editing later

IQ Mermaid: Change the code or move the blocks. Both directions work on the same diagram.

Typical tool: One direction only: code-first tools have no canvas, canvas-first tools have no source.

Price

IQ Mermaid: Free — not even an email.

Typical tool: Free tier capped at a few diagrams, with export or collaboration behind a subscription.

Where the data lives

IQ Mermaid: In your browser, or in your account if you want it to follow you to any device.

Typical tool: An account on someone's server, with your diagrams attached to it.

Mermaid editor questions

All you need to start is the page.

What is mermaid?

Mermaid is a text syntax for diagrams: you describe nodes and arrows in a few lines, and a renderer draws the picture. GitHub, GitLab, Notion and Obsidian render it inside Markdown, so a mermaid block stays readable in a pull request or a wiki page.

Is this mermaid editor really free?

Yes. Every feature, including SVG and PNG export, is free, and you can use the editor without creating anything at all. An optional free account adds more saved diagrams and sync across devices — there is no paid tier and nothing is held back.

Do I need to know mermaid syntax?

No. Start on the visual tab: double-click the canvas to add a block, select it and draw an arrow to another one. The mermaid code is generated for you and you can read it whenever you want to learn the syntax.

Which diagram types are supported?

The code tab renders anything mermaid supports — flowchart, sequence, class, state, entity relationship, gantt, git graph, pie and more. The visual canvas edits flowcharts specifically, which is what most diagrams are.

Can I export to PNG or SVG?

Yes. Copy the SVG markup to the clipboard, download the SVG file, or download a PNG rendered at 2x for slides and documents. You can also save the mermaid source as .mmd or as a fenced Markdown block.

Where is my diagram stored?

Without an account, your one diagram is saved in your browser, so it is there when you come back on the same device. Sign in and it is saved to your account instead, so it can follow you to another device. Export the source if you want a copy of your own.

Can I paste in an existing mermaid diagram?

Yes. Paste it into the code tab; a flowchart is parsed back onto the visual canvas with its nodes, shapes, colours and subgraphs intact. Other diagram types render in the preview but stay code-only.

Does it work offline?

Rendering happens entirely in your browser, so once the page has loaded the editor keeps working without a connection.

Open the editor. Free — no sign-up.

A blank canvas, a code tab and every export option — free, in your browser, right now.