How to

How to use Mermaid Preview

A preview tool for Mermaid diagrams. It is useful when you want to quickly try syntax while shaping a diagram or check the appearance of specification diagrams. Switching themes lets you compare how the output looks before sharing it.

Use Mermaid Preview

Use Cases

When to use it

Quickly check a flowchart for a specification document
Try and refine sequence diagram syntax
Review the appearance of a Mermaid diagram before adding it to documentation
Quickly polish a sequence diagram before a design review
Try out ER diagram or Gantt chart syntax
Check how a diagram looks before sharing it with your team

Capabilities

What this tool can do

Check Mermaid syntax and diagrams side by side
Switch themes
Confirm syntax errors and copy source
Save or copy the diagram as SVG or PNG
Show error messages below the preview in real time
Support flowcharts, sequence diagrams, ER diagrams, and more

Guide

How to use each screen area

Learn how to use each screen area, including settings, input, previews, results, and saving.

01 HOWTO

Syntax editor area

Write Mermaid syntax in the left editor. Start from a diagram template, add context-aware insert suggestions, and check the structure in the preview as you edit.

What this area does

Enter Mermaid syntax directly
Insert a starter template for the diagram type
Add suggestions that match the current diagram type
Fix input while checking preview errors

Where to use it

Syntax input

Enter Mermaid syntax for flowcharts, sequence diagrams, class diagrams, and other diagrams.

Template selection

When the editor is empty, choose a diagram type and insert its starter structure.

Input suggestions

Add matching items such as nodes, edges, branches, or loops at the cursor position.

Error review

When the syntax has a problem, use the preview-side message to correct the input.

02 HOWTO

Input suggestions and editor tools

Use the templates and suggestions above the editor, the history control in the top bar, and clear or copy actions in the editor header. This area helps you create a base diagram, add parts, and reuse a draft.

What this area does

Insert a template for the diagram type
Add parts that match the current diagram
Return to a recent editing state from history
Clear or copy the current syntax

Where to use it

Templates

Choose a starter structure for a flowchart, sequence diagram, class diagram, or another diagram type.

Suggestions

Add parts such as nodes, edges, branches, loops, or relationships that fit the current syntax.

History and draft

The browser keeps your current draft, and the history menu lets you return to a recent editing state.

Clear input

Remove the current syntax and start a new diagram.

Copy syntax

Copy the draft syntax into a README, specification, or external note.

03 HOWTO

Preview and theme area

Use the right preview pane to confirm the rendered Mermaid diagram and switch the theme before sharing. If rendering fails, the error appears in this same area.

What this area does

Switch the preview theme
Confirm the rendered diagram
Review rendering errors
Return to the input and revise the syntax

Where to use it

Switch theme

Change the background and line colors to match where the diagram will be shared.

Review diagram

Check whether the Mermaid syntax renders into the intended diagram.

Review errors

When the diagram cannot render, read the error message before editing the syntax.

Edit input

Use the preview result as feedback while revising the syntax in the editor.

04 HOWTO

Output format, copy, and download area

Use the output controls above the preview to choose SVG or PNG, then copy or download the rendered diagram. If export is not available, review the error and return to the input.

What this area does

Choose SVG or PNG as the output format
Copy the rendered diagram as an image
Download the rendered diagram as a file
Copy the original Mermaid syntax
Review errors when export is not possible

Where to use it

Output format

Switch between SVG and PNG depending on where you will share or paste the diagram.

Copy image

Copy the rendered diagram in the selected format and paste it into a document or chat.

Download image

Save the rendered diagram as an SVG or PNG file.

Copy syntax

Copy the Mermaid syntax used to create the diagram and share it with the image.

Review errors

When the diagram cannot be exported, check the error and return to the input.

Notes

Important points are grouped with reasons so you can make decisions before using the tool.

Things to check

Start with the smallest syntax that renders a diagram

If you add many elements at once, it becomes harder to identify the cause of an error. Start from the smallest valid syntax and then add branches or nodes.

Things to check

Switch themes to review line and text visibility

Even with the same Mermaid syntax, background and line colors look different by theme. Checking with a theme close to the final destination reduces rework.

Note

Syntax errors appear below the preview

If the syntax is incorrect, an error message is shown in the preview area. When no diagram appears, check the error message and fix the syntax before retrying.

FAQ

Questions about Mermaid Preview

Questions that make decisions easier before use are summarized first.

Can I save the diagram as an image?

Yes. SVG and PNG are both supported, with both copy and download actions available.

Where can I see syntax errors?

Error messages are shown below the preview so you can immediately identify the broken part while editing.

What diagram types are available?

Flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and other standard Mermaid diagram types are supported.

Where can I look up the syntax?

The official Mermaid documentation lists the syntax for each diagram type. You can write syntax and check the result in this page at the same time.

Can I change the diagram background color?

Switching themes changes the overall style including the background. Try different themes to compare how the diagram looks.

How do I share a diagram as an image?

Save the diagram as SVG or PNG and share the file. Copying to the clipboard is also supported.

Next guides

Related guides

Related guides are listed next so you can continue without getting lost.

Detailed reference for JSON input, formatting, minifying, validation, result review, and copying by screen area.

View guide

Detailed reference for PlantUML syntax input, editor actions, preview, themes, output, and error review by screen area.

View guide

A screen-area guide for IP, connection, server-observed data, browser, device, permissions, and shareable JSON.

View guide

How to use IP & Network Information Checker

Image Tools Video Tools Text Tools Developer Tools Design Tools Generator Tools

How to use Mermaid Preview

When to use it

What this tool can do

How to use each screen area

Syntax editor area

What this area does

Where to use it

Syntax input

Template selection

Input suggestions

Error review

Input suggestions and editor tools

What this area does

Where to use it

Templates

Suggestions

History and draft

Clear input

Copy syntax

Preview and theme area

What this area does

Where to use it

Switch theme

Review diagram

Review errors

Edit input

Output format, copy, and download area

What this area does

Where to use it

Output format

Copy image

Download image

Copy syntax

Review errors

Notes

Start with the smallest syntax that renders a diagram

Switch themes to review line and text visibility

Syntax errors appear below the preview

Questions about Mermaid Preview

Can I save the diagram as an image?

Where can I see syntax errors?

What diagram types are available?

Where can I look up the syntax?

Can I change the diagram background color?

How do I share a diagram as an image?

Related guides

How to use JSON Formatter

How to use PlantUML Preview

How to use IP & Network Information Checker