Examples

This page contains a collection of examples of diagrams and charts that can be created through mermaid and its myriad applications.

If you wish to learn how to support mermaid on your webpage, read the Beginner's Guide.

If you wish to learn about mermaid's syntax, Read the Diagram Syntax section.

Basic Pie Chart

Basic sequence diagram

Basic flowchart

Larger flowchart with some styling

SequenceDiagram: Loops, alt and opt

SequenceDiagram: Message to self in loop

Sequence Diagram: Blogging app service communication

A commit flow diagram.