Mermaid Viewer

• The diagram is drawn on your device. The renderer (Mermaid 12) is downloaded from this site and runs in your browser. Nothing is sent outside the site while a diagram is drawn or downloaded.
• The renderer loads after the page. It starts downloading once the page has loaded, before you paste anything. If you paste while it is still downloading, you see “Loading the renderer…” and the diagram appears as soon as it is ready.
• Up to 50,000 characters. Longer code is not drawn, and you see a message instead. Your code stays in the box.
• Scripts and click actions are blocked. Lines such as <script> or click A call ... do not run. A %%{init: ...}%% line in your code cannot turn these protections off.
• Nothing is saved. Your code, the diagram and your background choice are not stored on your device or put in the address bar. There is no share link. If your code is still there after you reload the page, your browser restored the text box.
• Downloads are turned off while there is an error. The last diagram that worked stays dimmed below the error box, but because it no longer matches your code, you cannot download or expand it.
• File names include your device’s date and time, such as mermaid-20261111-1530.svg.

SVG or PNG?

Copy SVG code puts the text of the SVG file on your clipboard, so you can paste it straight into an HTML page or a code editor.

These are the six diagrams under Insert example. Paste any of them as it is to see the diagram.

Flowchart. The first line flowchart TD means top to bottom (LR would be left to right). Square brackets make a box, curly braces make a diamond (a decision), and --> is an arrow. Text between -- and --> labels the arrow.

flowchart TD
    A[Order received] --> B{In stock?}
    B -- Yes --> C[Pack]
    B -- No --> D[Wait for restock]
    D --> B
    C --> E[Ship]

Sequence diagram. participant C as Customer declares a participant with a short ID and a display name. ->> is a solid arrow (a request) and -->> is a dotted arrow (a reply).

sequenceDiagram
    participant C as Customer
    participant S as Shop
    C->>S: Place order
    S-->>C: Order confirmed
    S->>C: Shipping notice

Gantt chart. dateFormat sets how you write dates. Each task is written as Task name :ID, start, duration. after a1 means “starts when a1 ends”, and milestone with a duration of 0d marks a single day. axisFormat %m/%d shows month/day on the axis.

gantt
    title Moving house
    dateFormat YYYY-MM-DD
    axisFormat %m/%d
    tickInterval 1week
    todayMarker off
    section Prepare
    Find a place :a1, 2026-11-02, 7d
    Sign the lease :after a1, 2d
    section Move
    Pack boxes :2026-11-16, 3d
    Moving day :milestone, 2026-11-20, 0d

Class diagram. Attributes and methods go inside the braces. The last line is the relationship between the two classes: one member has many orders. class Member["Member"] gives a class a display name, which is useful when the name you want to show has spaces or symbols.

classDiagram
    class Member["Member"] {
      +name
      +joinedOn
      +logIn()
    }
    class Order["Order"] {
      +number
      +total()
    }
    Member "1" --> "*" Order

State diagram. s1 : Received gives a state a display name. [*] is the start and the end.

stateDiagram-v2
    s1 : Received
    s2 : In progress
    s3 : On hold
    s4 : Done
    [*] --> s1
    s1 --> s2
    s2 --> s3
    s3 --> s2
    s2 --> s4
    s4 --> [*]

Pie chart. Mermaid adds up the values and draws each one as a share of the total. Here the values 50, 25, 10 and 15 add up to 100, so they are also the percentages.

pie title Monthly spending
    "Rent" : 50
    "Food" : 25
    "Transport" : 10
    "Other" : 15

Every other diagram type that Mermaid 12 supports, such as entity relationship diagrams, mind maps, timelines and Git graphs, is drawn too. The examples and this article cover the six above.

• Characters show up as boxes. The diagram uses the fonts installed on your device. If it looks right on screen but a downloaded SVG shows boxes in another program, that program’s fonts are missing those characters (this happens most often with Chinese, Japanese, Korean or emoji). Download a PNG instead: the text is fixed in the image and looks the same everywhere.
• -> versus -->. In a flowchart, an arrow written as -> is not understood. Use -->. In a sequence diagram it is the other way around: use ->> and -->>. Each diagram type has its own arrow syntax.
• The first line is not a diagram type. After any config block (front matter wrapped in ---, or a %%{init: ...}%% line) and %% comment lines, the first line must be a diagram type such as flowchart TD, sequenceDiagram or gantt. Diagram types are case-sensitive, so Flowchart is not understood.
• Error line numbers. The line number in “Could not read line 4” is the line Mermaid reports. When a comma or bracket is missing, the real mistake is often on the line just above. Click the line number to select that line in the code box. Show original error shows Mermaid’s own message, which is useful to search for.
• While you edit. If your code has an error, the last diagram that worked stays dimmed. As soon as the syntax is valid again, the error box goes away and the new diagram appears.
• Offline. If the renderer has not loaded yet, press Try again. Once it has loaded, diagram types you have already drawn work without an internet connection. Each diagram type loads its own part of the renderer, so a type you draw for the first time may still need a connection.
• fa:fa-... icons. Icon fonts are not loaded from outside the site, so Font Awesome icons are not drawn. Only the text appears.
• Very large diagrams. A PNG is scaled down so that neither side is wider than 8,000 pixels. A diagram with more than 500 links (arrows) is not drawn. Split it into smaller diagrams.

Is my Mermaid code sent to a server?

No. The diagram is drawn in your browser, and your code is not saved anywhere. Even if your diagram shows internal systems or service names, nothing is left after you close the page.

Will it look exactly like it does on GitHub?

It reads the same Mermaid syntax, but the version may differ. This tool uses Mermaid 12. If GitHub or your wiki runs an older version, newer diagram types and newer syntax may not render there, and colors and spacing can differ slightly.

Is this the same as the Mermaid Live Editor?

Both preview Mermaid code. This tool focuses on a quick, private preview: it does not save your code, does not put it in a share link and does not call outside addresses while drawing. If you want to share an editable diagram by link, use the Mermaid Live Editor instead.

How big is the PNG?

Twice the size of the diagram on screen. Very large diagrams are scaled down so that neither side is wider than 8,000 pixels.

Is the dark background transparent?

No. Both PNG and SVG have the background you chose filled in: white for Light and dark gray for Dark.