Mermaid
viewer
Write Mermaid and see the diagram as you type. Edit the example, or open a markdown file that has diagrams in it.
Updated
Markdown· Click to edit
Result
§01
Diagram types
Each example below is live. Change the code and the diagram redraws. The Mermaid documentation lists every option for each type.
Flowchart
Boxes joined by arrows. LR lays it out left to right; TD goes top down. Curly braces make a decision.
Markdown· Click to edit
Result
Sequence diagram
Messages between participants, in order. ->> is a call; -->> is a reply.
Markdown· Click to edit
Result
Class diagram
Classes with their fields and methods, and how they relate.
Markdown· Click to edit
Result
State diagram
The states something moves through. [*] marks the start and the end.
Markdown· Click to edit
Result
Entity relationship diagram
Tables and the relationships between them. ||--o{ reads as one to zero-or-more.
Markdown· Click to edit
Result
Gantt chart
Tasks on a timeline. after starts a task when another one ends.
Markdown· Click to edit
Result
Pie chart
Parts of a whole. Each slice is a label and a number.
Markdown· Click to edit
Result
Mindmap
Ideas branching from a root. Indentation sets the level.
Markdown· Click to edit
Result
Timeline
Events grouped by period.
Markdown· Click to edit
Result
§02
Expand, download and copy
Hover over a diagram for its controls.
- Expand opens the diagram full screen. Drag to pan, scroll or pinch to zoom.
- Download saves it as a PNG at twice its size, or as an SVG that stays sharp at any size.
- Copy puts the image on your clipboard, ready to paste into a doc, a slide or a chat. It can copy the Mermaid source instead.
In RenderMD’s reading settings, switch Diagrams to Sketch for a hand-drawn look. Diagrams follow the light or dark theme, and always print in the light palette.
§03
Mermaid in a markdown file
In a markdown file, put the diagram in a code block whose language is mermaid. GitHub, GitLab and RenderMD all draw these blocks as diagrams, so the same file works in each.
The cheat sheet’s diagrams section covers this next to the rest of markdown’s syntax. To work on a whole document, open the editor and write the markdown and diagrams together.
Frequently asked
Is this the official Mermaid Live Editor?
No. The official editor is at mermaid.live. RenderMD draws diagrams with the same Mermaid library, inside markdown documents, so you can write the text around a diagram as well.
Why does my diagram show an error?
Mermaid stops at the first line it can’t parse and RenderMD shows its message instead of the diagram. Check the first line names a diagram type, like flowchart LR or sequenceDiagram, and that labels with spaces or brackets are in quotes.
Can I export a diagram as SVG?
Yes. Open the diagram’s Download menu and choose Vector (.svg). Saving the whole document with Export → PDF document keeps its diagrams as vector graphics too.
Do my diagrams leave my computer?
No. Mermaid runs in your browser, and documents are stored in your browser’s local storage. RenderMD’s servers never receive them.