Mermaid diagram types
Mermaid turns short text descriptions into diagrams. Each guide below explains what the diagram is for, shows a working example you can open in TryMermaid, and lists the syntax you need.
What is a Mermaid diagram?
Mermaid is a text language for diagrams. You write a keyword for the kind of diagram, then a line for each shape or connection, and Mermaid draws it. Because the diagram is plain text, it lives in version control beside your code and changes in a pull request like any other file.
Each diagram type has its own short syntax built for one job. Pick the type by what you want the reader to understand, not by how it looks: the groups below are sorted that way.
Processes and flows
How something happens: steps, decisions, messages and changes of state.
Flowchart
Visual canvasShow the steps and decisions in a process.
Flowchart syntax and examples →Sequence diagram
Show messages between users, services or APIs over time.
Sequence diagram syntax and examples →State diagram
Describe the states of something and what changes them.
State diagram syntax and examples →User journey
Show how each step of an experience feels.
User journey syntax and examples →
Software and system design
How software and systems are built: code, data, architecture and requirements.
Class diagram
Model classes in code and how they relate.
Class diagram syntax and examples →ER diagram
Design database tables and their relationships.
ER diagram syntax and examples →C4 diagram
Describe software architecture at one level of detail.
C4 diagram syntax and examples →Block diagram
Lay out components on a grid you control.
Block diagram syntax and examples →Requirement diagram
Trace requirements to what satisfies and verifies them.
Requirement diagram syntax and examples →Git graph
Explain a branching and release strategy.
Git graph syntax and examples →Packet diagram
Document the bit layout of a binary format.
Packet diagram syntax and examples →
Data and charts
Numbers as pictures: shares, trends, flows and priorities.
Pie chart
Show how a total splits into parts.
Pie chart syntax and examples →XY chart
Plot values over a scale as bars or a line.
XY chart syntax and examples →Sankey diagram
Show how a quantity flows and where it is lost.
Sankey diagram syntax and examples →Quadrant chart
Compare items on two axes to decide priority.
Quadrant chart syntax and examples →
Planning and ideas
Plans and ideas: schedules, histories and brainstorms.
Which Mermaid diagram should I use?
Start from what you want to show. Every diagram type works in the TryMermaid code editor with a live preview, and flowcharts can also be edited on the visual canvas.
| If you want to… | Use | Mermaid keyword |
|---|---|---|
| Show the steps and decisions in a process | Flowchart | flowchart TD |
| Show messages between users, services or APIs over time | Sequence diagram | sequenceDiagram |
| Model classes in code and how they relate | Class diagram | classDiagram |
| Design database tables and their relationships | ER diagram | erDiagram |
| Describe the states of something and what changes them | State diagram | stateDiagram-v2 |
| Brainstorm or outline ideas around one topic | Mind map | mindmap |
| Schedule tasks with dates and dependencies | Gantt chart | gantt |
| List events in chronological order | Timeline | timeline |
| Show how a total splits into parts | Pie chart | pie title Where the marketing budget went |
| Explain a branching and release strategy | Git graph | gitGraph |
| Show how each step of an experience feels | User journey | journey |
| Compare items on two axes to decide priority | Quadrant chart | quadrantChart |
| Show how a quantity flows and where it is lost | Sankey diagram | sankey-beta |
| Plot values over a scale as bars or a line | XY chart | xychart-beta |
| Lay out components on a grid you control | Block diagram | block-beta |
| Document the bit layout of a binary format | Packet diagram | packet-beta |
| Trace requirements to what satisfies and verifies them | Requirement diagram | requirementDiagram |
| Describe software architecture at one level of detail | C4 diagram | C4Context |
Turn a diagram into an image
Further reading
- The best Mermaid diagram editors Seven editors compared on price, free-plan limits, AI and drag-and-drop.
- Mermaid vs PlantUML vs Graphviz Which text-to-diagram tool fits which job, with the same diagram in all three.
- Generate Mermaid diagrams with Claude Have Claude write, check and save Mermaid diagrams for you.
Mermaid diagram FAQ
How many diagram types does Mermaid support?
More than 20. The guides here cover the 18 most widely used: flowchart, sequence, class, ER, state, mind map, Gantt, timeline, pie, Git graph, user journey, quadrant, Sankey, XY, block, packet, requirement and C4. Each one starts with its own keyword, such as flowchart or sequenceDiagram, on the first line.
Which Mermaid diagram should I use?
Start from what you want the reader to understand. Steps and decisions call for a flowchart; messages between systems over time call for a sequence diagram; database tables call for an ER diagram; dates and dependencies call for a Gantt chart. The table on this page maps each goal to its diagram.
Where do Mermaid diagrams render?
GitHub and GitLab render Mermaid inside Markdown code blocks, and so do many documentation and note-taking tools. Anywhere else, export the diagram as PNG or SVG, or share a link to it.
Is Mermaid free to use?
Yes. Mermaid itself is open source under the MIT licence. In TryMermaid every diagram type works on the free plan, with PNG and SVG export and up to 50 saved diagrams; you can start without an account.
Can I make Mermaid diagrams without writing code?
Flowcharts can be built by dragging shapes on the TryMermaid canvas, which writes the Mermaid code for you. The other types are written in code with a live preview, and each guide gives you a working example to start from.