Mermaid diagram types

Every Mermaid diagram type explained: syntax basics, common gotchas, ready-to-edit examples and templates. Pick a type to start — each guide opens straight into the editor.

Class Diagram A class diagram shows the structure of object-oriented code … ER Diagram An ER diagram describes a data model — entities, their attri… Flowchart Diagram A flowchart maps a process step by step with boxes, arrows, … Gantt Chart A Gantt chart lays project tasks out on a calendar, showing … Git Graph A git graph draws a repository's branch and merge history as… Journey Map A journey map charts a person's steps through an experience,… Mindmap A mindmap arranges a topic and its subtopics as a radial tre… Pie Chart A pie chart shows how a total divides into categories, rende… Quadrant Chart A quadrant chart plots items on two axes and divides the spa… Sequence Diagram A sequence diagram shows messages passing between participan… State Diagram A state diagram models the states a single thing can be in a… Timeline A timeline lists events in chronological order along a singl…