How to make a diagram with Mermaid
- Pick a template: flowchart, sequence diagram, Gantt chart, class diagram, entity-relationship diagram, state diagram, pie chart, mind map or user journey.
- Edit the text on the left. The diagram on the right redraws as you type; on a phone it appears below the editor.
- If there is a mistake, the error message tells you what Mermaid expected.
- Download the diagram as an SVG (sharp at any size, ideal for docs and slides) or a high-resolution PNG.
Diagrams as code
Mermaid turns short text descriptions into diagrams, so you never have to drag boxes around or fix crooked arrows. A flowchart is just lines such as A[Start] --> B{Decision}; shapes are set by brackets: [ ] for boxes, ( ) for rounded, { } for decisions and (( )) for circles. Change TD to LR to lay the chart out left to right.
Because diagrams are text, they can live next to your code, be reviewed in pull requests and stay up to date. GitHub, GitLab, Notion, Obsidian, Confluence (with plugins) and many documentation tools render Mermaid blocks natively, so you can paste the code into a ```mermaid fence in a README and it will display there too.
Privacy
The Mermaid library is loaded once from a CDN, then your diagrams are rendered locally in your browser in strict security mode. Your diagram code is saved in your browser only and is never uploaded.
How do I add text to an arrow?
Write it between dashes, as in A -- Yes --> B, or use A -->|Yes| B.
Can I use special characters in labels?
Wrap the label in double quotes, for example A["Price (USD) & tax"]. This avoids conflicts with Mermaid syntax.
Why is my PNG blurry?
PNGs are exported at twice the on-screen size. For print or very large displays, use the SVG, which scales without losing quality.