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

Code:

Ctrl + Enter|

Code:

Ctrl + Enter|

Basic sequence diagram

Code:

Ctrl + Enter|

Basic flowchart

Code:

Ctrl + Enter|

Larger flowchart with some styling

Code:

Ctrl + Enter|

SequenceDiagram: Loops, alt and opt

Code:

Ctrl + Enter|

SequenceDiagram: Message to self in loop

Code:

Ctrl + Enter|

Sequence Diagram: Blogging app service communication

Code:

Ctrl + Enter|

A commit flow diagram.

Code:

Ctrl + Enter|