Skip to content

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:
mermaid
Ctrl + Enter|
Code:
mermaid
Ctrl + Enter|

Basic sequence diagram ​

Code:
mermaid
Ctrl + Enter|

Basic flowchart ​

Code:
mermaid
Ctrl + Enter|

Larger flowchart with some styling ​

Code:
mermaid
Ctrl + Enter|

SequenceDiagram: Loops, alt and opt ​

Code:
mermaid
Ctrl + Enter|

SequenceDiagram: Message to self in loop ​

Code:
mermaid
Ctrl + Enter|

Sequence Diagram: Blogging app service communication ​

Code:
mermaid
Ctrl + Enter|

A commit flow diagram. ​

Code:
mermaid
Ctrl + Enter|
Opens in MermaidChart.com