# Mermaid Editor

> Free online Mermaid diagram editor with live preview. Create flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 13 more diagram types using plain-text syntax. No signup, browser-only, export to SVG/PNG/PDF/JPG/WebP.

## Core pages

- [Editor](/): Split-pane live editor. Type Mermaid syntax and see diagrams render instantly. Share via URL query params (`?code=`, `?type=`).
- [Diagram types](/diagrams): Reference index for all 18 supported Mermaid diagram types.
- [Templates](/templates): Ready-to-use Mermaid diagram templates to copy and edit.
- [Cheat sheet](/cheatsheet): One-page Mermaid syntax quick reference.
- [Tools](/tools): Specialized converters, visual builders, and export utilities.
- [Blog](/blog): Guides and comparisons for Mermaid diagramming workflows.
- [Embed](/embed-mermaid): Embed the Mermaid editor in external sites via iframe.
- [Contact](/contact): Contact form and support channels.

## Diagram type guides

- [Flowchart](/diagrams/flowchart): Processes, decision trees, and workflows. Keyword: `flowchart TD`.
- [Sequence diagram](/diagrams/sequence): Time-ordered messages between actors. Keyword: `sequenceDiagram`.
- [Class diagram](/diagrams/class): Object-oriented classes and relationships. Keyword: `classDiagram`.
- [State diagram](/diagrams/state): State machines and transitions. Keyword: `stateDiagram-v2`.
- [Gantt chart](/diagrams/gantt): Project timelines with tasks and dependencies. Keyword: `gantt`.
- [ER diagram](/diagrams/er-diagram): Entity-relationship database models. Keyword: `erDiagram`.
- [User journey](/diagrams/journey): Customer touchpoints and satisfaction scores. Keyword: `journey`.
- [Git graph](/diagrams/git-graph): Branching, merges, and tags. Keyword: `gitGraph`.
- [Mindmap](/diagrams/mindmap): Radial brainstorming outlines. Keyword: `mindmap`.
- [Pie chart](/diagrams/pie-chart): Proportional breakdowns. Keyword: `pie`.
- [Timeline](/diagrams/timeline): Chronological events grouped by section. Keyword: `timeline`.
- [Kanban](/diagrams/kanban): Board columns and cards. Keyword: `kanban`.
- [Quadrant chart](/diagrams/quadrant-chart): Two-axis positioning charts. Keyword: `quadrantChart`.
- [Sankey diagram](/diagrams/sankey-diagram): Flow volumes between nodes. Keyword: `sankey-beta`.
- [XY chart](/diagrams/xy-chart): Line and bar charts from data points. Keyword: `xychart-beta`.
- [Block diagram](/diagrams/block-diagram): Nested block structures. Keyword: `block-beta`.
- [Architecture diagram](/diagrams/architecture): C4-style architecture views. Keyword: `architecture-beta`.
- [Packet diagram](/diagrams/packet-diagram): Network packet layouts. Keyword: `packet-beta`.

## Tools

- [SQL to Mermaid ERD](/tools/sql-to-mermaid-erd): Convert SQL DDL into Mermaid ER diagrams.
- [PlantUML to Mermaid](/tools/plantuml-to-mermaid): Convert PlantUML source to Mermaid syntax.
- [ER diagram online](/tools/er-diagram-online): Visual ER diagram builder with live Mermaid output.
- [Sequence diagram online](/tools/sequence-diagram-online): Visual sequence diagram builder.
- [Class diagram online](/tools/class-diagram-online): Visual class diagram builder.
- [XY chart builder](/tools/xychart-builder): Build xychart-beta diagrams interactively.
- [Gantt chart maker](/tools/gantt-chart-maker): Visual Gantt chart builder.
- [State machine builder](/tools/state-machine-builder): Visual state diagram builder.
- [Git branching visualizer](/tools/git-branching-visualizer): Interactive gitGraph workflow diagrams.
- [Timeline builder](/tools/timeline-builder): Visual timeline diagram builder.
- [Mermaid to PNG](/tools/mermaid-to-png): Export diagrams as PNG images.
- [Mermaid to SVG](/tools/mermaid-to-svg): Export diagrams as SVG files.
- [Mermaid to PDF](/tools/mermaid-to-pdf): Export diagrams as PDF documents.
- [Mermaid to JPG](/tools/mermaid-to-jpg): Export diagrams as JPG images.
- [Mermaid to WebP](/tools/mermaid-to-webp): Export diagrams as WebP images.

## Blog

- [Getting started with Mermaid diagrams](/blog/getting-started-with-mermaid-diagrams): Developer's quick guide to text-based diagramming.
- [Is Mermaid free?](/blog/is-mermaid-free): Plain-English answer on Mermaid licensing and pricing.
- [Mermaid vs Draw.io in 2026](/blog/mermaid-vs-drawio-2026): Code-based vs drag-and-drop diagramming.
- [PlantUML vs Mermaid in 2026](/blog/mermaid-vs-plantuml-2026): Comparison for engineering teams.
- [Mermaid vs PlantUML vs Draw.io](/blog/mermaid-vs-plantuml-vs-drawio): Three-way workflow comparison.
- [C4 model diagrams with Mermaid](/blog/c4-model-diagrams-with-mermaid): Practical guide for software architects.

## Languages

The site ships in 19 locales via path prefixes (English at `/`, others at `/{locale}/`): en, zh-hans, zh-hant, ja, ko, ru, es, fr, de, pt, it, tr, ar, vi, th, id, nl, pl, hi.

## Facts

- Free to use with no account required.
- All diagram rendering runs client-side in the browser.
- Built on the open-source [Mermaid.js](https://github.com/mermaid-js/mermaid) syntax (MIT license).
- RSS feed at `/rss.xml`; sitemap at `/sitemap.xml`.