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

NETFLIX90%10%NETFLIXTime spent looking for movieTime spent watching it

What Voldemort doesn't have?4%6%90%What Voldemort doesn't have?FRIENDSFAMILYNOSE

Basic sequence diagram

AliceBobJohnBob thinks a longlong time, so longthat the text doesnot fit on a row.Hello Bob, how are you?How about you John?I am good thanks!I am good thanks!Checking with John...Yes... John, how are you?AliceBobJohn

Basic flowchart

Link text
Square Rect
Circle
Round Rect
Rhombus

Larger flowchart with some styling

A
Two line
edge comment
Rounded
square
shape
Odd shape
Diamond with
line break
Rounded square shape
Square shape
Circle shape
Inner / circle
and some odd
special characters
Really long text with linebreak
in an Odd shape
,.?!+-*ز
Cyrillic
Circle shape Начало

SequenceDiagram: Loops, alt and opt

AliceBobalt[is sick][is well]opt[Extra response]loop[Daily query]Hello Bob, how are you?Not so good :(Feeling fresh like a daisyThanks for askingAliceBob

SequenceDiagram: Message to self in loop

AliceBobJohnloop[Healthcheck]Rational thoughtsprevail...Hello John, how are you?Fight against hypochondriaGreat!How about you?Jolly good!AliceBobJohn

Sequence Diagram: Blogging app service communication

Web BrowserBlog ServiceAccount ServiceMail ServiceStorageThe user must be logged in to submit blog postsWhen the user is authenticated, they can now submit new postspar[Notifications][Response]alt[Credentials not found][Credentials found]Logs in using credentialsQuery stored accountsRespond with query resultInvalid credentialsSuccessfully logged inSubmit new postStore post dataSend mail to blog subscribersStore in-site notificationsSuccessfully postedWeb BrowserBlog ServiceAccount ServiceMail ServiceStorage

A commit flow diagram.

mainnewbranchb20-ecd4bed11112-93a7c4dtest3-b36ca994-1b6ae3b6-fa76eb27-53bd420