Mermaid diagram types
Mermaid supports 22 kinds of diagrams, from flowcharts and sequence diagrams to Gantt charts, mindmaps and architecture diagrams. Pick one to see its syntax, live examples and best practices.
Process
Software
Sequence Diagram
Show how services, users and systems exchange messages over time.
Syntax & examples
Class Diagram
Model object-oriented code: classes, members and relationships (UML).
Syntax & examples
State Diagram
Describe state machines: states, transitions, choices and nested states.
Syntax & examples
Git Graph
Visualise Git branches, commits, merges and release tags.
Syntax & examples
Requirement Diagram
Trace requirements to the elements that satisfy and verify them (SysML).
Syntax & examples
C4 Diagram
Document software architecture using the C4 model (context, containers…).
Syntax & examples
Block Diagram
Lay out system components in a grid you control, with spans and nesting.
Syntax & examples
Packet Diagram
Visualise network packets and binary formats bit by bit.
Syntax & examples
Architecture Diagrambeta
Draw cloud and infrastructure diagrams with services, groups and icons.
Syntax & examplesData
Planning
Gantt Chart
Plan projects with tasks, durations, dependencies and milestones.
Syntax & examples
Timeline
Show events in chronological order, grouped by period or section.
Syntax & examples
User Journey
Map user experiences step by step with satisfaction scores.
Syntax & examples
Kanban Board
Show work items as cards in columns such as To do, Doing and Done.
Syntax & examplesCharts
Pie Chart
Show proportions of a whole with a simple labelled pie chart.
Syntax & examples
Quadrant Chart
Plot items on a 2×2 matrix for prioritisation and positioning.
Syntax & examples
Sankey Diagram
Show how quantities flow between categories with weighted links.
Syntax & examples
XY Chart (Bar & Line)
Bar and line charts with categorical or numeric axes.
Syntax & examples
Radar Chartbeta
Compare items across several dimensions on a spider chart.
Syntax & examples
Treemapbeta
Show hierarchical data as nested rectangles sized by value.
Syntax & examples
