Mermaid live editor

Pick a diagram type in Template or paste your own code. The preview updates a moment after you stop typing. If the code has an error, the last diagram that worked stays on screen marked out of date, and a note at the top of the preview gives the line (and the column when Mermaid reports it). Click the line number to jump to it.

The preview zooms with the [-] and [+] buttons or Ctrl/Cmd + scroll, and you can drag it to move around a big diagram. [fit] shrinks the diagram to the panel and [fullscreen] gives it the whole screen. Exports always use the full diagram, whatever the zoom.

You can also drop a .mmd or .md file on the page. For Markdown files, and for pasted text such as an answer from an AI tool, the editor takes the first ```mermaid block. A pasted mermaid.live link opens the diagram it holds. Template, Sample and Clear can be undone once with Undo.

The first word of a diagram tells Mermaid which kind it is. Everything after it uses that type's own syntax. Each row below has a template in the editor. Types marked -beta work, but their syntax may still change in a later Mermaid release.

A flowchart starts with flowchart and a direction: TD or TB (top to bottom), BT, LR (left to right) or RL. Each line then defines nodes and the links between them. The brackets around a label set the shape.

flowchart LR
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -- yes --> D([Stadium])
    C -. maybe .-> E[(Database)]
    C == no ==> F((Circle))
    G["Text with (brackets) needs quotes"]

    %% comments start with two percent signs
    subgraph Backend
      E
      F
    end

--> is a solid arrow, -.-> dotted and ==> thick; text goes between the dashes or after a pipe, as in A -->|yes| B. A node is defined the first time its ID appears, so later lines can use just A. Sequence diagrams work the same way with messages: Alice->>Bob: Hi for a request and Bob-->>Alice: Hello for a dashed reply.

The Theme menu sets Mermaid's built-in themes. Only base can be changed with your own colors through themeVariables. The theme you pick here applies to the preview, the exports and the share link. To keep it with the code, so GitHub and your docs use it too, put a front matter block at the very top:

---
title: Checkout flow
config:
  theme: base
  look: handDrawn
  themeVariables:
    primaryColor: "#fde68a"
    lineColor: "#64748b"
---
flowchart LR
    Cart --> Pay --> Done

Settings in the diagram win over the menus above. The title in front matter is also used for the file name of your exports. Older diagrams use an %%{init: {"theme": "forest"}}%% line for the same thing, and Mermaid still reads it.

Mermaid stops at the first thing it cannot read, so one bad character can blank the whole diagram. These cause most errors, and the editor gives a hint when it spots one of them:

If an error makes no sense, check that the first line is right for the diagram type and that a code block copied from Markdown does not still contain the ``` fence lines.

GitHub and GitLab render a fenced code block tagged mermaid as a diagram in READMEs, issues, pull requests, wikis and comments. Many docs tools and note apps do the same. Press copy as Markdown to get this:

```mermaid
sequenceDiagram
    Browser->>API: GET /orders
    API-->>Browser: 200 OK
```

Where Mermaid is not rendered (email, slides, some wikis), export a PNG or SVG instead. To shrink an exported SVG, run it through the SVG optimizer; to turn any SVG into a PNG at an exact size, use SVG to PNG. For tables in the same README, try the Markdown table generator.

The editor compresses the code and settings and writes them after #pako: in the address bar, the same format the official editor at mermaid.live uses. The part of a URL after # is the fragment, which browsers keep to themselves and do not send to the server. So the link is the only copy of your diagram: we never see it, and it does not expire.

[open in mermaid.live] opens the same diagram there, and a mermaid.live /edit#pako: or /view#pako: link pasted into the editor opens here. Very large diagrams make long links; some chat apps cut those off, so for big diagrams send the .mmd file instead.

The preview uses Mermaid's strict security level, so click handlers and scripts in a diagram you received are not run. Want to document a whole system? Browse documentation tools on DevHunt.