Diagram types Mermaid supports
Mermaid supports more than ten diagram types. Each has its own compact syntax that reads almost like plain text. Below are the main types and what each is good for.
Flowchart — block diagrams
Algorithms, business processes, decision branches. Nodes can be rectangles, diamonds, circles, cylinders, rounded blocks. Multiple directions are supported (TD — top down, LR — left to right).
Sequence diagram — call timeline
Interactions between actors, services or objects over time. Great for documenting APIs, auth flows, message exchange between microservices.
Class diagram — classes
UML class diagram: fields, methods, visibility, relationships (inheritance, composition, association). Used for OOP design and architecture documentation.
State diagram — finite-state machine
States and transitions between them. Handy for describing UI flows, an order lifecycle, background-task states or data models with multiple statuses.
ER diagram — data model
Database entities and relationships between them (one-to-many, many-to-many, optionality). Fields are shown inside the entity — convenient for schema design.
Gantt — task plan
A schedule of work over time with dependencies and milestones. Suits project plans, release roadmaps and sprint planning.
Pie — pie chart
A simple display of proportions in percent. Works well as an illustration of how time, budget or audience is distributed.
Mindmap — mind map
A hierarchical breakdown of ideas around a central topic. Useful for brainstorms, splitting a feature into tasks, visualizing content structure.
Timeline — chronology
Events in chronological order. Fits product history, biographical notes, year-by-year roadmaps.
GitGraph — git history
Visualization of branches and commits in git. Useful for showing branching strategy (trunk-based, GitFlow) and illustrating complex merge scenarios in documentation.