Diagram tool
Paste Mermaid code or open a .mmd, .mermaid or Markdown file and watch the diagram redraw as you type. Nothing leaves your browser.
Private · drawn in your browser
Mermaid
Your diagram will appear here
Type or paste Mermaid code, drop a .mmd, .mermaid or Markdown file anywhere on this page, or start from an example.
Or try
Mermaid turns short, readable text into flowcharts, sequence diagrams, class and ER diagrams, Gantt charts, mind maps and more, which is why it is built into GitHub, GitLab, Notion, Obsidian and many documentation sites. This viewer redraws the diagram a moment after every keystroke, so you see what you are writing without committing it first, or what a diagram an AI assistant wrote for you actually looks like. Syntax mistakes are underlined on the exact line, and the last working diagram stays on screen until you fix them.
Pan by dragging, zoom with Ctrl and the scroll wheel or a pinch, and fit the whole diagram with one key. Large diagrams get an overview map. Choose any of Mermaid's themes, switch between the classic, neo and hand-drawn looks, or lay flowcharts out with ELK or Dagre, then export a PNG, an SVG with its fonts inside, or a ready-to-paste Markdown block.
The viewer runs Mermaid 12, so it draws everything Mermaid itself can, including the newest diagram types. Examples has a working starter for each of them.
Mermaid and its layout engines are served from this site and run inside your browser. Your diagram is never uploaded, never logged, and never added to the page address. It is kept only in this browser tab so a reload does not lose your work, and closing the tab discards it. Your style choices, such as the theme and the width of the code pane, are remembered on this device.
Open a Markdown file such as a README.md and every ```mermaid block in it becomes a diagram you can step through. In Chrome
and Edge, an opened file is watched, so the diagram redraws each time you save it in your editor.
```mermaid block from a chat or an issue works as it is, and Examples loads a starter for any diagram type.Mermaid is an open-source language that describes diagrams in plain text: a few lines such as A --> B become a flowchart, a sequence diagram, a Gantt chart or a mind map. GitHub, GitLab, Notion, Obsidian and many documentation tools draw it inside Markdown, so diagrams can live next to the code and be reviewed in a pull request.
No. The Mermaid Live Editor at mermaid.live is made by the Mermaid project. This is an independent viewer built on the same open-source Mermaid library and served from this site. It adds local files: it opens .mmd and Markdown files, redraws them each time you save, steps through every ```mermaid block in a README, keeps your code out of the page address and installs as a desktop app.
All of them that Mermaid 12 draws on its own: flowcharts, sequence, class, state and entity relationship diagrams, user journeys, Gantt charts, pie, XY and quadrant charts, requirement diagrams, Git graphs, C4, mind maps, timelines, Sankey, block, packet and architecture diagrams, Kanban boards, radar charts, treemaps, Venn, use case and Ishikawa diagrams, Wardley maps, Cynefin frameworks, event models, tree views, swimlanes, agent flows and railroad diagrams. Only ZenUML is missing, because it needs a separate plugin.
No. Mermaid is served from this site and runs inside your browser, so your code is drawn on your own device. It is kept only in this browser tab so a reload does not lose it, and it is never sent to a server or added to the page address.
Yes. Open or drop a .md file such as a README and every ```mermaid block in it becomes a diagram. The viewer draws the block under the cursor, and a picker above the diagram steps through the others. A single ```mermaid block pasted from a chat or an issue works as well.
A .mmd or .mermaid file is plain text holding Mermaid code, so a text editor shows only the code. To see the diagram, press Open above the editor or drop the file anywhere on this page. Once the viewer is installed as an app, both kinds also open from your file manager's Open With menu.
Yes, in Chrome and Edge. Open a .mmd, .mermaid or Markdown file, or drop it onto the page, and the diagram redraws each time you save it in your editor, keeping your zoom and position. Editing the code inside the viewer stops the live reload, so your changes are never overwritten.
The line with the error is underlined in the editor and named in a banner above the diagram, and Go to error puts the cursor on it. The last diagram that worked stays on screen, faded, until the code is fixed, so a typo never leaves you with an empty page.
This viewer runs Mermaid 12, which lays flowcharts out with ELK and gives them a softer look by default. Many sites still run Mermaid 11. To match them, open Style and choose the Classic look and the Dagre layout. Settings written in the diagram's own front matter or %%{init}%% line always win, as they do everywhere else.
Yes. Style offers every Mermaid theme, from Default, Neutral and Forest to the dark and Redux palettes, the classic, neo and hand-drawn looks, and the ELK or Dagre layout engines. By default the theme follows this page, light or dark, and flowcharts get the viewer's Studio style, with tinted decisions, start and end steps. Your choice is remembered on this device.
Use Export. PNG gives a sharp image at twice the size on screen, SVG a scalable vector with its fonts embedded, and Copy image puts a PNG on the clipboard. Exports keep the diagram's background unless you tick Transparent background. Copy for Markdown gives you a ready-made ```mermaid block, and Mermaid file downloads the code as .mmd.
Yes. In Chrome or Edge, install it from the address bar or the browser menu. It then opens in its own window and appears in your file manager's Open With menu for .mmd and .mermaid files, so a diagram opens straight from your desktop, code editor or terminal.