Mermaid

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 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	You want clean, compact diagrams that draw almost instantly.
GitHub	Mermaid.js	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:

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 renders JSON, YAML, and other data as a node graph.
• Markdown can render Mermaid code blocks as diagrams in the Preview (Pro).
• Views explains every view Prettify offers.
• The Mermaid Editor tool page is a quick entry point.