Mermaid is a JavaScript-based diagramming and charting tool that takes plain-text descriptions and renders them as SVG diagrams. It supports flowcharts, sequence, class, state, ER, Gantt, pie, journey, mindmap, timeline, git graph, and C4 diagrams.

Is MERMAIDEDITOR free?

Yes. The editor, all 12 diagram types, and the cheatsheet are free with no login. A Pro plan at $8/month adds power-user features.

Do I need to install anything?

No. MERMAIDEDITOR runs entirely in the browser, including offline. Your diagrams are stored locally; the URL itself encodes the diagram.

Can I export diagrams to PNG, SVG, or PDF?

Yes. Every diagram exports to SVG, PNG (1×, 2×, 3×), and PDF, with a copyable embed snippet for any markdown renderer.

Diagrams as code, refined.

Write Mermaid. See it instantly.

Q: Which Mermaid diagram types are supported?

All 12: flowchart, sequence, class, state, ER, Gantt, pie, user journey, mindmap, timeline, git graph, and C4 context.

A focused editor and a deep reference for every Mermaid diagram type — flowchart, sequence, class, state, ER, Gantt, pie, journey, mindmap, timeline, git, C4. No login, no friction.

Open the editor Browse 240+ templates

Free · Open source friendly · Works offline

diagram.mmd

flowchart TD
    Start([User opens app]) --> Auth{Logged in?}
    Auth -- yes --> Home[Home feed]
    Auth -- no --> Login[Login screen]
    Login --> Auth
    Home --> Compose[Compose post]
    Compose --> Publish[(Database)]
    Publish --> Home

preview · 30ms

Diagram types

240+

Vetted templates

3 → 8

UI languages

< 90 KB

Page weight

01 / Coverage

Every Mermaid diagram, fully documented

Each diagram type has a dedicated page with syntax, gotchas, vetted templates, and a one-click "open in editor" link.

See all →

graph TD

Flowchart

graph TD

Branching processes, decision trees, request paths.

sequenceDiagram

Sequence

sequenceDiagram

Time-ordered messages between actors and systems.

classDiagram

Class

classDiagram

Object-oriented relationships and inheritance.

stateDiagram-v2

State

stateDiagram-v2

State machines, transitions, lifecycles.

erDiagram

ER

erDiagram

Entity-relationship models for databases.

gantt

Gantt

gantt

Project timelines with dependencies and milestones.

pie

Pie

pie

Proportional breakdowns at a glance.

journey

User journey

journey

Touchpoints rated by satisfaction.

mindmap

Mindmap

mindmap

Radial outlines for brainstorming and structure.

timeline

Timeline

timeline

Chronological events grouped by era.

gitGraph

Git graph

gitGraph

Branches, merges, tags — exactly as in your repo.

C4Context

C4

C4Context

Software architecture at four levels of zoom.

02 / Editor

Built for people who think in text

Every interaction is keyboard-first. Every output is portable. Every diagram type is documented inline.

Split-pane live preview

Type on the left, the diagram updates on the right within 30ms. Errors point to the exact line.

All 12 diagram types

Flowchart, sequence, class, state, ER, Gantt, pie, journey, mindmap, timeline, git graph, and C4 — no plugin required.

Pixel-clean export

SVG, PNG @1×/2×/3×, PDF, and a copyable embed snippet that works in any markdown renderer.

Themeable

Bring your own palette, type, and stroke. Six built-in themes including a hand-drawn look.

Shareable URLs

The diagram is in the URL. No accounts. No backend. The link is the document.

Eight UI languages

English, 中文, 日本語 today; Spanish, French, German, Portuguese, Korean shipping next.

03 / Use cases

Used for

Engineering RFCs

Pin a sequence diagram to your design doc; reviewers see exactly how the request flows.

Onboarding docs

A flowchart in the README is worth a thousand Confluence pages.

Database modeling

ER diagrams that live in version control next to the migration that changed them.

Project planning

A Gantt chart you can edit in a pull request comment.

04 / Reference

Pick a diagram type, jump straight in

Each guide is a single page that doubles as a tutorial and a reference. No login wall, no fluff.

graph TD

Flowchart

Branching processes, decision trees, request paths.

sequenceDiagram

Sequence

Time-ordered messages between actors and systems.

classDiagram

Class

Object-oriented relationships and inheritance.

stateDiagram-v2

State

State machines, transitions, lifecycles.

erDiagram

Entity-relationship models for databases.

gantt

Gantt

Project timelines with dependencies and milestones.

pie

Pie

Proportional breakdowns at a glance.

journey

User journey

Touchpoints rated by satisfaction.

mindmap

Mindmap

Radial outlines for brainstorming and structure.

timeline

Timeline

Chronological events grouped by era.

gitGraph

Git graph

Branches, merges, tags — exactly as in your repo.

C4Context

Software architecture at four levels of zoom.

05 / By role

A Mermaid editor for the way your team actually documents.

Software engineers, product managers, technical writers, and educators all reach for diagrams as code for different reasons. MERMAIDEDITOR is the online Mermaid editor that fits all four — open the Mermaid live editor in your browser, write Mermaid syntax, and get a clean SVG flowchart, sequence diagram, ER diagram, or Gantt chart in milliseconds.

For software engineers

Document microservice architecture with C4 diagrams, sketch OAuth2 sequence diagrams, model database schemas with ER diagrams, and check Mermaid flowcharts into git next to your code.

For product managers

Build quarterly roadmaps with Mermaid Gantt charts, map onboarding journeys, and sketch user flows without leaving your spec doc — every diagram is just text, so review fits into a normal pull request.

For technical writers

Replace screenshots that go stale with diagrams as code that update with the product. The Mermaid markdown syntax embeds in MkDocs, Docusaurus, GitBook, and every other static-site generator on Earth.

For educators & students

Teach state machines, finite automata, UML class diagrams, and database modeling with a free online diagram editor. No login, works offline, exports clean SVG and PDF for handouts.

06 / Examples

Mermaid examples you can copy in one click.

Every snippet is a ready-to-use Mermaid template. Copy the code, paste it into the Mermaid editor, tweak the labels, and export your diagram as SVG or PNG — no account required.

flowchart TD
    Start([User opens app]) --> Auth{Logged in?}
    Auth -- yes --> Home[Home feed]
    Auth -- no --> Login[Login screen]
    Login --> Auth
    Home --> Compose[Compose post]
    Compose --> Publish[(Database)]
    Publish --> Home

Mermaid flowchart example — login flowopen in editor →

sequenceDiagram
    autonumber
    participant U as User
    participant W as Web app
    participant A as API
    participant D as Database
    U->>W: Click class="code-str">"Save"
    W->>A: POST /diagrams
    A->>D: INSERT INTO diagrams
    D-->>A: id = 4f2…
    A-->>W: 201 Created
    W-->>U: ✓ Saved

Sequence diagram example — REST API callopen in editor →

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : appears_in
    CUSTOMER {
      uuid id PK
      string email
      datetime created_at
    }

ER diagram example — multi-tenant SaaSopen in editor →

gantt
    title Q2 launch
    dateFormat YYYY-MM-DD
    section Design
    Wireframes :a1, 2026-04-01, 7d
    Hi-fi mocks :after a1, 10d
    section Build
    API :2026-04-12, 14d
    UI :2026-04-15, 18d
    section Ship
    QA :2026-05-02, 7d
    Launch :milestone, 2026-05-12, 0d

Gantt chart example — Q2 product launchopen in editor →

07 / Integrations

Mermaid renders everywhere your docs live.

The Mermaid syntax is the lingua franca of diagrams as code. Every diagram you draw in MERMAIDEDITOR drops straight into the platforms your team already uses — no plugins, no exporters, no rebuilding.

GitHub

Native Mermaid in markdown

GitLab

Native Mermaid in MR & wiki

Notion

Mermaid code blocks

Obsidian

First-class Mermaid plugin

VS Code

Mermaid Preview ext.

MkDocs

mkdocs-mermaid2

Docusaurus

@docusaurus/theme-mermaid

Confluence

Mermaid macro

Slack

Paste rendered SVG

Linear

Mermaid in markdown

Hugo

render-codeblock-mermaid

Quarto

Built-in Mermaid

08 / How it works

From blank canvas to shipped diagram in three steps.

The diagrams-as-code workflow is the same whether you're drawing a Mermaid flowchart, a sequence diagram, a UML class diagram, or an entity-relationship diagram.

Write Mermaid syntax

Type Mermaid markdown in the left pane. Autocomplete, syntax highlighting, and inline error hints catch typos before they break the render.

See it render live

The right pane updates in under 30ms. Switch themes, change direction, swap renderers — every keystroke gives you immediate visual feedback.

Export or embed

Download SVG, PNG, or PDF. Copy a Mermaid markdown block. Paste a shareable URL into your spec, README, or Notion page. Your diagram is now diagrams as code.

09 / The case

Why teams move to diagrams as code.

For two decades, software teams documented architecture in Visio, OmniGraffle, draw.io, and Lucidchart. Those tools work — until you try to review a diagram in a pull request, diff two versions, or update fifty diagrams when a service is renamed. The drag-and-drop diagram editor is a dead end for systems that change.

Mermaid solves the version-control problem. A Mermaid flowchart is plain text. A Mermaid sequence diagram is plain text. A Mermaid class diagram, ER diagram, state diagram, Gantt chart, pie chart, user journey, mindmap, timeline, git graph, and C4 context diagram are all plain text. Plain text diffs cleanly. Plain text reviews cleanly. Plain text scales to a hundred contributors and a thousand diagrams without anyone losing track.

MERMAIDEDITOR is the online Mermaid editor built around that workflow. Write Mermaid markdown on the left, see your diagram render on the right, export SVG or PNG, copy a Mermaid code block straight into your README, and ship. No login. No tracking. No upsell to a "team plan" before you've drawn your second diagram.

If you've used the official Mermaid live editor, you'll feel at home. MERMAIDEDITOR adds the things that matter for daily work: a deep cheatsheet, 240+ vetted Mermaid templates, a library of Mermaid examples for every diagram type, three UI languages today (with five more on the roadmap), dark mode, keyboard-first navigation, offline support, and a focused triptych layout for power users.

10 / FAQ

Questions teams ask before they switch.

Is MERMAIDEDITOR a free Mermaid editor?+

Yes. The full Mermaid editor — every diagram type, every export format, every theme — is free with no login. Pro adds AI generation, real-time collaboration, and version history for $8/editor/month.

How is this different from the official Mermaid live editor?+

The official Mermaid live editor is a minimal sandbox from the Mermaid project. MERMAIDEDITOR is a full-surface workspace: 240+ Mermaid templates, a per-diagram-type reference, a printable Mermaid cheatsheet, a multilingual UI, an SEO-discoverable example gallery, and offline support. Same Mermaid syntax under the hood.

Which Mermaid diagram types are supported?+

All twelve: flowchart, sequence diagram, class diagram, state diagram, entity-relationship (ER) diagram, Gantt chart, pie chart, user journey, mindmap, timeline, git graph, and C4 context diagram.

Can I use Mermaid offline?+

Yes. The Mermaid editor renders entirely in your browser — no server round-trip. Install as a PWA for true offline use, or just keep the tab open on a flight.

Does it work with GitHub-flavored markdown?+

Yes. Every diagram exports as a Mermaid code block (` ```mermaid `) that GitHub renders natively in READMEs, issues, pull requests, wikis, and discussions. GitLab, Notion, Obsidian, and most static-site generators do the same.

Can I export Mermaid diagrams as SVG or PNG?+

Yes. Export SVG (sharpest), PNG (universal), or PDF (print). SVG is the recommended format for embedding in web docs and responsive layouts.

What is diagrams as code?+

Diagrams as code is the practice of writing diagrams as plain-text source files instead of clicking shapes in a GUI. The plain-text source lives in version control, diffs cleanly in pull requests, renders deterministically, and scales to teams of any size. Mermaid is the most widely adopted diagrams-as-code syntax.

Do you support Chinese, Japanese, and other languages?+

Yes. The MERMAIDEDITOR UI currently ships in English, 简体中文, and 日本語, with 한국어, Español, Français, Deutsch, and Português on the roadmap. Mermaid itself supports any Unicode label, so your diagrams can be in any language.

Is there an AI Mermaid generator?+

Yes — Pro plans include "prompt to Mermaid": describe what you want in natural language and get a working Mermaid diagram you can edit. Works for all twelve diagram types.

Can I self-host MERMAIDEDITOR?+

A self-hosted edition is on the roadmap. The current product is a static SPA under 90 KB gzipped, so a single Nginx container will serve it to a whole company.

11 / Glossary

Speak Mermaid like you wrote the spec.

A quick reference to the terms you'll meet across the documentation, the cheatsheet, and the per-diagram-type guides.

Mermaid

A JavaScript-based diagrams-as-code library that renders text into SVG diagrams. The reference implementation behind every Mermaid editor.

Mermaid syntax

The plain-text DSL used to describe each diagram type. Each type has its own grammar, but all share Mermaid markdown headers like `flowchart TD` or `sequenceDiagram`.

Diagrams as code

The practice of expressing diagrams as version-controlled text files rather than binary GUI documents.

Flowchart

A node-and-edge diagram for branching processes and decision logic. The most-used Mermaid diagram type.

Sequence diagram

A time-ordered diagram showing messages between actors. Used for API flows, OAuth handshakes, and protocol design.

ER diagram

Entity-relationship diagram. Shows database tables and the relationships between them using crow's-foot notation.

C4 model

A four-level architecture description: Context, Container, Component, Code. Mermaid supports the first three.

ELK renderer

An alternative auto-layout engine for Mermaid flowcharts. Often produces cleaner results on large graphs.

Gantt chart

A horizontal bar chart for project schedules with dates and dependencies. Mermaid renders Gantt from a date-format header and task list.

Mindmap

A radial tree diagram for brainstorming and outlining. Indentation defines hierarchy.

Ready when you are

Open the Mermaid editor. Draw a diagram. Ship the doc.

Free forever for individuals. Pro for teams that need collaboration, AI generation, and history.

Open the editor →Browse 240+ templates