Mermaid diagram types
Mermaid renders eight core diagram types from plain text. Each guide below has a live example, the syntax you need, and a one-click path into the free editor — visual, code, or AI.
Flowchart
A Mermaid flowchart is a process diagram written as plain text: each line declares a node or an arrow, and the renderer lays out the boxes for you. Because the source is text, flowcharts diff cleanly in Git and render natively in GitHub, GitLab, and most docs tools.
Sequence diagram
A Mermaid sequence diagram shows how systems or people exchange messages over time: participants sit along the top, time flows downward, and each line of code is one message. It's the standard way to document APIs, auth flows, and service-to-service communication.
Class diagram
A Mermaid class diagram is UML-style modelling as text: classes with attributes and methods, plus the relationships between them — inheritance, composition, association. It lives next to the code it describes and diffs in the same pull request.
ER diagram
A Mermaid entity-relationship (ER) diagram describes a database schema as text: entities, their attributes, and crow's-foot cardinality between them (one-to-many, many-to-many). It's the fastest way to sketch a schema before writing migrations — and to keep that sketch in version control.
State diagram
A Mermaid state diagram models a state machine as text: the states something can be in, and the events that move it between them. If your code has a `status` column or an enum, a state diagram is its documentation.
Gantt chart
A Mermaid Gantt chart is a project timeline written as text: sections group tasks, each task gets a start (or a dependency) and a duration, and the renderer draws the bars. No spreadsheet, no project-management tool — a plan you can diff in Git.
Pie chart
A Mermaid pie chart turns a few labelled values into a chart with one line of text each — Mermaid computes the percentages and draws the legend. It's the quickest way to drop a simple breakdown into a README or report.
Git graph
A Mermaid git graph draws a commit railway from commands you already know: `commit`, `branch`, `checkout`, and `merge`. It's the cleanest way to document a branching strategy without screenshotting a Git client.