Mermaid Live Editor

Mermaid turns short text into diagrams: you write lines such as home --> about and it draws the boxes and arrows. Pick a template below, edit the text, and the diagram redraws as you type. Download it as SVG or PNG, copy the code, or copy a link that reopens your diagram.

Diagram types in the templates
First line	Draws	Good for
flowchart TD or LR	Boxes and arrows	Site maps, user flows, checkout steps
erDiagram	Tables and relations	App data models
sequenceDiagram	Messages over time	API calls between services
gantt	Bars on a timeline	Launch and project plans

Updated October 19, 2026

The diagram is drawn in your browser by the open source Mermaid library, loaded only when this editor opens. Nothing you type is sent anywhere. Rendering runs in strict security mode, which strips scripts and click handlers from diagram text, so pasted code cannot run.

Edit a diagram

Diagrams are drawn in your browser. Nothing you type is uploaded.

Templates for web teams

The same code the template menu loads, ready to paste into a README, a doc or this editor.

Site map

A top-down flowchart of a small business site. Each arrow is a link from a parent page to a child page.

flowchart TD
  home[Home] --> about[About]
  home --> services[Services]
  home --> blog[Blog]
  home --> contact[Contact]
  services --> design[Web design]
  services --> seo[SEO]
  blog --> post[Blog post template]

User signup flow

Decisions are diamonds written with curly braces. Labels on arrows go between pipes.

flowchart LR
  land[Landing page] --> cta{Clicks sign up?}
  cta -->|No| leave[Leaves]
  cta -->|Yes| form[Email and password form]
  form --> valid{Valid?}
  valid -->|No| form
  valid -->|Yes| verify[Verify email]
  verify --> onboard[Onboarding]
  onboard --> dash[Dashboard]

Checkout flow

Subgraphs group steps, here into the cart and the payment stage, so a long flow stays readable.

flowchart TD
  subgraph Cart
    c1[View cart] --> c2[Apply discount code]
  end
  subgraph Payment
    p1[Shipping address] --> p2[Card details]
    p2 --> p3{Payment approved?}
  end
  c2 --> p1
  p3 -->|Yes| done[Order confirmation]
  p3 -->|No| p2

App data model

An entity relationship diagram. ||--o{ reads as exactly one on the left to zero or more on the right.

erDiagram
  USER ||--o{ PROJECT : owns
  PROJECT ||--o{ PAGE : contains
  PAGE ||--o{ SECTION : has
  USER {
    uuid id PK
    string email
    datetime created_at
  }
  PROJECT {
    uuid id PK
    uuid user_id FK
    string name
  }
  PAGE {
    uuid id PK
    uuid project_id FK
    string slug
  }

API call sequence

Solid arrows are requests and dashed arrows are replies. The alt block shows the error path.

sequenceDiagram
  participant B as Browser
  participant A as API
  participant D as Database
  B->>A: POST /orders
  A->>D: insert order
  alt saved
    D-->>A: order id
    A-->>B: 201 Created
  else failed
    D-->>A: error
    A-->>B: 500 with message
  end

Launch plan

A gantt chart. after id starts a task when another one ends, so moving one date moves the rest.

gantt
  title Website launch
  dateFormat YYYY-MM-DD
  section Plan
    Site map and content   :plan, 2026-11-02, 5d
  section Build
    Design pages           :design, after plan, 7d
    Build and test         :build, after design, 10d
  section Launch
    Go live                :milestone, after build, 0d

Flowchart shapes and arrows

Flowchart syntax used in the templates
Write	Draws
a[Text]	Rectangle
a(Text)	Rounded rectangle
a{Text}	Diamond, for a decision
a((Text))	Circle
a --> b	Arrow
a -->\|label\| b	Arrow with a label
a -.-> b	Dotted arrow

Planning a website with diagrams

A site map answers which pages exist and how they nest. A user flow answers what someone does on those pages to reach a goal. Draw the site map first, then one flow per important goal such as signing up or buying.

When the build starts, the data model and sequence diagrams help developers agree on what is stored and which calls happen in what order.

How it works

Choose a template to load its code, or clear the box and start with a diagram type on the first line.
Edit the text. The preview redraws a moment after you stop typing.
If a line is wrong, the message under the editor names the line and what Mermaid expected there.
Download SVG for docs and design tools, PNG for slides and chat, or copy a share link that stores the diagram in the URL.

Tips

Give each node a short id and a readable label, like home[Home page]. Ids stay stable when you rename labels.
Use LR for flows people read left to right and TD for hierarchies such as site maps.
Keep one diagram to one question. Split a big flow into several small ones rather than one chart nobody can read.
Markdown files on GitHub and GitLab render mermaid code blocks, so the same text can live next to your project.

Frequently asked questions

What is Mermaid?

An open source JavaScript library, MIT licensed, that renders diagrams from a text syntax. Because diagrams are text, they can be versioned, reviewed and diffed like code.

Why does my diagram show a parse error?

Mermaid stops at the first line it cannot read. Common causes are a missing diagram type on line one, brackets that do not close, and labels with characters such as parentheses that need quoting, as in a["Label (note)"].

Is the share link private?

The diagram is stored after the # in the link, which browsers do not send to servers. Anyone you give the link to can read the diagram, so do not share links to diagrams with secrets in them.

Can I use the exported images commercially?

Yes. The diagrams are your own work. Mermaid's MIT licence covers the library, not the pictures you make with it.

Why do PNG exports sometimes fail?

Some browsers refuse to turn an SVG into a PNG when it contains embedded web content. This editor draws labels as plain SVG text to avoid that; if a download still fails, use the SVG file instead.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.