---
title: "Mermaid Editor: Live Preview and Export | Prettify Docs"
description: Edit Mermaid diagrams in a split editor with live preview. Insert
  templates, fix validation errors, and export as SVG or PNG. Free in Prettify.
url: https://prettify.tools/docs/mermaid
---

[Docs](https://prettify.tools/docs) / Formats

# Mermaid

Last updated: October 16, 2026

Prettify opens Mermaid diagrams in a split editor with a live preview. You type the diagram text on the left and see the rendered diagram on the right. It is free, with no sign-up.

Mermaid is a text format for diagrams: flowcharts, sequence diagrams, and more. Prettify detects a Mermaid document, highlights the source, checks it for common errors, and exports the diagram as an image.

## Open a Mermaid diagram

You can start a diagram in three ways.

1. Open the editor at [/app/editor](https://prettify.tools/app/editor) and pick Mermaid in the format list.
2. Paste Mermaid text. Prettify detects it when the first line is a diagram keyword.
3. Open a `.mmd` or `.mermaid` file.

A Mermaid document must start with a diagram keyword, for example `flowchart` or `sequenceDiagram`. Blank lines, a YAML frontmatter block, and `%%` comment lines are allowed before the keyword.

## Editor and live preview

The Mermaid view has two panes. The left pane is the source editor with line numbers. The right pane is the preview.

The preview re-renders shortly after you stop typing. A badge at the top left shows the detected diagram type.

Drag the divider between the panes to change their sizes. Below 768 px wide the panes stack, with the editor above the preview.

To save your edits, press `Cmd+S` (Mac) / `Ctrl+S` (Windows, Linux), or select Save when the button appears.

The preview renders with strict security, because a diagram can come from a shared or opened document. Click callbacks and raw HTML labels do not run, and the Prettify style does not load remote images.

## Diagram style

Settings has two styles for Mermaid diagrams, under Diagrams. You can also switch from the Command Palette: open it with `Cmd+K` (Mac) / `Ctrl+K` (Windows, Linux) and type "diagram style". The style applies to the Mermaid view, the template previews, and Mermaid code blocks in Markdown.

| Style              | Renderer                             | Use it when                                                     |
| ------------------ | ------------------------------------ | --------------------------------------------------------------- |
| Prettify (default) | [Pele](https://pele.run)             | You want clean, compact diagrams that draw almost instantly.    |
| GitHub             | [Mermaid.js](https://mermaid.js.org) | The diagram must look the same as on GitHub, GitLab, or Notion. |

Both read the same Mermaid text. The Prettify style uses its own layout, so the position of boxes and lines can differ from GitHub. Its colors follow your Prettify theme. Mermaid themes set with `%%{init: {"theme": ...}}%%` or `themeVariables` apply only in the GitHub style. Math in labels (`$$x^2$$`) renders in both styles.

If the Prettify style cannot draw a diagram, for example a diagram type it does not have, Prettify draws it in the GitHub style instead.

## Templates

Select the template button in the toolbar to see a preview of each starting diagram, in your current style and theme. Select one to insert it. A template replaces the current source. The templates are:

| Template         | Keyword             |
| ---------------- | ------------------- |
| Flowchart        | `flowchart`         |
| Sequence Diagram | `sequenceDiagram`   |
| Class Diagram    | `classDiagram`      |
| State Diagram    | `stateDiagram-v2`   |
| ER Diagram       | `erDiagram`         |
| Gantt Chart      | `gantt`             |
| Pie Chart        | `pie`               |
| Mindmap          | `mindmap`           |
| Git Graph        | `gitGraph`          |
| Timeline         | `timeline`          |
| User Journey     | `journey`           |
| Quadrant Chart   | `quadrantChart`     |
| XY Chart         | `xychart-beta`      |
| Sankey           | `sankey-beta`       |
| Block Diagram    | `block-beta`        |
| Architecture     | `architecture-beta` |

This is the Flowchart template:

```mermaid
flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E
```

## Diagram types

Prettify recognizes these diagram keywords: `graph`, `flowchart`, `sequenceDiagram`, `classDiagram`, `stateDiagram`, `erDiagram`, `gantt`, `pie`, `gitGraph`, `mindmap`, `timeline`, `quadrantChart`, `sankey`, `xychart`, `block`, `journey`, and `architecture`.

## Validation

Prettify checks the source and reports errors with their line number.

- The document must start with a diagram keyword.
- In a `flowchart` or `graph`, an arrow must be `-->`, not `->`.
- Each `[ ]` and `{ }` on a line must be closed.

The preview also shows the renderer's own error if the diagram fails to render. In the Prettify style, the error gives the line and the column. The last valid diagram stays on screen while you fix the text.

## Export

Select the export button in the toolbar to save the diagram as an image.

- Export as SVG keeps the diagram as vector graphics.
- Export as PNG saves a raster image at 2x scale.

The image background matches the current theme. On the desktop app a native save dialog opens. On the web the file downloads.

## Related

- [Diagram View](https://prettify.tools/docs/diagram-view) renders JSON, YAML, and other data as a node graph.
- [Markdown](https://prettify.tools/docs/markdown) can render Mermaid code blocks as diagrams in the Preview (Pro).
- [Views](https://prettify.tools/docs/views) explains every view Prettify offers.
- The [Mermaid Editor](https://prettify.tools/mermaid-editor) tool page is a quick entry point.

## Try it online

Tool pages for this topic. Each one runs in your browser.

- [Mermaid Editor](https://prettify.tools/mermaid-editor)

* [PreviousRSS and Atom feeds](https://prettify.tools/docs/rss-feeds)
* [Next Markdown](https://prettify.tools/docs/markdown)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Prettify",
  "url": "https://prettify.tools",
  "description": "Multi-format data viewer, editor, and query engine for JSON, YAML, CSV, XML, Mermaid, Markdown, MDX, HTML, and SVG",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Web, macOS, Windows, Linux",
  "offers": [
    {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD",
      "description": "Free tier with core features"
    },
    {
      "@type": "Offer",
      "price": "19.99",
      "priceCurrency": "USD",
      "description": "Pro: lifetime access to all features"
    }
  ],
  "publisher": {
    "@id": "https://prettify.tools/#organization"
  }
}
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "https://prettify.tools/#organization",
  "name": "Prettify",
  "legalName": "Off Leash Labs",
  "url": "https://prettify.tools/",
  "logo": {
    "@type": "ImageObject",
    "url": "https://prettify.tools/icon-512.png",
    "width": 512,
    "height": 512
  },
  "contactPoint": {
    "@type": "ContactPoint",
    "contactType": "customer support",
    "email": "offleashlabs@gmail.com",
    "availableLanguage": "English"
  }
}
```