Mermaid is a free, open-source way to write diagrams as text. A line like A --> B becomes two boxes joined by an arrow. It supports flowcharts, sequence, class, state and ER diagrams, Gantt charts, mind maps, timelines, pie charts and more.

Is my diagram uploaded?

No. Drawing, SVG and PNG all happen in your browser. Only PDF and Word are made by our converter: it receives a picture of the diagram (not the code), builds the file in memory and keeps nothing.

How do I fix a Mermaid syntax error?

The error box names the line and suggests a fix. The usual causes are an arrow with nothing after it, a label with brackets or a colon that needs double quotes, curly quotes from a word processor, or the word end used as a flowchart node.

How do I share a diagram?

Click Share link. The diagram is compressed into the part of the link after #, which browsers never send to a server. Anyone who opens the link sees the diagram and can edit their own copy.

Can I use the pictures in commercial work?

Yes. Diagrams you make are yours, and Mermaid itself is MIT-licensed. There is no watermark.

Edit and export Mermaid diagrams

Write or paste Mermaid code and watch the diagram draw itself. Start from a template, fix mistakes with plain-English hints, then download SVG, PNG, PDF or Word. Your code stays in your browser.

Mermaid turns a few lines of text into flowcharts, sequence diagrams, ER diagrams, Gantt charts and mind maps. It is how ChatGPT, Claude and Copilot draw diagrams, and GitHub, GitLab, Notion and Obsidian show it too. Mermaid Studio is the place to fix and finish those diagrams.

Paste a whole AI answer and the diagram is picked out of its ```mermaid block. When something is wrong, the line is marked and the hint says what to change - a missing arrow, a label that needs quotes, a stray curly quote - instead of a parser message.

Pick a theme or the hand-drawn style, zoom in to check the details, then download a crisp SVG or PNG (up to four times the size, with a transparent background if you like), copy the picture straight into Slides or Docs, or make a PDF or Word file.

Everything is drawn in your browser. Your diagram is kept on your device so a reload does not lose it, and a share link carries the diagram inside the link itself, so nothing is stored on a server.

Pick a diagram tool

Edit and export

Fix Mermaid code with a live preview and download it as a picture.

Mermaid Live Editor - Type or paste Mermaid code on the left and the diagram redraws on the right as you go. Mistakes are explained in plain English, and your code stays in your browser.
Mermaid to PNG - Paste Mermaid code and download the diagram as a sharp PNG, up to four times its size, on white or transparent. Or copy the picture and paste it straight into a slide or a document.
Mermaid to SVG - Paste Mermaid code and download the diagram as an SVG: a vector file that stays sharp at any size and is small enough for websites and documentation.

Diagram makers

A page for every diagram type: start from its template and change the words.

Flowchart Maker - Describe the steps in a few lines of text and the flowchart lays itself out - no dragging boxes or lining up arrows. Start from the template and change the words.
Sequence Diagram Maker - Show who talks to whom, in order: users, apps, APIs and databases. Write one message per line and the diagram lines everything up for you.
ER Diagram Maker - Sketch a database in text: tables, their columns and how they relate. The ER diagram lays itself out, ready for a design review or the project docs.
Gantt Chart Maker - List the tasks with a start and a length, and the Gantt chart draws the bars for you. Tasks can follow each other, so moving one date moves the rest.
Mind Map Maker - Type your ideas as an indented list and they become a mind map. Indent a line to make it a branch of the line above - that is all there is to it.
Class Diagram Maker - Describe your classes, their fields and methods, and how they relate. The UML class diagram lays itself out, ready for a design review or the docs.
State Diagram Maker - Show every state something can be in and what moves it from one to the next: an order, a document, a login. Write one transition per line.
Timeline Maker - Type a date or period and what happened, one per line, and the timeline draws itself in order. Good for company history, project phases and roadmaps.
Pie Chart Maker - Type each label with its value and get a clean pie chart with percentages. No spreadsheet needed, and the numbers stay in your browser.
User Journey Map Maker - List the stages of a journey, the steps in each, who is involved and how they feel about it. The map shows where the experience dips.
Git Graph Maker - Write Git-like commands - commit, branch, checkout, merge - and get a clean branch diagram. Ideal for explaining a branching strategy or a release.
Quadrant Chart Maker - Name two axes and four quadrants, then place each item with two scores between 0 and 1. Perfect for effort-value matrices and priority maps.
Bar Chart Maker - List the labels and the numbers, and get a bar chart, a line chart or both in one picture. No spreadsheet needed.
Kanban Board Maker - Write each column with its cards indented below it and get a tidy Kanban board picture - handy for a status update, a slide or a README.

Learn Mermaid

The syntax for every diagram type, with examples to try.

Mermaid Cheat Sheet - The Mermaid syntax you need most, with short examples. Paste any example into the editor above to see it drawn, then change it to fit your diagram.

Coming soon

Visual editing - Drag nodes and edit labels right on the picture.
Every diagram in a file - Turn all the diagrams in a Markdown file into pictures at once.
Colour picker - Colour nodes and arrows without writing classDef code.

Frequently asked questions

What is Mermaid?: Mermaid is a free, open-source way to write diagrams as text. A line like A --> B becomes two boxes joined by an arrow. It supports flowcharts, sequence, class, state and ER diagrams, Gantt charts, mind maps, timelines, pie charts and more.
Is my diagram uploaded?: No. Drawing, SVG and PNG all happen in your browser. Only PDF and Word are made by our converter: it receives a picture of the diagram (not the code), builds the file in memory and keeps nothing.
How do I fix a Mermaid syntax error?: The error box names the line and suggests a fix. The usual causes are an arrow with nothing after it, a label with brackets or a colon that needs double quotes, curly quotes from a word processor, or the word end used as a flowchart node.
How do I share a diagram?: Click Share link. The diagram is compressed into the part of the link after #, which browsers never send to a server. Anyone who opens the link sees the diagram and can edit their own copy.
Can I use the pictures in commercial work?: Yes. Diagrams you make are yours, and Mermaid itself is MIT-licensed. There is no watermark.