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.
Flowchart
Visual canvasShow the steps and decisions in a process.
Read the guide →Sequence diagram
Show messages between users, services or APIs over time.
Read the guide →Class diagram
Model classes in code and how they relate.
Read the guide →ER diagram
Design database tables and their relationships.
Read the guide →State diagram
Describe the states of something and what changes them.
Read the guide →Mind map
Brainstorm or outline ideas around one topic.
Read the guide →Gantt chart
Schedule tasks with dates and dependencies.
Read the guide →Timeline
List events in chronological order.
Read the guide →Pie chart
Show how a total splits into parts.
Read the guide →Git graph
Explain a branching and release strategy.
Read the guide →User journey
Show how each step of an experience feels.
Read the guide →Quadrant chart
Compare items on two axes to decide priority.
Read the guide →Sankey diagram
Show how a quantity flows and where it is lost.
Read the guide →XY chart
Plot values over a scale as bars or a line.
Read the guide →Block diagram
Lay out components on a grid you control.
Read the guide →Packet diagram
Document the bit layout of a binary format.
Read the guide →Requirement diagram
Trace requirements to what satisfies and verifies them.
Read the guide →C4 diagram
Describe software architecture at one level of detail.
Read the guide →
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 |